FormThunder isn't open yet. This site describes the service as it will run at launch. Find out more

FormThunder
Menu

Copy a Tailwind CSS contact form that sends real email

Most Tailwind CSS contact form examples only cover the styling. This one also sends: it posts to FormThunder, which stores each submission and emails you. The markup has real labels, visible focus rings and validation states that use Tailwind's user-invalid variant, so an error only shows once someone has touched the field.

Updated

The Tailwind CSS code

contact.html
<form action="https://formthunder.com/submit" method="POST" class="mx-auto max-w-md space-y-4">
  <input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
  <input type="checkbox" name="botcheck" class="hidden" tabindex="-1" autocomplete="off">

  <div>
    <label for="name" class="block text-sm font-medium text-slate-900">Name</label>
    <input id="name" name="name" required
      class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm 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
      class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-950 focus:outline-none user-invalid:border-red-600">
  </div>

  <div>
    <label for="message" class="block text-sm font-medium text-slate-900">Message</label>
    <textarea id="message" name="message" rows="5" required
      class="mt-1 w-full rounded-lg border border-slate-300 px-3 py-2 text-sm focus:border-slate-950 focus:outline-none"></textarea>
  </div>

  <button class="w-full rounded-lg bg-slate-950 px-4 py-2.5 text-sm font-medium text-white hover:bg-slate-700">
    Send message
  </button>
</form>

Replace YOUR_ACCESS_KEY with your free key. It's public by design, so it's safe in client code.

Notes for Tailwind CSS

  • user-invalid: needs Tailwind 3.2 or newer. It only applies after the visitor has interacted with the field, while invalid: turns required fields red on page load.
  • Don't remove the focus outline without replacing it. Here focus:border-slate-950 is the replacement, so keep it if you change the colours.
  • @tailwindcss/forms resets inputs so they restyle more easily. This markup looks fine with or without it.
  • class="hidden" on the honeypot needs Tailwind to be loaded. If the CSS fails to load, the checkbox shows, so add style="display:none" too on critical pages.

Or have your AI add it

Connect the MCP server, then ask. The agent creates the form and writes the code for you, and it can send a real test when it's done.

You, to your AI
Add a FormThunder contact form to this Tailwind CSS site that emails hello@example.com. Send a test when you're done.

Questions

Does this work with Tailwind v3 and v4?

Yes. Every class here exists in both, and user-invalid needs at least 3.2.

Do you have more Tailwind form layouts?

Yes. The templates section has file upload, multi-column, dark mode and others, all in Tailwind.

Related guides

Get your Tailwind CSS form sending

The free plan covers 250 submissions a month, with MCP, the CLI and the brand kit included.

Get started freeRead the quickstart