Registration form HTML template

A registration form for events, courses and workshops — who’s coming, which option they’re registering for, and anything you need to know before the day. The dropdown keeps registrations unambiguous.

The form

The HTML

<style>
  .hf-form { display: grid; gap: 0.75rem; max-width: 28rem; font-family: system-ui, sans-serif; }
  .hf-form label { font-weight: 600; font-size: 0.9rem; }
  .hf-form input, .hf-form textarea, .hf-form select {
    width: 100%; padding: 0.5rem 0.6rem; font: inherit;
    border: 1px solid #ccc; border-radius: 6px; box-sizing: border-box;
  }
  .hf-form button {
    justify-self: start; padding: 0.55rem 1.4rem; font: inherit; font-weight: 600;
    background: #0b6e4f; color: #fff; border: none; border-radius: 6px; cursor: pointer;
  }
  .hf-hp { position: absolute; left: -9999px; }
</style>

<form class="hf-form" action="https://example.com/your-endpoint" method="POST">
  <label for="full-name">Full name</label>
  <input type="text" id="full-name" name="full-name" required>
  <label for="email">Email</label>
  <input type="email" id="email" name="email" required>
  <label for="phone">Phone</label>
  <input type="tel" id="phone" name="phone">
  <label for="ticket-type">Ticket type</label>
  <select id="ticket-type" name="ticket-type" required>
    <option>Standard</option>
    <option>Student</option>
    <option>Member</option>
  </select>
  <label for="dietary-requirements-or-notes">Dietary requirements or notes</label>
  <textarea id="dietary-requirements-or-notes" name="dietary-requirements-or-notes" rows="5"></textarea>
  <!-- honeypot: humans never see this; bots fill it in. Drop submissions where it has a value. -->
  <input class="hf-hp" type="text" name="website" tabindex="-1" autocomplete="off" aria-hidden="true">
  <button type="submit">Register</button>
</form>

Fields in this template

• Full name — text, required
• Email — email, required
• Phone — phone number, optional
• Ticket type — dropdown (Standard, Student, Member), required
• Dietary requirements or notes — multi-line text, optional

Tips for a registration form that works

• Put a registration deadline and the price of each ticket type in visible text next to the form — not only in the confirmation email.
• If capacity is limited, say what happens when it’s full (waitlist? closed?) so late registrants aren’t left guessing.
• Ask only for what the event actually needs — dietary requirements for a dinner, nothing medical for a webinar.

Questions

Can the form limit the number of registrations?

Not by itself — a static form has no counter. Capacity limits live at your endpoint: stop accepting submissions, or swap the page for a waitlist form when you’re full.

How do attendees pay?

Handle payment after registration: send a payment link or invoice in your confirmation email. Keep the form itself free of payment details.

From the same maker

Need more than a form?

Tentmaker Stores gives you a complete online store — product pages, checkout and everything in between. Built for small makers and niche sellers.