Templates / HTML, CSS
Contact form with dark mode
Dark marketing sites that want the form to match the brand.
Live preview
Preview only — does not submit. Copy the code block below for the real snippet.
Copy-paste code
<style>
:root { color-scheme: dark; }
body { margin: 0; min-height: 100vh; background: #050505; color: #f5f5f5; font-family: system-ui, sans-serif; }
form { max-width: 28rem; margin: 4rem auto; padding: 1.5rem; border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; background: #0a0a0c; }
input, textarea { width: 100%; margin: .5rem 0 1rem; padding: .7rem .8rem; border-radius: .6rem; border: 1px solid rgba(255,255,255,.12); background: #111; color: inherit; }
button { width: 100%; padding: .75rem; border: 0; border-radius: .6rem; background: #3ddc97; color: #052e1c; font-weight: 650; cursor: pointer; }
</style>
<form action="https://formheron.com/f/YOUR_KEY" method="POST">
<label>Email<input type="email" name="email" required /></label>
<label>Message<textarea name="message" rows="5" required></textarea></label>
<input type="text" name="_hp" tabindex="-1" autocomplete="off"
aria-hidden="true" style="position:absolute;left:-9999px" />
<button type="submit">Send</button>
</form>What to change
- Replace YOUR_KEY.
- Tune accent #3ddc97 to your brand.
- Add a light theme media query if needed.