Platforms / Tailwind CSS
Contact form for Tailwind CSS — no backend required
Tailwind is presentation. You still need a destination for form posts.
Setup
- Create a FormHeron form.
- Use the Tailwind markup below.
- Swap YOUR_KEY.
- Deploy on any static host.
Working example
<form action="https://formheron.com/f/YOUR_KEY" method="POST" class="mx-auto max-w-md space-y-4">
<input class="w-full rounded-lg border px-3 py-2" type="email" name="email" required placeholder="Email" />
<textarea class="w-full rounded-lg border px-3 py-2" name="message" required placeholder="Message" rows="4"></textarea>
<!-- honeypot: off-screen, not type=hidden -->
<input type="text" name="_hp" tabindex="-1" autocomplete="off"
aria-hidden="true" style="position:absolute;left:-9999px" />
<button class="rounded-lg bg-emerald-600 px-4 py-2 font-medium text-white" type="submit">Send</button>
</form>Common problems
CDN Tailwind vs build
Either works. FormHeron does not care how CSS is built.
Dark mode classes
Use dark: variants freely; keep name attributes stable.
Accessibility
Pair inputs with labels. Off-screen honeypot should stay aria-hidden.
FAQ
Is there a Tailwind contact form template?
Yes — copy the snippet above and point action at FormHeron.
Does styling affect delivery?
No. Only field names and the action URL matter.
Can I add more fields?
Yes — up to 50 string fields, 10,000 characters each.