Templates / HTML, Tailwind
Tailwind CSS contact form
Marketing sites already on Tailwind that need a real form backend.
Live preview
Preview only — does not submit. Copy the code block below for the real snippet.
Copy-paste code
<form action="https://formheron.com/f/YOUR_KEY" method="POST" class="mx-auto max-w-md space-y-4 rounded-2xl border border-neutral-200 bg-white p-6 shadow-sm">
<div>
<label class="mb-1 block text-sm font-medium text-neutral-700" for="email">Email</label>
<input id="email" name="email" type="email" required
class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm outline-none focus:border-emerald-600" />
</div>
<div>
<label class="mb-1 block text-sm font-medium text-neutral-700" for="message">Message</label>
<textarea id="message" name="message" rows="4" required
class="w-full rounded-lg border border-neutral-300 px-3 py-2 text-sm outline-none focus:border-emerald-600"></textarea>
</div>
<input type="text" name="_hp" tabindex="-1" autocomplete="off"
aria-hidden="true" style="position:absolute;left:-9999px" />
<button type="submit" class="w-full rounded-lg bg-emerald-700 px-4 py-2.5 text-sm font-semibold text-white hover:bg-emerald-800">
Send
</button>
</form>What to change
- Replace YOUR_KEY.
- Adjust Tailwind classes to match your design tokens.
- Add dark: variants if your site is dark by default.