Copy a contact form template that sends to your inbox
This contact form template has three fields, a spam honeypot and Tailwind styling, and it sends without a server. Copy the HTML, replace YOUR_ACCESS_KEY with your own key, and each message is stored by FormThunder and emailed to your verified address. It works on the free plan, in any framework that outputs HTML.
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 max-w-md space-y-4">
<input type="hidden" name="access_key" value="YOUR_ACCESS_KEY">
<input type="hidden" name="subject" value="New contact form message">
<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 autocomplete="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="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 bg-white px-3 py-2 text-sm text-slate-950 focus:border-slate-950 focus:outline-none"></textarea>
</div>
<button type="submit" 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>The fields that matter
- subject
The email's subject line, so you can filter it in your inbox.
Becomes the submission's sender, so pressing reply in your mail app answers the visitor.
- botcheck
A hidden honeypot. People never see it, and bots that tick it land in spam.
Adapting it
- Ask your AI to change the subject to a template such as
New message from {{name}}. - Add
redirectas a hidden field to send people to your own thank-you page.
Questions
Is this contact form template free to use?
Yes. Copy it, change it and use it anywhere. It works on FormThunder's free plan, up to 250 submissions a month.
Do I need Tailwind for this template?
To keep the look, yes. The form still sends without it, because the classes only affect styling.
Get a key and make this form send
This template works on the free plan, up to 250 submissions a month.