Registration form template

    Personal details, address, the course or programme, and agreement to the terms.

    Reviewed by Ritu Fadadu · Last reviewed

    Customize in the generatorGet a free endpoint

    Preview and code

    Preview

    Code — replace YOUR_ENDPOINT_ID with your form's ID

    <style>
  .fb-form { display: grid; gap: 1rem; max-width: 36rem; }
  .fb-field { display: flex; flex-direction: column; gap: 0.375rem; }
  .fb-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
  .fb-label { font-weight: 600; }
  .fb-optional { font-weight: 400; color: #6b7280; }
  .fb-help { margin: 0; font-size: 0.875rem; color: #6b7280; }
  .fb-input { box-sizing: border-box; width: 100%; padding: 0.625rem 0.75rem; border: 1px solid #d1d5db; border-radius: 0.5rem; background: #fff; color: #111827; font: inherit; }
  .fb-input:focus { border-color: #2563eb; outline: 2px solid #2563eb; outline-offset: 1px; }
  .fb-options { display: flex; flex-direction: column; gap: 0.5rem; }
  .fb-option { display: flex; align-items: center; gap: 0.5rem; }
  .fb-check { width: 1.125rem; height: 1.125rem; margin: 0; accent-color: #2563eb; }
  .fb-button { justify-self: start; min-height: 44px; padding: 0.625rem 1.25rem; border: 0; border-radius: 0.5rem; background: #2563eb; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
  .fb-button:hover { background: #1d4ed8; }
  .fb-button:focus-visible { outline: 2px solid #2563eb; outline-offset: 2px; }
  .fb-button:disabled { opacity: 0.6; cursor: wait; }
  .fb-status { margin: 0; min-height: 1.5em; }
  @media (min-width: 640px) {
    .fb-form { grid-template-columns: 1fr 1fr; }
    .fb-field, .fb-button, .fb-status { grid-column: 1 / -1; }
    .fb-field--half { grid-column: auto; }
  }
</style>

<form id="fb-form" class="fb-form" action="https://formboost.app/f/YOUR_ENDPOINT_ID" method="POST">
  <div class="fb-field fb-field--half">
    <label for="fb-first_name" class="fb-label">First name</label>
    <input
      type="text"
      id="fb-first_name"
      name="first_name"
      class="fb-input"
      required
      autocomplete="given-name"
    >
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-last_name" class="fb-label">Last name</label>
    <input
      type="text"
      id="fb-last_name"
      name="last_name"
      class="fb-input"
      required
      autocomplete="family-name"
    >
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-email" class="fb-label">Email</label>
    <input type="email" id="fb-email" name="email" class="fb-input" required autocomplete="email">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-phone" class="fb-label">Phone <span class="fb-optional">(optional)</span></label>
    <input type="tel" id="fb-phone" name="phone" class="fb-input" autocomplete="tel">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-date_of_birth" class="fb-label">
      Date of birth
      <span class="fb-optional">(optional)</span>
    </label>
    <input
      type="date"
      id="fb-date_of_birth"
      name="date_of_birth"
      class="fb-input"
      autocomplete="bday"
    >
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-programme" class="fb-label">Course or programme</label>
    <select id="fb-programme" name="programme" class="fb-input" required>
      <option value="">Choose…</option>
      <option value="beginner-course">Beginner course</option>
      <option value="intermediate-course">Intermediate course</option>
      <option value="advanced-course">Advanced course</option>
    </select>
  </div>
  <div class="fb-field">
    <label for="fb-street" class="fb-label">
      Street address
      <span class="fb-optional">(optional)</span>
    </label>
    <input type="text" id="fb-street" name="street" class="fb-input" autocomplete="street-address">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-city" class="fb-label">
      Town or city
      <span class="fb-optional">(optional)</span>
    </label>
    <input type="text" id="fb-city" name="city" class="fb-input" autocomplete="address-level2">
  </div>
  <div class="fb-field fb-field--half">
    <label for="fb-postcode" class="fb-label">
      Postcode
      <span class="fb-optional">(optional)</span>
    </label>
    <input type="text" id="fb-postcode" name="postcode" class="fb-input" autocomplete="postal-code">
  </div>
  <div class="fb-field">
    <label for="fb-heard_from" class="fb-label">
      How did you hear about us?
      <span class="fb-optional">(optional)</span>
    </label>
    <select id="fb-heard_from" name="heard_from" class="fb-input">
      <option value="">Choose…</option>
      <option value="search">Search</option>
      <option value="friend-or-colleague">Friend or colleague</option>
      <option value="social-media">Social media</option>
      <option value="other">Other</option>
    </select>
  </div>
  <div class="fb-field">
    <label class="fb-option">
      <input type="checkbox" id="fb-terms" name="terms" value="yes" class="fb-check" required>
      <span>I agree to the terms and conditions</span>
    </label>
  </div>
  <!-- Honeypot: keep it hidden. People never see it; bots fill it in and get flagged as spam. -->
  <div
    aria-hidden="true"
    style="position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden"
  >
    <label for="fb-honey">Leave this field empty</label>
    <input type="text" id="fb-honey" name="_honey" tabindex="-1" autocomplete="off">
  </div>
  <input type="hidden" name="_subject" value="New registration">
  <button type="submit" class="fb-button">Register</button>
</form>

    About this template

    This is the registration form for enrolling in something — a course, a club, a class, a programme: name, contact details, date of birth, address and which option they are signing up for, with a required agreement to your terms.

    There is deliberately no password field. A form that creates an account belongs to your application's own sign-up, where the password is hashed and never leaves your system. Sending a password to a form backend would store it as plain text in a submission and an email — exactly where a password should never be.

    Name is split into first and last because registration lists are usually sorted by surname. The address is three short fields rather than one box, so it imports cleanly into whatever you use next.

    Fields in this template

    FieldNameTypeRequiredWhy it is there
    First namefirst_nameShort textYesRequired, with the given-name autofill hint.
    Last namelast_nameShort textYesRequired, so lists can be sorted by surname.
    EmailemailEmailYesRequired. Named email for Auto Reply confirmations.
    PhonephonePhoneNoOptional.
    Date of birthdate_of_birthDateNoOptional; keep it only if age matters for the programme.
    Course or programmeprogrammeDropdownYesRequired dropdown of what they are enrolling in.
    Street addressstreetShort textNoOptional address line, autofilled.
    Town or citycityShort textNoOptional, autofilled.
    PostcodepostcodeShort textNoOptional, autofilled.
    How did you hear about us?heard_fromDropdownNoOptional marketing question.
    I agree to the terms and conditionstermsCheckboxYesRequired agreement. Link the words to your terms page.

    Each name becomes a column in your dashboard and a row in the notification email. The hidden _honey field is the honeypot; _subject sets the email's subject line. Both are reserved fields and never appear in the field table.

    Make it yours

    • Remove date of birth and address if you do not need them — collect only what the programme requires.
    • Wrap “terms and conditions” in a link to your terms page in the copied code.
    • Add an emergency_contact field for in-person activities with children or physical risk.
    • If places are limited, say so above the form and confirm each registration by reply rather than promising a place on the thank-you page — the form does not count places.

    Where the submissions go

    • Registrations are stored and emailed to you; export the class list to CSV on every plan.
    • On Starter and above, send each registration to Google Sheets for a roster that updates itself.
    • Confirm each registration automatically with Auto Reply on Starter and above.

    Event Registration: plans, destinations and a worked setup →

    Before you publish it

    1. Create a form in the Formboost dashboard and replace YOUR_ENDPOINT_ID with its ID.
    2. Pick one variant: HTML posts and reloads, HTML + JS and React send JSON with fetch() and stay on the page.
    3. For the plain HTML version, add a hidden _redirect with an https:// thank-you page on the same site as the form — anything else falls back to Formboost's page.
    4. Submit it once from the live page and check the submission in your dashboard. Every request is acknowledged, so the dashboard is the real test. Troubleshooting covers the rest.

    More form templates

    Put the registration form live

    Free forever: 500 submissions a month across 10 forms, no card.

    Get a free endpointOpen the form generator