Free tool
RSVP form generator
Collect event RSVPs without a backend. Build a form for attendance, guest counts and notes, style it, and paste the code into your event page.
Fields
Submission
Where submissions go. Paste your form ID to make the code real — or keep the placeholder while you experiment.
On submit
Spam & privacy
Design
Styling
Adds Tailwind utility classes. Your project needs Tailwind installed.
Live preview
contact-form.html
<form class="flex w-full max-w-md flex-col gap-4" action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
<label class="flex flex-col gap-1.5">
<span class="text-sm font-medium text-neutral-200">Name <span class="text-red-500">*</span></span>
<input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="text" name="name" required />
</label>
<label class="flex flex-col gap-1.5">
<span class="text-sm font-medium text-neutral-200">Email <span class="text-red-500">*</span></span>
<input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="email" name="email" placeholder="[email protected]" required />
</label>
<label class="flex flex-col gap-1.5">
<span class="text-sm font-medium text-neutral-200">Attending? <span class="text-red-500">*</span></span>
<select class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" name="attending" required>
<option value="" disabled selected>Choose…</option>
<option value="Yes, I'll be there">Yes, I'll be there</option>
<option value="No, can't make it">No, can't make it</option>
</select>
</label>
<label class="flex flex-col gap-1.5">
<span class="text-sm font-medium text-neutral-200">Number of guests</span>
<input class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30" type="number" name="guests" placeholder="0" />
</label>
<label class="flex flex-col gap-1.5">
<span class="text-sm font-medium text-neutral-200">Note</span>
<textarea class="w-full rounded-lg border px-3 py-2 text-sm outline-none border-neutral-700 bg-neutral-900 text-neutral-100 placeholder-neutral-500 focus:border-[#ffffff] focus:ring-2 focus:ring-[#ffffff]/30 min-h-[120px]" name="message" placeholder="Dietary needs, questions…"></textarea>
</label>
<input type="hidden" name="_subject" value="New RSVP" />
<!-- Anti-spam honeypot, leave this empty -->
<input type="text" name="_gotcha" tabindex="-1" autocomplete="off" aria-hidden="true" style="position:absolute;left:-9999px" />
<button class="rounded-lg cursor-pointer bg-[#ffffff] px-4 py-2.5 text-sm font-semibold text-black transition-opacity hover:opacity-90" type="submit">Send RSVP</button>
</form>How it works
- Choose a template and fields. Pick a template, then add, remove, or reorder fields and mark the required ones.
- Style it. Pick CSS, Tailwind, or unstyled output and tune the theme: accent color, light or dark, rounded corners.
- Copy your framework's code. Switch to HTML, React, Vue, Svelte, Astro, or a fetch() version and copy, download, or open it in CodePen.
- Connect an endpoint. Create a free ShipMyForm form to get a real endpoint, then drop your form ID in so submissions actually arrive.
Want the background? Read what a form backend is and how to stop form spam without reCAPTCHA.
Frequently asked questions
- Is this RSVP form generator free?
- Yes. Generating and copying the code is completely free and needs no signup. You only create a free ShipMyForm account when you want the form to actually receive submissions.
- Does the RSVP form need a backend?
- No. The form posts to a hosted endpoint, so it works on any static site. Submissions are stored, spam-filtered, and emailed to you without a server.
- Can I use it with React, Vue, Svelte or Astro?
- Yes. Switch the output tab to your framework: the generator produces ready-to-paste code for HTML, React, Vue, Svelte, Astro, and a fetch() version, all pointing at the same endpoint.
- How does spam protection work?
- The generator adds an invisible honeypot field that bots fill but humans never see. Combined with server-side rate limiting it stops most spam without a CAPTCHA, and you can add a Cloudflare Turnstile key too.