Copy a multi-column form template that stacks neatly on a phone
This multi-column form puts short fields side by side from the small breakpoint up, and stacks them into one column on phones with Tailwind's grid. Long fields span the full width. It posts to FormThunder, which stores each submission and emails you, so it works on the free plan with no server.
Updated
Preview
This preview is switched off, so nothing here sends.
Copy the code
Replace YOUR_ACCESS_KEY with your own key. The classes use Tailwind's stock colours, so they work in any Tailwind project.
<form action="https://formthunder.com/submit" method="POST" class="mx-auto grid max-w-2xl gap-4 sm:grid-cols-2">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="hidden" name="subject" value="New enquiry">
<input type="checkbox" name="botcheck" class="hidden" tabindex="-1" autocomplete="off">
<div>
<label for="first_name" class="block text-sm font-medium text-slate-900">First name</label>
<input id="first_name" name="first_name" required autocomplete="given-name" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
</div>
<div>
<label for="last_name" class="block text-sm font-medium text-slate-900">Last name</label>
<input id="last_name" name="last_name" required autocomplete="family-name" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
</div>
<div>
<label for="email" class="block text-sm font-medium text-slate-900">Email</label>
<input id="email" name="email" type="email" required autocomplete="email" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
</div>
<div>
<label for="phone" class="block text-sm font-medium text-slate-900">Phone</label>
<input id="phone" name="phone" type="tel" autocomplete="tel" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
</div>
<div class="sm:col-span-2">
<label for="company" class="block text-sm font-medium text-slate-900">Company</label>
<input id="company" name="company" autocomplete="organization" class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none">
</div>
<div class="sm:col-span-2">
<label for="message" class="block text-sm font-medium text-slate-900">How can we help?</label>
<textarea id="message" name="message" rows="4" required class="mt-1 w-full rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none"></textarea>
</div>
<div class="sm:col-span-2">
<button type="submit" class="rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-700">Send</button>
</div>
</form>The fields that matter
- first_name, last_name
Two short fields that fit side by side. In the email they read as
first_nameandlast_name, or rename them for friendlier labels.- autocomplete
Lets phones and browsers fill the fields in, which matters most on longer forms.
Adapting it
- Two columns work best for fields that belong together, such as first and last name. Keep unrelated questions in one column, as they're quicker to scan.
sm:col-span-2is what stretches a field across both columns.
Questions
How do I make it three columns?
Change sm:grid-cols-2 to sm:grid-cols-3, and set a col-span on the fields that need more room.
Does the layout change how submissions arrive?
No. Only the name attributes matter to FormThunder, in whatever order the form sends them.
Get a key and make this form send
This template works on the free plan, up to 250 submissions a month.