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.

Contact

Copy-paste code

contact-dark.html
<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.

Related templates