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

Event / RSVP

Event RSVP

Collect attendee names, dietary requirements, and plus-one info.

Get started free 
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>RSVP</title>
  <style>
    body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #fdf6e3; color: #1c1917; }
    .wrap { max-width: 520px; margin: 48px auto; padding: 0 16px; }
    .header { text-align: center; margin-bottom: 28px; }
    .header .date { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: #a16207; margin-bottom: 8px; }
    .header h1 { font-size: 34px; margin: 0; font-weight: 600; letter-spacing: -0.02em; }
    .header p { color: #57534e; margin: 6px 0 0; }
    form { background: #fff; padding: 30px; border-radius: 14px; border: 1px solid #e7e5e4; }
    label { display: block; font-size: 13px; font-weight: 600; color: #44403c; margin: 14px 0 6px; }
    label:first-of-type { margin-top: 0; }
    input, select, textarea { width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid #d6d3d1; border-radius: 8px; box-sizing: border-box; font-family: inherit; background: #fff; }
    input:focus, select:focus, textarea:focus { outline: none; border-color: #a16207; box-shadow: 0 0 0 3px rgba(161,98,7,.15); }
    .choice-group { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
    .choice-group label { display: flex; align-items: center; padding: 10px 12px; border: 1px solid #d6d3d1; border-radius: 8px; margin: 0; cursor: pointer; font-weight: 500; font-size: 14px; }
    .choice-group input[type=radio] { width: auto; margin-right: 8px; }
    textarea { min-height: 80px; resize: vertical; }
    button { margin-top: 22px; width: 100%; padding: 12px; background: #a16207; color: #fff; border: 0; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; letter-spacing: 0.02em; }
    button:hover { background: #854d0e; }
  </style>
</head>
<body>
  <div class="wrap">
    <div class="header">
      <div class="date">Saturday · June 14, 2026</div>
      <h1>Amelia &amp; Jordan</h1>
      <p>The Old Mill · 6:00 pm</p>
    </div>
    <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>Will you attend?</label>
      <div class="choice-group">
        <label><input type="radio" name="attending" value="yes" required> Joyfully accept</label>
        <label><input type="radio" name="attending" value="no"> Regretfully decline</label>
      </div>

      <label>Plus-one?</label>
      <div class="choice-group">
        <label><input type="radio" name="plus_one" value="yes"> Yes</label>
        <label><input type="radio" name="plus_one" value="no" checked> No</label>
      </div>

      <label for="dietary">Dietary requirements</label>
      <select id="dietary" name="dietary">
        <option value="none">None</option>
        <option>Vegetarian</option>
        <option>Vegan</option>
        <option>Gluten-free</option>
        <option>Other (note below)</option>
      </select>

      <label for="notes">Notes for the hosts</label>
      <textarea id="notes" name="notes" placeholder="Allergies, accessibility, song requests…"></textarea>

      <button type="submit">Send RSVP</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.