Copy a dark mode contact form template with readable contrast
This dark mode contact form uses slate-950 for its background with slate-50 text, and a color-scheme setting so browsers draw dark autofill and validation UI. It posts to FormThunder, which stores each submission and emails you. To follow the visitor's system setting, swap the fixed colours for Tailwind's dark: variants.
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 rounded-lg bg-slate-950 p-6 [color-scheme:dark]">
<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="dm-name" class="block text-sm font-medium text-slate-100">Name</label>
<input id="dm-name" name="name" required autocomplete="name" class="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-50 focus:border-yellow-400 focus:outline-none">
</div>
<div>
<label for="dm-email" class="block text-sm font-medium text-slate-100">Email</label>
<input id="dm-email" name="email" type="email" required autocomplete="email" class="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-50 focus:border-yellow-400 focus:outline-none">
</div>
<div>
<label for="dm-message" class="block text-sm font-medium text-slate-100">Message</label>
<textarea id="dm-message" name="message" rows="5" required class="mt-1 w-full rounded-lg border border-slate-700 bg-slate-900 px-3 py-2 text-sm text-slate-50 focus:border-yellow-400 focus:outline-none"></textarea>
</div>
<button type="submit" class="w-full rounded-lg bg-yellow-400 px-4 py-2.5 text-sm font-medium text-slate-950 hover:bg-yellow-300">Send message</button>
</form>The fields that matter
- [color-scheme:dark]
Tells the browser to draw its own parts, such as autofill and date pickers, for a dark background.
- focus:border-yellow-400
A focus state you can see on dark. The default blue ring is often hard to see here.
Adapting it
- For a form that follows the system setting, write
bg-white dark:bg-slate-950, and the same for the text and border colours. - Autofilled inputs can flash a pale background in some browsers.
color-schemehandles most of that.
Questions
Does this follow the system dark mode setting?
As written, it's always dark. Add Tailwind's dark: variants to follow the visitor's setting.
Can the notification email be dark too?
Yes. Set the background and text colours in your brand kit, and the built-in themes use them.
Get a key and make this form send
This template works on the free plan, up to 250 submissions a month.