RSVP form template

Free RSVP form
template, HTML and React.

An RSVP form for a wedding website or event page. Guests say whether they are coming, how many seats they need and what they would like to eat, and every reply lands in your inbox.

Use this template Preview the template

250 submissions/month free. No credit card required.

Preview, restyle and copy the code.

Preview only. Nothing is sent from this page.

Your rsvp form, ready to make your own.

The code includes the fields, the CSS for the style you chose and a hidden anti-spam field. Replace the placeholder endpoint with your own before publishing, or open it in the designer to change fields, colors and wording without touching code.

Customize in Form Koi

rsvp-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #fffaf0; color: #483c32; font: 16px/1.5 Georgia, serif; border: 1px solid #483c3230; border-radius: 2px; }
.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.formkoi-form > p { margin: 0 0 24px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 18px; }
.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.formkoi-field--half { grid-column: span 1; }
.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 0; border-bottom: 1px solid #483c3280; border-radius: 0; background: transparent; padding-left: 0; padding-right: 0; color: #483c32; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #483c3280; }
.formkoi-fields input[type=file] { padding: 10px; }
.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.formkoi-choices legend { padding: 0; margin-bottom: 6px; }
.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.formkoi-choices label + label { margin-top: 8px; }
.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #92452e; }
.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }
.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 16px; padding: 12px 22px; border: 0; border-radius: 2px; background: #92452e; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.formkoi-fields button:hover { filter: brightness(.94); }
.formkoi-fields :focus-visible { outline: 2px solid #92452e; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Will you join us?">
<h2>Will you join us?</h2>
<p>Please reply by the date on your invitation.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <fieldset class="formkoi-field formkoi-choices">
    <legend>Will you be attending?</legend>
    <label><input type="radio" name="attending" value="Joyfully accept" required> Joyfully accept</label>
    <label><input type="radio" name="attending" value="Regretfully decline" required> Regretfully decline</label>
  </fieldset>
  <div class="formkoi-field formkoi-field--half">
  <label for="guests">Number of guests</label>
  <input id="guests" name="guests" type="number" placeholder="1" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="meal">Meal choice</label>
  <select id="meal" name="meal">
    <option value="">Choose one</option>
    <option value="Chicken">Chicken</option>
    <option value="Fish">Fish</option>
    <option value="Vegetarian">Vegetarian</option>
  </select>
  </div>
  <div class="formkoi-field">
  <label for="song_request">Song request</label>
  <input id="song_request" name="song_request" placeholder="Something to get you dancing">
  </div>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

  <button type="submit">Send RSVP</button>
</form>
</section>

New to connecting a form? The HTML contact form guide and the React contact form guide walk through pointing any of these templates at your endpoint.

Fields in this RSVP form.

Attendance is a yes or no multiple choice so it is impossible to miss. Meal choice is a dropdown you can edit to match your menu.

Label	Field name	Type	Required
Your name	`name`	Short text	Yes
Email address	`email`	Email	Yes
Will you be attending?	`attending`	Multiple choice: Joyfully accept, Regretfully decline	Yes
Number of guests	`guests`	Number	Yes
Meal choice	`meal`	Dropdown: Chicken, Fish, Vegetarian	No
Song request	`song_request`	Short text	No

Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.

Make it yours in minutes.

Change fields without code

Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.

Explore

Match your website

Pick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.

Connect one endpoint

Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.

Explore

Related templates.

Frequently asked questions

RSVP form
questions.

Can I see who has replied?

Every RSVP appears in your Form Koi inbox with the guest’s answers, and each one is emailed to you. Search and archive as replies come in.

Can I use it on a static wedding website?

Yes. The template is plain HTML, so it works on any host, including GitHub Pages, Netlify and Squarespace code blocks.

Can declines go to a different inbox?

Add a routing rule on the attending field to notify a planner only for accepts, or to keep declines in the inbox without email.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free RSVP formtemplate, HTML and React.