Formserve
Features Templates Pricing Docs Blog FAQ
Sign in Create endpoint
← All templates

Contact

Basic contact form

A clean, dependency-free contact form. Drop it into any webpage.

Get started free 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Contact us</title>
  <style>
    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #f9fafb; color: #111827; }
    .wrap { max-width: 480px; margin: 48px auto; padding: 0 16px; }
    h1 { font-size: 28px; margin: 0 0 8px; letter-spacing: -0.02em; }
    p.lead { color: #6b7280; margin: 0 0 24px; }
    form { background: #fff; padding: 28px; border-radius: 12px; border: 1px solid #e5e7eb; }
    label { display: block; font-size: 13px; font-weight: 600; color: #374151; margin: 14px 0 6px; }
    label:first-of-type { margin-top: 0; }
    input, textarea { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid #d1d5db; border-radius: 8px; box-sizing: border-box; font-family: inherit; }
    input:focus, textarea:focus { outline: none; border-color: #4f46e5; box-shadow: 0 0 0 3px rgba(79,70,229,.15); }
    textarea { min-height: 110px; resize: vertical; }
    button { margin-top: 18px; width: 100%; padding: 12px; background: #4f46e5; color: #fff; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
    button:hover { background: #4338ca; }
  </style>
</head>
<body>
  <div class="wrap">
    <h1>Get in touch</h1>
    <p class="lead">We'll reply within one business day.</p>
    <form action="https://formserve.io/f/your-endpoint-key" method="POST">
      <label for="name">Your name</label>
      <input id="name" name="name" type="text" required>

      <label for="email">Email</label>
      <input id="email" name="email" type="email" required>

      <label for="message">Message</label>
      <textarea id="message" name="message" required></textarea>

      <button type="submit">Send message</button>
    </form>
  </div>
</body>
</html>

Make it yours

  1. Copy the HTML above and paste it into your page.
  2. Replace your-endpoint-key in the action attribute with the endpoint key from your Formserve dashboard.
  3. Style it to match your site — every class is yours to override.

Don't have a Formserve account yet? Create one free.