Event Registration Form Template

Manage your event signups effortlessly with this clear and structured registration form.

This template is designed for conferences, workshops, or any event, providing an easy way to collect attendee information, ticket choices, and special requests.

Screenshot of an event registration form with fields for attendee info, ticket type, and session checkboxes.

Get Source Code → Preview →

About this Event Registration Form

A successful event starts with a smooth registration process. This form template provides a comprehensive starting point, organized logically with fieldset elements to guide the user. It showcases a variety of essential form controls:

A select dropdown for choosing a ticket type.
An input type="number" for specifying the quantity of tickets.
A group of input type="checkbox" elements to allow users to sign up for specific workshops or sessions.
A textarea for dietary or accessibility requirements.

The design is clean and responsive, ensuring a great experience for users registering from any device.

Features

Logical Grouping: Uses fieldsets to create a clear, multi-section form that's easy to digest.
Variety of Inputs: Demonstrates text, email, number, select, checkbox, and textarea fields in a real-world context.
User-Friendly Layout: A clean, single-column design that is easy to follow and accessible.
Clear Call-to-Action: A large, prominent button encourages completion of the registration.

Dependencies

None. This template uses only pure HTML and CSS.

Code

Here's the full code for the event registration form:

.event-reg-container fieldset {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 20px;
    margin-bottom: 20px;
}
.event-reg-container legend {
    padding: 0 10px;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
}
.form-group { margin-bottom: 15px; }
.form-group label { display: block; margin-bottom: 5px; font-weight: 500; }
.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 1rem;
    box-sizing: border-box;
}
.form-group textarea { height: 80px; resize: vertical; }

.checkbox-group .checkbox-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.checkbox-group .checkbox-option input {
    width: auto;
    margin-right: 12px;
}
.checkbox-group .checkbox-option label {
    margin: 0;
    font-weight: normal;
}
.submit-btn {
    display: block;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 5px;
    background-color: #e67e22;
    color: white;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.submit-btn:hover { background-color: #d35400; }
</style>

<div class="event-reg-container">
    <div class="form-header">
        <h2>Annual Tech Conference 2024 Registration</h2>
    </div>
    <form action="#" method="post">
        <fieldset>
            <legend>Your Information</legend>
            <div class="form-group">
                <label for="name">Full Name</label>
                <input type="text" id="name" name="name" required>
            </div>
            <div class="form-group">
                <label for="email">Email</label>
                <input type="email" id="email" name="email" required>
            </div>
        </fieldset>

<fieldset>
            <legend>Ticket Information</legend>
            <div class="form-group">
                <label for="ticket-type">Ticket Type</label>
                <select id="ticket-type" name="ticket_type" required>
                    <option value="general">General Admission - $99</option>
                    <option value="vip">VIP Pass - $199</option>
                    <option value="student">Student Pass - $49</option>
                </select>
            </div>
             <div class="form-group">
                <label for="quantity">Quantity</label>
                <input type="number" id="quantity" name="quantity" min="1" max="10" value="1" required>
            </div>
        </fieldset>

<fieldset>
            <legend>Workshop Selection (Optional)</legend>
            <div class="checkbox-group">
                <div class="checkbox-option">
                    <input type="checkbox" id="workshop-js" name="workshops[]" value="js">
                    <label for="workshop-js">Advanced JavaScript</label>
                </div>
                 <div class="checkbox-option">
                    <input type="checkbox" id="workshop-css" name="workshops[]" value="css">
                    <label for="workshop-css">Modern CSS Layouts</label>
                </div>
                 <div class="checkbox-option">
                    <input type="checkbox" id="workshop-ux" name="workshops[]" value="ux">
                    <label for="workshop-ux">UX Design Principles</label>
                </div>
            </div>
        </fieldset>

<fieldset>
            <legend>Special Requirements</legend>
            <div class="form-group">
                 <label for="requirements">Dietary Restrictions or Accessibility Needs</label>
                 <textarea id="requirements" name="requirements" placeholder="Let us know how we can accommodate you..."></textarea>
            </div>
        </fieldset>
        
        <button type="submit" class="submit-btn">Register Now</button>
    </form>
</div>

View Output