Event registration form template

Free event registration form
template, HTML and React.

An online registration form for workshops, meetups and launches. Attendees pick a ticket type, say how many people they are bringing and flag dietary requirements, and each registration is emailed to you.

Use this template Preview the template

250 submissions/month free. No credit card required.

Preview, restyle and copy the code.

Preview only. Nothing is sent from this page.

Your event registration form, ready to make your own.

The code includes the fields, the CSS for the style you chose and a hidden anti-spam field. Replace the placeholder endpoint with your own before publishing, or open it in the designer to change fields, colors and wording without touching code.

Customize in Form Koi

event-registration-form.html

<style>
.formkoi-form, .formkoi-form * { box-sizing: border-box; }
.formkoi-form { width: 100%; max-width: 560px; padding: clamp(20px, 5vw, 36px); background: #f6f7fb; color: #2b2d42; font: 16px/1.5 system-ui, sans-serif; border: 1px solid #2b2d4230; border-radius: 14px; }
.formkoi-form h2 { margin: 0 0 8px; font: inherit; font-size: 28px; font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
.formkoi-form > p { margin: 0 0 18px; overflow-wrap: anywhere; }
.formkoi-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
.formkoi-field { grid-column: 1 / -1; display: grid; gap: 6px; min-width: 0; }
.formkoi-field--half { grid-column: span 1; }
.formkoi-fields label, .formkoi-fields legend { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.formkoi-fields input:not([type=checkbox]):not([type=radio]):not([hidden]), .formkoi-fields textarea, .formkoi-fields select { display: block; width: 100%; min-width: 0; padding: 12px; border: 1px solid transparent; border-radius: 14px; background: #2b2d4212; color: #2b2d42; font: inherit; }
.formkoi-fields select { appearance: auto; }
.formkoi-fields textarea { min-height: 120px; resize: vertical; }
.formkoi-fields input::placeholder, .formkoi-fields textarea::placeholder { color: #2b2d4280; }
.formkoi-fields input[type=file] { padding: 10px; }
.formkoi-choices { margin: 0; padding: 0; border: 0; min-width: 0; }
.formkoi-choices legend { padding: 0; margin-bottom: 6px; }
.formkoi-choices label, .formkoi-check { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; cursor: pointer; }
.formkoi-choices label + label { margin-top: 8px; }
.formkoi-choices input, .formkoi-check input { width: 18px; height: 18px; margin: 3px 0 0; flex: none; accent-color: #4f46e5; }
.formkoi-help { margin: 0; font-size: 13px; opacity: .75; overflow-wrap: anywhere; }
.formkoi-fields .cf-turnstile { grid-column: 1 / -1; }
.formkoi-fields button { grid-column: 1 / -1; justify-self: start; margin-top: 10px; padding: 12px 22px; border: 0; border-radius: 14px; background: #4f46e5; color: #ffffff; font: inherit; font-weight: 600; cursor: pointer; overflow-wrap: anywhere; max-width: 100%; }
.formkoi-fields button:hover { filter: brightness(.94); }
.formkoi-fields :focus-visible { outline: 2px solid #4f46e5; outline-offset: 3px; }
@media (max-width: 480px) { .formkoi-field--half { grid-column: 1 / -1; } }
</style>
<section class="formkoi-form" aria-label="Save your seat.">
<h2>Save your seat.</h2>
<p>Registration takes a minute. We’ll confirm by email.</p>
<form class="formkoi-fields" action="https://api.formkoi.com/f/YOUR_PUBLIC_FORM_KEY" method="POST">
  <div class="formkoi-field formkoi-field--half">
  <label for="name">Your name</label>
  <input id="name" name="name" autocomplete="name" required>
  </div>
  <div class="formkoi-field formkoi-field--half">
  <label for="email">Email address</label>
  <input id="email" name="email" type="email" autocomplete="email" required>
  </div>
  <fieldset class="formkoi-field formkoi-choices">
    <legend>Ticket type</legend>
    <label><input type="radio" name="ticket_type" value="General admission" required> General admission</label>
    <label><input type="radio" name="ticket_type" value="Student" required> Student</label>
    <label><input type="radio" name="ticket_type" value="Speaker" required> Speaker</label>
  </fieldset>
  <div class="formkoi-field formkoi-field--half">
  <label for="guests">Number of guests</label>
  <input id="guests" name="guests" type="number" placeholder="1" required>
  </div>
  <fieldset class="formkoi-field formkoi-choices">
    <legend>Dietary requirements</legend>
    <label><input type="checkbox" name="dietary_requirements" value="Vegetarian"> Vegetarian</label>
    <label><input type="checkbox" name="dietary_requirements" value="Vegan"> Vegan</label>
    <label><input type="checkbox" name="dietary_requirements" value="Gluten free"> Gluten free</label>
    <label><input type="checkbox" name="dietary_requirements" value="Nut allergy"> Nut allergy</label>
  </fieldset>
  <div class="formkoi-field">
  <label for="message">Anything else?</label>
  <textarea id="message" name="message"></textarea>
  </div>

  <!-- Leave this hidden anti-spam field empty. -->
  <input type="text" name="botcheck"
    tabindex="-1" autocomplete="off" style="display:none" hidden>

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

New to connecting a form? The HTML contact form guide and the React contact form guide walk through pointing any of these templates at your endpoint.

Fields in this event registration form.

Ticket type as multiple choice keeps the options visible. Dietary needs are checkboxes because more than one can apply.

Label	Field name	Type	Required
Your name	`name`	Short text	Yes
Email address	`email`	Email	Yes
Ticket type	`ticket_type`	Multiple choice: General admission, Student, Speaker	Yes
Number of guests	`guests`	Number	Yes
Dietary requirements	`dietary_requirements`	Checkboxes: Vegetarian, Vegan, Gluten free, Nut allergy	No
Anything else?	`message`	Long text	No

Field names are what arrive with each message and what routing rules match on. The email field is used for replies and auto-replies.

Make it yours in minutes.

Change fields without code

Open the template in the visual designer to add, remove or reorder fields, switch input types, and set labels, placeholders and help text.

Explore

Match your website

Pick a style preset, then adjust colors, typography, corners and spacing. Copy fresh HTML or a React component whenever you change it.

Connect one endpoint

Create a form, verify a recipient, and paste the code. Submissions land in your inbox with spam review, routing and delivery tracking.

Explore

Related templates.

Frequently asked questions

Event registration form
questions.

Does this sell tickets?

No. It collects registrations. Take payment in your usual tool and use this form for free events or waitlists.

Can attendees get a confirmation email?

Yes. Turn on Turnstile and auto-replies for the form, then add an unchecked consent checkbox. Only attendees who tick it receive the confirmation.

How do I export registrations?

Read submissions with the management API or forward each one to your tools with a signed webhook.

Start with Form Koi Free

Start receiving
form submissions.

Use this template Read the quickstart

Free event registration formtemplate, HTML and React.