Free Registration Form Template — Ready-to-Use HTML Code

A registration form is the backbone of event management, whether you’re hosting a conference, workshop, webinar, or any gathering. This free HTML template provides a professional, fully-functional registration form you can copy and deploy immediately. It includes all the essential fields for collecting attendee information—name, contact details, event selection, dietary requirements, and special accommodations—with mobile-responsive design and modern styling.

Complete Registration Form Template

Here’s the complete, production-ready registration form. Copy all the code and save it as an HTML file:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Registration</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, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            padding: 40px 20px;
        }

        .container {
            max-width: 650px;
            margin: 0 auto;
            background: white;
            padding: 45px;
            border-radius: 12px;
            box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
        }

        h1 {
            color: #1a1a1a;
            margin-bottom: 8px;
            font-size: 30px;
        }

        .subtitle {
            color: #666;
            margin-bottom: 32px;
            font-size: 15px;
            line-height: 1.5;
        }

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

        label {
            display: block;
            margin-bottom: 8px;
            color: #333;
            font-weight: 500;
            font-size: 14px;
        }

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        select,
        textarea {
            width: 100%;
            padding: 12px 16px;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            font-family: inherit;
            transition: all 0.3s ease;
        }

        input[type="text"]:focus,
        input[type="email"]:focus,
        input[type="tel"]:focus,
        input[type="number"]:focus,
        select:focus,
        textarea:focus {
            outline: none;
            border-color: #667eea;
            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
        }

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

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

        @media (max-width: 600px) {
            .form-row {
                grid-template-columns: 1fr;
            }

            .container {
                padding: 30px 20px;
            }
        }

        .required {
            color: #e74c3c;
        }

        .checkbox-group {
            display: flex;
            align-items: center;
            gap: 10px;
            margin-bottom: 12px;
        }

        input[type="checkbox"],
        input[type="radio"] {
            width: 18px;
            height: 18px;
            cursor: pointer;
            accent-color: #667eea;
        }

        .checkbox-label {
            margin: 0;
            font-weight: 400;
            cursor: pointer;
        }

        .optional {
            color: #999;
            font-size: 13px;
            font-weight: 400;
        }

        button {
            width: 100%;
            padding: 14px;
            background: #667eea;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        button:hover {
            background: #5568d3;
            box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
        }

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

        .success-message {
            display: none;
            background: #d4edda;
            border: 1px solid #c3e6cb;
            color: #155724;
            padding: 16px;
            border-radius: 8px;
            margin-bottom: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>Event Registration</h1>
        <p class="subtitle">Join us for this exciting event. Fill out the form below to secure your spot.</p>

        <div class="success-message" id="successMessage">
            Thank you for registering! We'll send you confirmation details soon.
        </div>

        <form action="https://www.formbackend.com/f/YOUR_FORM_ID" method="POST">
            <div class="form-row">
                <div class="form-group">
                    <label for="fullName">Full Name <span class="required">*</span></label>
                    <input type="text" id="fullName" name="fullName" required>
                </div>
                <div class="form-group">
                    <label for="email">Email Address <span class="required">*</span></label>
                    <input type="email" id="email" name="email" required>
                </div>
            </div>

            <div class="form-row">
                <div class="form-group">
                    <label for="phone">Phone Number <span class="required">*</span></label>
                    <input type="tel" id="phone" name="phone" required>
                </div>
                <div class="form-group">
                    <label for="organization">Organization/Company <span class="optional">(Optional)</span></label>
                    <input type="text" id="organization" name="organization">
                </div>
            </div>

            <div class="form-group">
                <label for="event">Event/Program <span class="required">*</span></label>
                <select id="event" name="event" required>
                    <option value="">Select an event</option>
                    <option value="Annual Conference 2026">Annual Conference 2026</option>
                    <option value="Spring Workshop Series">Spring Workshop Series</option>
                    <option value="Networking Breakfast">Networking Breakfast</option>
                    <option value="Professional Development Seminar">Professional Development Seminar</option>
                    <option value="Virtual Webinar">Virtual Webinar</option>
                </select>
            </div>

            <div class="form-group">
                <label for="dietary">Dietary Requirements <span class="required">*</span></label>
                <select id="dietary" name="dietary" required>
                    <option value="">Select dietary needs</option>
                    <option value="No restrictions">No restrictions</option>
                    <option value="Vegetarian">Vegetarian</option>
                    <option value="Vegan">Vegan</option>
                    <option value="Gluten-free">Gluten-free</option>
                    <option value="Halal">Halal</option>
                    <option value="Kosher">Kosher</option>
                    <option value="Other">Other</option>
                </select>
            </div>

            <div class="form-group">
                <label for="accommodations">Special Accommodations <span class="optional">(Optional)</span></label>
                <textarea id="accommodations" name="accommodations" placeholder="Please let us know if you need any special accommodations or have any questions..."></textarea>
            </div>

            <button type="submit">Complete Registration</button>
        </form>
    </div>

    <script>
        document.querySelector('form').addEventListener('submit', function(e) {
            e.preventDefault();
            const formData = new FormData(this);

            fetch(this.action, {
                method: this.method,
                body: formData
            }).then(response => {
                if (response.ok) {
                    document.getElementById('successMessage').style.display = 'block';
                    this.reset();
                    window.scrollTo({ top: 0, behavior: 'smooth' });
                }
            }).catch(error => console.error('Error:', error));
        });
    </script>
</body>
</html>

How to Use This Template

Getting your event registration live requires just three straightforward steps:

Step 1: Copy the Code Select all the HTML code above and paste it into a new text file. Save it with a .html extension (such as registration-form.html). Open the file in your browser to preview how it looks.

Step 2: Create a FormBackend Account Visit FormBackend.com and create a free account. This service automatically captures all registrations and emails them to you. Once you create a form in FormBackend, you’ll receive a unique form ID.

Step 3: Update Your Form Action Replace YOUR_FORM_ID in the code with your actual FormBackend ID from step 2. Your action URL should look like https://www.formbackend.com/f/xyz789abc123. Save the file, then test it by submitting a registration.

Template Variations

Simple Event Registration

Minimal fields for quick registrations:

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

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

    <div class="form-group">
        <label for="event">Which event are you attending? <span class="required">*</span></label>
        <select id="event" name="event" required>
            <option value="">Select event</option>
            <option value="Event 1">Event 1</option>
            <option value="Event 2">Event 2</option>
        </select>
    </div>

    <button type="submit">Register Now</button>
</form>

Workshop Registration with Session Selection

Perfect for multi-track workshops:

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

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

    <div class="form-group">
        <label>Select Sessions <span class="required">*</span></label>
        <div class="checkbox-group">
            <input type="checkbox" id="session1" name="sessions" value="Morning Keynote">
            <label for="session1" class="checkbox-label">Morning Keynote (9:00 AM)</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="session2" name="sessions" value="Breakout Session A">
            <label for="session2" class="checkbox-label">Breakout Session A (10:30 AM)</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="session3" name="sessions" value="Breakout Session B">
            <label for="session3" class="checkbox-label">Breakout Session B (10:30 AM)</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="session4" name="sessions" value="Networking Lunch">
            <label for="session4" class="checkbox-label">Networking Lunch (12:00 PM)</label>
        </div>
    </div>

    <div class="form-group">
        <label for="dietary">Dietary Needs</label>
        <select id="dietary" name="dietary">
            <option value="">No restrictions</option>
            <option value="Vegetarian">Vegetarian</option>
            <option value="Vegan">Vegan</option>
            <option value="Gluten-free">Gluten-free</option>
        </select>
    </div>

    <button type="submit">Register for Workshop</button>
</form>

Conference Registration with Multi-Day Checkboxes

For larger events spanning multiple days:

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

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

    <div class="form-group">
        <label>Days Attending <span class="required">*</span></label>
        <div class="checkbox-group">
            <input type="checkbox" id="day1" name="days" value="Day 1 - May 15">
            <label for="day1" class="checkbox-label">Day 1 - May 15</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="day2" name="days" value="Day 2 - May 16">
            <label for="day2" class="checkbox-label">Day 2 - May 16</label>
        </div>
        <div class="checkbox-group">
            <input type="checkbox" id="day3" name="days" value="Day 3 - May 17">
            <label for="day3" class="checkbox-label">Day 3 - May 17</label>
        </div>
    </div>

    <div class="form-group">
        <label for="company">Company <span class="required">*</span></label>
        <input type="text" id="company" name="company" required>
    </div>

    <div class="form-group">
        <label for="dietary">Meal Preferences <span class="required">*</span></label>
        <select id="dietary" name="dietary" required>
            <option value="">Select preference</option>
            <option value="Standard">Standard</option>
            <option value="Vegetarian">Vegetarian</option>
            <option value="Vegan">Vegan</option>
            <option value="Gluten-free">Gluten-free</option>
        </select>
    </div>

    <button type="submit">Register for Conference</button>
</form>

How to Customize This Template

Change the Color Scheme The template uses purple as the primary color. To change it, find all instances of #667eea in the CSS and replace with your brand color. Update the hover state color (#5568d3) to a darker shade of your chosen color.

Modify Event Options Edit the <option> tags in the event dropdown to match your actual events. You can add, remove, or change event names as needed.

Add or Remove Fields Each field is wrapped in <div class="form-group">. To add a field, duplicate a group and change the id, name, and label. To remove a field, delete the entire group.

Customize Dietary Options The dietary requirements dropdown is fully editable. Replace the options with your venue’s actual dietary accommodations or add custom fields for allergy information.

Enable Multiple Sessions If attendees can select multiple sessions, use checkboxes (like in the workshop variation) instead of a single select dropdown.

FAQ

Is this registration form template free? Absolutely. The HTML template is completely free to use on your website. FormBackend, which handles the form submissions, offers a free tier with up to 50 submissions per month. Paid plans unlock higher limits and advanced features.

Can I limit the number of registrations? The form itself doesn’t enforce registration caps, but FormBackend’s paid plans include custom features. You can also implement JavaScript validation to close registration after reaching a limit. Check our documentation on advanced features for implementation details.

How do I add a waitlist option? Add a question like “What would you like to do if the event is full?” with radio button options for “Attend in person” and “Add me to the waitlist.” When you receive registrations, you can manually manage the waitlist or use FormBackend’s automation features with a paid plan.

Does this work for paid events or ticketed registrations? This form collects registration information but doesn’t process payments directly. You can integrate payment processing with Stripe or PayPal by adding payment buttons to the form, or use a third-party ticketing platform. See our guides for integration examples.

Next Steps

Customize this template with your event details and branding, then publish it on your website or event page. For more advanced registration features like confirmation emails and attendee management, explore our contact form generator and documentation.

More form templates

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

RSVP Form Template — Event attendance with dietary needs and guest counts
Contact Form Template — Collect name, email, and messages from website visitors
Application Form Template — Job applications and program enrollments
Survey Form Template — Multiple choice, rating scales, and open-ended questions
Newsletter Signup Template — Grow your email list with lightweight signup forms

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