Free form template

Styled HTML Contact Form With CSS (No Framework)

A polished contact form with its own small stylesheet: no framework, light and dark mode, works anywhere you can paste HTML.

Preview

The code

<style>
  .cf { max-width:480px; margin:0 auto; display:grid; gap:14px; font-family:system-ui, sans-serif; color:#1c1917; }
  .cf label { display:grid; gap:6px; font-size:14px; font-weight:600; }
  .cf input, .cf textarea { font:inherit; padding:10px 12px; border:1px solid #d6d3d1; border-radius:10px; background:#fff; color:inherit; }
  .cf input:focus, .cf textarea:focus { outline:2px solid #f59e0b; outline-offset:1px; border-color:#f59e0b; }
  .cf button { justify-self:start; padding:11px 20px; border:0; border-radius:10px; background:#1c1917; color:#fff; font:inherit; font-weight:600; cursor:pointer; }
  @media (prefers-color-scheme: dark) {
    .cf { color:#f5f1ea; } .cf input, .cf textarea { background:#1c1917; border-color:#44403c; } .cf button { background:#f59e0b; color:#1c1917; }
  }
</style>
<form class="cf" action="https://formpit.com/f/YOUR_FORM_ID" method="POST">
  <label>Name <input type="text" name="name" required></label>
  <label>Email <input type="email" name="email" required></label>
  <label>Message <textarea name="message" rows="5" required></textarea></label>
  <input type="text" name="_gotcha" style="display:none" tabindex="-1" autocomplete="off">
  <button type="submit">Send message</button>
</form>

Create a free Formpit form and copy its endpoint from the Setup tab.
Paste the code into your page and replace YOUR_FORM_ID.
Submit it once: the message arrives by email and in your inbox.

Tips

The dark-mode block follows the visitor's system setting.
Change #f59e0b to your accent colour.

More templates

Contact form · File upload form · Newsletter signup form · Waitlist form · Quote request form · Job application form · Event RSVP form · Feedback form · Tailwind CSS contact form · Bootstrap contact form