Industry example
Photographer enquiry

A polished session-booking form tailored for photography studios.
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lumière Studio — Session enquiry</title>
  <style>
    body { margin: 0; font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #faf9f6; color: #1c1917; line-height: 1.5; }
    .hero { padding: 64px 24px 32px; text-align: center; max-width: 640px; margin: 0 auto; }
    .eyebrow { font-size: 11px; letter-spacing: 0.25em; text-transform: uppercase; color: #78716c; margin-bottom: 18px; }
    .hero h1 { font-family: Georgia, serif; font-size: 44px; font-weight: 400; letter-spacing: -0.02em; margin: 0 0 12px; }
    .hero h1 em { font-style: italic; color: #a16207; }
    .hero p { color: #57534e; margin: 0; font-size: 17px; }
    .container { max-width: 560px; margin: 0 auto 64px; padding: 0 24px; }
    form { background: #fff; padding: 40px; border-radius: 4px; border: 1px solid #e7e5e4; }
    .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
    label { display: block; font-size: 11px; font-weight: 600; color: #57534e; letter-spacing: 0.08em; text-transform: uppercase; margin: 18px 0 8px; }
    label:first-of-type, .row label { margin-top: 0; }
    input, textarea, select { width: 100%; padding: 12px 0; font-size: 15px; border: 0; border-bottom: 1px solid #d6d3d1; border-radius: 0; box-sizing: border-box; font-family: inherit; background: transparent; color: #1c1917; }
    input:focus, textarea:focus, select:focus { outline: none; border-bottom-color: #a16207; }
    textarea { min-height: 100px; resize: vertical; }
    select { -webkit-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23a16207'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 16px; padding-right: 24px; }
    button { margin-top: 32px; width: 100%; padding: 16px; background: #1c1917; color: #fff; border: 0; border-radius: 2px; font-size: 11px; font-weight: 600; cursor: pointer; letter-spacing: 0.25em; text-transform: uppercase; transition: background 0.15s; }
    button:hover { background: #a16207; }
    .meta { text-align: center; color: #78716c; font-size: 13px; padding: 20px 0 40px; }
    @media (max-width: 480px) { .row { grid-template-columns: 1fr; } .hero h1 { font-size: 34px; } form { padding: 28px; } }
  </style>
</head>
<body>
  <div class="hero">
    <div class="eyebrow">Lumière Studio</div>
    <h1>Every session begins with a <em>conversation</em>.</h1>
    <p>Tell us a little about the moments you'd like to capture. We reply within 24 hours.</p>
  </div>

  <div class="container">
    <form action="https://formserve.io/f/your-endpoint-key" method="POST">
      <div class="row">
        <div>
          <label for="first_name">First name</label>
          <input id="first_name" name="first_name" type="text" required>
        </div>
        <div>
          <label for="last_name">Last name</label>
          <input id="last_name" name="last_name" type="text" required>
        </div>
      </div>

      <div class="row" style="margin-top:18px;">
        <div>
          <label for="email">Email</label>
          <input id="email" name="email" type="email" required>
        </div>
        <div>
          <label for="phone">Phone</label>
          <input id="phone" name="phone" type="tel">
        </div>
      </div>

      <label for="session_type">Session type</label>
      <select id="session_type" name="session_type" required>
        <option value="">Select…</option>
        <option>Portrait — from $350</option>
        <option>Engagement — from $550</option>
        <option>Wedding — from $2,400</option>
        <option>Family — from $450</option>
        <option>Editorial — custom</option>
        <option>Corporate — from $280</option>
      </select>

      <div class="row" style="margin-top:18px;">
        <div>
          <label for="preferred_date">Preferred date</label>
          <input id="preferred_date" name="preferred_date" type="date">
        </div>
        <div>
          <label for="location">Location / city</label>
          <input id="location" name="location" type="text">
        </div>
      </div>

      <label for="vision">Tell us about your vision</label>
      <textarea id="vision" name="vision" placeholder="The mood, the people, the moments you want to remember…"></textarea>

      <button type="submit">Send enquiry</button>
    </form>

    <p class="meta">We respond personally within 24 hours.</p>
  </div>
</body>
</html>
Make it yours

Copy the HTML above and paste it into your page.
Replace your-endpoint-key in the action attribute with the endpoint key from your Formserve dashboard.
Style it to match your site — every class is yours to override.
Don't have a Formserve account yet? Create one free.