Copied form code to clipboard 👏

RSVP Forms

Free RSVP Form Generator

Create a free HTML RSVP form with this RSVP form generator: customize the fields, style, and color, then copy the code and collect attendance details for weddings, parties, and corporate events.

Copy Code

<section class="formcarry-container">
  <form action="https://formcarry.com/s/YOUR-FORM-ID" method="POST" enctype="multipart/form-data">
    <div class="formcarry-block">
      <label for="fc-generated-1-name">Full Name</label>
      <input type="text" id="fc-generated-1-name" name="name" placeholder="Your first and last name" />
    </div>

    <div class="formcarry-block">
      <label for="fc-generated-1-email">Your Email Address</label>
      <input type="email" id="fc-generated-1-email" name="email" placeholder="john@doe.com" />
    </div>

    <div class="formcarry-block">
      <label for="fc-generated-1-telephone">Your Phone Number</label>
      <input type="tel" id="fc-generated-1-telephone" name="telephone" placeholder="### ### ####" />
    </div>

    <div class="formcarry-block">
      <label for="fc-generated-1-people">Number of people attending:</label>
      <select id="fc-generated-1-people" name="people">
        <option value="" selected disabled>Please select..</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
      </select>
    </div>

    <div class="formcarry-block">
      <button type="submit">Send</button>
    </div>
  </form>
</section>

<style>
  
    @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap');

    .formcarry-container {
      box-sizing: border-box;
      margin: 40px auto 0 auto;
      padding: 0;
      font-family: "Inter", sans-serif;
      font-size: 14px;
      font-weight: 400;
      line-height: 24px;
      letter-spacing: -0.01em;

      width: 400px;

      /* NORMAL */
      --fc-border-color: #ECEFF9;
      --fc-normal-text-color: #0E0B3D;
      --fc-normal-placeholder-color: #B3B8D0;

      /* PRIMARY COLOR | HSL FORMAT*/
      --fc-primary-color-hue: 220;
      --fc-error-color-hue: 356;
      --fc-primary-hsl: var(--fc-primary-color-hue), 100%, 54%;
      --fc-error-hsl: var(--fc-error-color-hue), 100%, 54%;

      /* HOVER */
      --fc-field-hover-bg-color: #F7F9FC;
      --fc-border-hover-color: #DDE0EE;
      --fc-field-hover-text-color: #B3B8D0;

      --fc-border-active-color: #1463FF;
    }

    .formcarry-container * {
      box-sizing: border-box;
    }

    .formcarry-container label {
      display: block;
      cursor: pointer;
    }

    .formcarry-container .formcarry-block:not(:first-child) {
      margin-top: 16px;
    }

    /*=============================================
    =            Fields           =
    =============================================*/
    
    .formcarry-container input,
    .formcarry-container textarea,
    .formcarry-container select {
      margin-top: 4px;
      width: 100%;
      height: 42px;
      border: 1px solid var(--fc-border-color);
      color: var(--fc-normal-text-color);
      border-radius: 6px;
      padding: 8px 12px;
      
      font-family: "Inter", sans-serif;
      font-size:14px;
      transition: 125ms background, 125ms color, 125ms box-shadow;
    }

    .formcarry-container textarea{
      min-height: 188px;
      max-width: 100%;
      padding-top: 12px;
    }

    .formcarry-container input::placeholder,
    .formcarry-container textarea::placeholder,
    .formcarry-container select::placeholder {
      color: var(--fc-normal-placeholder-color);
    }

    .formcarry-container input:hover,
    .formcarry-container textarea:hover,
    .formcarry-container select:hover {
      border-color: var(--fc-border-hover-color);
      background-color: var(--fc-field-hover-bg-color);
    }

    .formcarry-container input:hover::placeholder,
    .formcarry-container textarea:hover::placeholder,
    .formcarry-container select:hover::placeholder {
      color: var(--fc-field-hover-text-color);
    }

    .formcarry-container input:focus,
    .formcarry-container textarea:focus,
    .formcarry-container select:focus {
      background-color: #fff;
      border-color: hsl(var(--fc-primary-hsl));
      box-shadow: hsla(var(--fc-primary-hsl), 8%) 0px 0px 0px 3px;
      outline: none;
    }

    .formcarry-container select {
      background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11.9997 14.5001L8.46387 10.9642L9.64303 9.78589L11.9997 12.1434L14.3564 9.78589L15.5355 10.9642L11.9997 14.5001Z' fill='%236C6F93'/%3E%3C/svg%3E%0A");
      /* background-position: calc(100% - 20px) calc(1em + 4px), calc(100% - 15px) calc(1em + 4px); */
      background-size: 24px 24px;
      background-position: 98%;
      background-repeat: no-repeat;
      appearance: none;
      -webkit-appearance: none;
    }

    .formcarry-container button {
      font-family: "Inter", sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.02em;
      height: 42px;
      line-height: 40px;
      width: 100%;
      border-radius: 6px;
      box-sizing: border-box;
      border: 1px solid hsla(var(--fc-primary-hsl));
      background-color: hsla(var(--fc-primary-hsl));
      color: #fff;
      cursor: pointer;
    }

    .formcarry-container button {
      font-family: "Inter", sans-serif;
      font-weight: 500;
      font-size: 14px;
      letter-spacing: -0.02em;
      height: 40px;
      line-height: 24px;
      width: 100%;
      border: 0;
      border-radius: 6px;
      box-sizing: border-box;
      background-color: hsla(var(--fc-primary-hsl));
      color: #fff;
      cursor: pointer;
      box-shadow: 0 0 0 0 transparent;
      
      transition: 125ms all;
    }
    
    .formcarry-container button:hover {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1)), hsla(var(--fc-primary-hsl));
    }
    
    .formcarry-container button:focus {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), hsla(var(--fc-primary-hsl));
      border-inline: 1px solid inline rgba(255, 255, 255, 0.6);
      box-shadow: 0px 0px 0px 3px rgba(var(--fc-primary-hsl), 12%);
    }

    .formcarry-container button:active {
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), hsla(var(--fc-primary-hsl));
    }

    .formcarry-container button:disabled {
      background-color: hsla(var(--fc-primary-hsl), 40%);
      cursor: not-allowed;
    }

    .formcarry-container input:focus:required:invalid,
    .formcarry-container input:focus:invalid, 
    .formcarry-container select:focus:required:invalid,
    .formcarry-container select:focus:invalid
    {
      color: hsl(var(--fc-error-hsl)); 
      border-color: hsl(var(--fc-error-hsl));
      box-shadow: 0px 0px 0px 3px hsla(var(--fc-error-hsl), 12%);
    }

    /*=====  End of Fields  ======*/
</style>

Settings

Style

Formal
Fancy

Color

Blue

Framework

HTML

React

Vue

Styling

CSS

Tailwind

Submission

Basic

Fetch API

jQuery

Basic redirects to a thank-you page; the others submit without a reload.

Formcarry Form (Optional)

Seems like you haven't logged in Login

Get Started

Preview

Code

How to collect submissions from
your RSVP Form template?

By default HTML Forms are static, you can't collect messages unless you add backend code. You can write the PHP form handler yourself, or use our service Formcarry - Form API for RSVP Form to make it work in 2 minutes. This RSVP Form Template Code has been developed by formcarry for free.

1

Sign up to formcarry then create your first form backend

Steps to create first form

You can follow the steps like in the video above 👆

2

Configure your HTML form template and copy the code

Configuring your form to copy the code

By doing that you will get a fully working form that you can collect messages and get emails.

3

Paste your code inside your project.

Paste your code inside your project.

If you are in a rush and want to quickly test it, consider using CodeSandbox to quickly test the code.

4

Collect submissions ✨

The code you got is completely working, if you submit your form you'll get your messages into the formcarry dashboard.

Form submission arriving in the Formcarry dashboard

User Manual

What is an RSVP form?

An RSVP form is an online form that collects responses to an invitation: whether a guest will attend, how many people they are bringing, and details you need to plan, such as meal choice or dietary restrictions. Replacing paper reply cards and email threads with an RSVP form gives you a live headcount in one place. This free RSVP form generator builds the HTML, React, or Vue code for you. Pick a style, adjust the color, copy the code, and connect it to Formcarry to receive every response by email and in your dashboard.

When to use an RSVP form?

Weddings and engagement parties: collect attendance, plus-ones, and meal choices in one place instead of chasing reply cards. Corporate events and conferences: know your headcount for catering, seating, and badges before the day. Private parties and reunions: a quick form on a simple page beats a group chat for keeping track of who is coming. Workshops and classes: cap attendance by closing the form when you reach your limit.

LET US EXPLAIN

Frequently Asked Questions

How do I create an RSVP form for a wedding?

Pick a style above, add fields for guest count and meal choice, copy the generated code into your wedding website, and connect a Formcarry endpoint to get every reply by email.

Can I limit how many guests someone can bring?

Yes. The template uses a select field for the number of guests. Edit its options to cap the count, for example 1 to 2 for plus-one invites.

Do guests need an account to RSVP?

No. Guests fill in the form on your site and press send. Responses land in your email and your Formcarry dashboard, and nobody creates an account.

Can I upload files to formcarry?

Absolutely! Check out our File upload form tutorial.

I want to get email notifications each time my form gets a new message, is it possible?

Yes! you can even use your own HTML email template ✌️🤓

Adding email notifications

Does formcarry block spam?

We're the biggest enemies of spam, formcarry is so powerful that it detects 99.8% of spam submissions! We also support Google ReCaptcha integration which will block bot attacks.

BUSINESS, BUSINESS

Why Formcarry?

Formcarry blocks spam by default

90% of the messages you get from a form are going to be spam, if you don’t have a solution to detect spam you’ll quickly train your stimuli to not give enough attention to submissions, that might cause you to miss important messages and in time you’ll feel bored of it, Formcarry detects 99.8% of the spam submissions by default without any configuration.

Formcarry is secure

GDPR and CCPA put real pressure on businesses to avoid data breaches, our only job is form messages so we take this matter really seriously.

Formcarry is always online

Most of the forms just got broken by themselves and nobody’s noticing it, your email server might stop working, or emails you got can be land on the spam folder or simply your code gets broken over time. If you use formcarry, we’ll handle everything about these scenarios so you don’t have to worry.

Formcarry is integrated with 3000+ apps

Formcarry can be instantly integrated through +3000 apps by using Zapier, you can quickly set up marketing flows that will help your business.

Formcarry saves time and headache

Set up a working form endpoint in about 2 minutes instead of building and maintaining a backend, an email server, and spam filtering yourself.

Formcarry dashboard is the best

Formcarry dashboard is made only for showing form data, it has detailed filtering and sorting mechanisms to help you analyze and export your data.

LET'S GET STARTED!

Hassle Free Forms

Create your form endpoint and start collecting submissions

for your HTML forms, it only takes 2 minutes to set up your form

formcarry dashboard.
Your email address|