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.
Template
Fields
Leave as-is to keep the placeholder, or create a free form to get a real endpoint.
On submit
Styling
Adds Tailwind utility classes. Your project needs Tailwind installed.
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>Live preview
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.