Logo for FormBackend
« back to blog

Free RSVP Form Template — HTML Code for Events & Parties

Planning an event? Collecting RSVPs just got easier. Whether you’re organizing a wedding, corporate event, birthday party, or conference, a well-designed RSVP form helps you track attendance, dietary requirements, and other essential details. This guide provides a complete, customizable HTML RSVP template that you can deploy in minutes using FormBackend to manage all your guest responses.

Complete RSVP Form Code

Here’s a fully-featured RSVP form ready to use for your event:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>RSVP Form</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }

        .container {
            background: white;
            border-radius: 10px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.12);
            padding: 50px;
            max-width: 550px;
            margin: 0 auto;
        }

        .header {
            text-align: center;
            margin-bottom: 40px;
        }

        h1 {
            font-size: 36px;
            color: #d63031;
            margin-bottom: 10px;
        }

        .subtitle {
            font-size: 18px;
            color: #636e72;
            margin-bottom: 8px;
        }

        .event-date {
            font-size: 14px;
            color: #b2bec3;
        }

        .form-group {
            margin-bottom: 24px;
        }

        label {
            display: block;
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 8px;
            color: #2d3436;
        }

        .required::after {
            content: " *";
            color: #d63031;
        }

        input[type="text"],
        input[type="email"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 12px 14px;
            border: 2px solid #dfe6e9;
            border-radius: 6px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
            background: #fff;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #d63031;
            box-shadow: 0 0 0 3px rgba(214, 48, 49, 0.1);
        }

        textarea {
            resize: vertical;
            min-height: 80px;
        }

        .radio-group,
        .checkbox-group {
            display: flex;
            flex-direction: column;
            gap: 12px;
        }

        .radio-item,
        .checkbox-item {
            display: flex;
            align-items: center;
        }

        .radio-item input[type="radio"],
        .checkbox-item input[type="checkbox"] {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            cursor: pointer;
            accent-color: #d63031;
        }

        .radio-item label,
        .checkbox-item label {
            cursor: pointer;
            font-size: 14px;
            font-weight: normal;
            color: #2d3436;
            margin: 0;
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }

        @media (max-width: 480px) {
            .container {
                padding: 25px;
            }

            h1 {
                font-size: 28px;
            }

            .form-row {
                grid-template-columns: 1fr;
            }
        }

        button {
            width: 100%;
            padding: 14px 20px;
            background: #d63031;
            color: white;
            border: none;
            border-radius: 6px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: background 0.3s ease;
            margin-top: 10px;
        }

        button:hover {
            background: #e17055;
        }

        button:active {
            transform: scale(0.98);
        }

        .success-message {
            display: none;
            background: #55efc4;
            color: #00b894;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            border-left: 4px solid #00b894;
        }

        .error-message {
            display: none;
            background: #fab1a0;
            color: #d63031;
            padding: 14px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            border-left: 4px solid #d63031;
        }

        .helper-text {
            font-size: 12px;
            color: #b2bec3;
            margin-top: 4px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="header">
            <h1>Please RSVP</h1>
            <p class="subtitle">We hope you can join us!</p>
            <p class="event-date">Please respond by [Event Date]</p>
        </div>

        <div class="success-message" id="successMessage">
            Thank you for your RSVP! We can't wait to see you there.
        </div>

        <div class="error-message" id="errorMessage">
            There was an issue submitting your RSVP. Please try again.
        </div>

        <form id="rsvpForm" action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-group">
                <label for="fullname" class="required">Full Name</label>
                <input type="text" id="fullname" name="fullname" required>
            </div>

            <div class="form-group">
                <label for="email" class="required">Email Address</label>
                <input type="email" id="email" name="email" required>
            </div>

            <div class="form-group">
                <label class="required">Will you attend?</label>
                <div class="radio-group">
                    <div class="radio-item">
                        <input type="radio" id="attend-yes" name="attendance" value="Yes" required>
                        <label for="attend-yes">Yes, I will attend</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="attend-no" name="attendance" value="No">
                        <label for="attend-no">No, I cannot attend</label>
                    </div>
                    <div class="radio-item">
                        <input type="radio" id="attend-maybe" name="attendance" value="Maybe">
                        <label for="attend-maybe">Maybe, I'll let you know</label>
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label for="guests" class="required">Number of Guests (including yourself)</label>
                <input type="number" id="guests" name="guests" min="1" max="10" value="1" required>
                <p class="helper-text">Including you, how many people will be attending?</p>
            </div>

            <div class="form-group">
                <label for="dietary" class="required">Dietary Restrictions</label>
                <select id="dietary" name="dietary" required>
                    <option value="">Select an option...</option>
                    <option value="None">No dietary restrictions</option>
                    <option value="Vegetarian">Vegetarian</option>
                    <option value="Vegan">Vegan</option>
                    <option value="Gluten-Free">Gluten-Free</option>
                    <option value="Other">Other (please specify below)</option>
                </select>
            </div>

            <div class="form-group">
                <label for="requests">Special Requests</label>
                <textarea id="requests" name="requests" placeholder="Let us know if you have any dietary restrictions, allergies, or other special requests..."></textarea>
            </div>

            <button type="submit">Submit RSVP</button>
        </form>
    </div>

    <script>
        const form = document.getElementById('rsvpForm');
        const successMessage = document.getElementById('successMessage');
        const errorMessage = document.getElementById('errorMessage');

        form.addEventListener('submit', function(e) {
            successMessage.style.display = 'none';
            errorMessage.style.display = 'none';

            const fullname = document.getElementById('fullname').value.trim();
            const email = document.getElementById('email').value.trim();
            const attendance = document.querySelector('input[name="attendance"]:checked');

            if (!fullname || !email || !attendance) {
                errorMessage.textContent = 'Please fill in all required fields.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }

            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            if (!emailRegex.test(email)) {
                errorMessage.textContent = 'Please enter a valid email address.';
                errorMessage.style.display = 'block';
                e.preventDefault();
                return false;
            }
        });
    </script>
</body>
</html>

How to Use This RSVP Template

Get your RSVP form online in three quick steps:

Step 1: Copy the Code

Copy the complete HTML code above and save it as rsvp.html on your computer. Test it locally to see how it looks and works before deploying to your website.

Step 2: Create a FormBackend Account

Create a free FormBackend account where you’ll manage all guest RSVPs. FormBackend provides a secure dashboard to view, organize, and export all responses.

Step 3: Update the Form ID

Replace YOUR_FORM_ID with your actual FormBackend form ID from the dashboard. Your complete action URL will look like: https://www.formbackend.com/f/xyz123abc

Your RSVP form is now live. Share the link with your guests!

RSVP Form Variations

Different events require different RSVP approaches. Here are three variations:

Variation 1: Wedding RSVP with Meal Selection

Perfect for formal weddings:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="fullname" placeholder="Full Name" required>
    <input type="email" name="email" placeholder="Email" required>

    <label>Will you attend?</label>
    <input type="radio" name="attendance" value="Yes" required> Yes
    <input type="radio" name="attendance" value="No"> No

    <label>Meal Choice</label>
    <select name="meal" required>
        <option>Select meal...</option>
        <option value="Beef">Beef</option>
        <option value="Chicken">Chicken</option>
        <option value="Fish">Fish</option>
        <option value="Vegetarian">Vegetarian</option>
    </select>

    <label>Song Request</label>
    <input type="text" name="song" placeholder="Your favorite song">

    <button type="submit">Confirm RSVP</button>
</form>

Variation 2: Birthday Party RSVP (Simple)

Casual and straightforward:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Your Name" required>
    <input type="email" name="email" placeholder="Your Email" required>

    <label>Can you make it?</label>
    <input type="radio" name="coming" value="Yes" required> Yes!
    <input type="radio" name="coming" value="No"> No
    <input type="radio" name="coming" value="Maybe"> Maybe

    <input type="number" name="guests" min="1" value="1" placeholder="Number of guests">

    <textarea name="message" placeholder="Any fun info we should know?"></textarea>

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

Variation 3: Corporate Event RSVP with Session Selection

For conferences and professional events:

<form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
    <input type="text" name="name" placeholder="Full Name" required>
    <input type="email" name="email" placeholder="Email" required>
    <input type="text" name="company" placeholder="Company">

    <label>Will you attend?</label>
    <input type="radio" name="attending" value="Yes" required> Yes
    <input type="radio" name="attending" value="No"> No

    <label>Which session are you most interested in?</label>
    <select name="session" required>
        <option>Select session...</option>
        <option value="Keynote">Opening Keynote</option>
        <option value="Workshop A">Workshop A</option>
        <option value="Workshop B">Workshop B</option>
        <option value="Panel">Panel Discussion</option>
    </select>

    <label>Dietary needs</label>
    <input type="text" name="dietary" placeholder="Vegetarian, gluten-free, etc.">

    <button type="submit">Confirm Attendance</button>
</form>

How to Customize Your RSVP Form

Tailor this template to your specific event:

Change the header: Update “Please RSVP” and the subtitle to match your event. Add the actual event date and location.

Adjust guest limits: Modify the max="10" attribute on the number input to change the maximum guest limit.

Update dietary options: Edit the <option> values in the dietary restrictions dropdown to match what you’re serving.

Add new fields: Need to collect phone numbers, addresses, or song requests? Add new form groups following the same structure.

Customize colors: The form uses red (#d63031) as the primary color. Change this throughout the CSS to match your event theme.

Remove fields you don’t need: If you don’t need dietary restrictions or special requests, simply delete those form groups.

Add more details to the header: Include the event date, time, location, and dress code in the header section.

Managing RSVPs with FormBackend

FormBackend makes organizing guest responses simple:

  • Central dashboard: View all RSVPs in one organized interface
  • Export to spreadsheet: Download guest lists as CSV to manage details
  • Email notifications: Receive alerts when new RSVPs come in
  • Track attendance: See at a glance who has and hasn’t responded
  • Filter responses: Sort by attendance status, dietary needs, or other criteria
  • Send reminders: Use FormBackend’s email features to remind guests to RSVP

Frequently Asked Questions

Is this RSVP form template really free? Yes, the template is completely free to use. FormBackend offers a free tier with enough responses for most events. Additional features are available in paid plans.

Can I set a deadline for RSVPs? While the form itself doesn’t enforce a deadline, you can add the RSVP date to the header text. You can also manually close the form in your FormBackend dashboard after the deadline passes.

How do I track who has responded and who hasn’t? FormBackend’s dashboard shows all submissions with timestamps. You can export the data to a spreadsheet and cross-reference it with your original guest list.

Can guests update their RSVP if they change their mind? Yes. You can share the form link again, and FormBackend can be configured to allow updates. Alternatively, guests can email you with changes, and you can manually update their response.

How do I collect payment or ticket information? This form collects RSVPs and dietary information only. For payments, you’d need to integrate with a payment processor separately or use a different form service. FormBackend supports webhooks if you want to connect to payment systems.

Can I add a plus-one field? Yes, you can modify the “Number of Guests” field to ask specifically about plus-ones, or add a separate checkbox asking “Do you have a guest?” with a name field below it.

Is the data secure? FormBackend uses encryption and secure storage for all submissions. You can review their security documentation for specific details about data protection and compliance.

More form templates

Looking for a different form type? Browse our full collection of free HTML form templates, or try one of these:

Need a custom form? Use our HTML form generator to build one visually.