# RSVP form template A free RSVP form with attendance, guest count and a note. Copy the HTML, CSS and JS, or use it in React, Next.js, Vue, Svelte or Astro. This RSVP form asks whether each guest is coming and how many people they are bringing. Name, email and attendance are required. Extra guests and a note for dietary needs or questions are optional. Live preview, field editor, four themes and styled versions for every framework: https://nisuform.com/templates/rsvp-form ## Fields | Field | Name | Type | Required | | --- | --- | --- | --- | | Name | `name` | Short text | Yes | | Email | `email` | Email | Yes | | Will you attend? | `attending` | Multiple choice (Yes, I’ll be there, Sorry, can’t make it) | Yes | | Additional guests | `guests` | Number | No | | Anything we should know? | `note` | Long text | No | ## How to use it 1. Create a free form at https://app.nisuform.com and copy its form key. 2. Paste the code where the form should appear and replace `YOUR_FORM_KEY` with your key. 3. Submit the form once. The submission appears in your Nisuform inbox and you get an email. ## Styled HTML, CSS and JavaScript The form with its styles and a small script that sends it without a page reload and shows the success message. ```html ``` ## Unstyled HTML Bare markup that picks up your own CSS. It posts without JavaScript and keeps the hidden `_gotcha` field that stops bots. ```html ``` ## Framework components ### React ```jsx import { useRef, useState } from 'react' export function RsvpForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! Your RSVP is in.

return ( ) } ``` ### Next.js ```jsx 'use client' import { useRef, useState } from 'react' export function RsvpForm() { const renderedAt = useRef(Date.now()) const [status, setStatus] = useState('idle') async function onSubmit(event) { event.preventDefault() setStatus('sending') const data = Object.fromEntries(new FormData(event.currentTarget)) data._elapsed = String(Date.now() - renderedAt.current) const response = await fetch("https://api.nisuform.com/s/YOUR_FORM_KEY", { method: 'POST', headers: { 'Content-Type': 'application/json', Accept: 'application/json' }, body: JSON.stringify(data), }) setStatus(response.ok ? 'sent' : 'error') } if (status === 'sent') return

Thanks! Your RSVP is in.

return ( ) } ``` ### Vue ```vue ``` ### Svelte ```svelte {#if status === 'sent'}

Thanks! Your RSVP is in.

{:else} {/if} ``` ### Astro ```astro --- const endpoint = "https://api.nisuform.com/s/YOUR_FORM_KEY" --- ``` ## When to use it - RSVPs on a wedding website - Birthday, launch and holiday party invitations - Community meetups and free events - Company offsites and team dinners ## Customize it ### Close RSVPs on a date Set a close date in the form settings and the form stops accepting replies at that moment, with a message that RSVPs are closed. ### Count the guests Export the replies as CSV and add up the `guests` column in Excel or Google Sheets. On Pro, Analytics shows the total of number fields for forms built in the dashboard. ### Ask about meals Add a `select` with your menu options, named something like `meal`. It is saved with the rest of the reply. ## Frequently asked questions ### How do I add an RSVP form to my wedding website? Copy the code above into your wedding website, or paste it into an HTML or embed block if you use a site builder. Create a free Nisuform form, put its key in the code, and every RSVP is saved and emailed to you. ### Can guests change their RSVP? Each reply is stored as its own submission. If someone sends the form twice, both are in your inbox with the time they were sent, so you can go with the latest answer. ### Can I limit the number of RSVPs? Yes. Set a maximum number of submissions and the form closes when it is full.

You’re invited