Form Library Registration Forms Event Registration Form

Event Registration Form

Use this minimal HTML event registration form on your website to enable attendees to sign up for your event in seconds, keeping things organized and accessible.
Preview Preview
Code Code 
        

          HTML HTML
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form fs-layout__2-column"
  target="_top"
  method="POST"
>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="first-name">First Name</label>
      <input class="fs-input" id="first-name" name="first-name" required />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="last-name">Last Name</label>
      <input class="fs-input" id="last-name" name="last-name" required />
      <p class="fs-description">
        We&#x27;ll use this to generate your event pass.
      </p>
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="email">Email</label>
      <input class="fs-input" id="email" name="email" required />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="number">Contact Number</label>
      <input
        class="fs-input"
        id="number"
        name="number"
        placeholder="(000) 000-0000"
        required
      />
    </div>
  </fieldset>
  <div class="fs-field">
    <label class="fs-label" for="address">Address (optional)</label>
    <textarea class="fs-textarea" id="address" name="address"></textarea>
  </div>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label">
        Please check the dates you would be attending
      </label>
      <div class="fs-checkbox-group">
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="dates-day-1"
              name="dates"
              required
              type="checkbox"
              value="day-1"
            />
          </div>
          <div>
            <label class="fs-label" for="dates-day-1">Day 1</label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="dates-day-2"
              name="dates"
              required
              type="checkbox"
              value="day-2"
            />
          </div>
          <div>
            <label class="fs-label" for="dates-day-2">Day 2</label>
          </div>
        </div>
        <div class="fs-checkbox-field">
          <div class="fs-checkbox-wrapper">
            <input
              class="fs-checkbox"
              id="dates-day-3"
              name="dates"
              required
              type="checkbox"
              value="day-3"
            />
          </div>
          <div>
            <label class="fs-label" for="dates-day-3">Day 3</label>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="dates">
        Please select your t-shirt size
      </label>
      <select class="fs-select" id="dates" name="dates">
        <option value="s">S</option>
        <option value="m">M</option>
        <option value="l">L</option>
        <option value="xl">XL</option>
      </select>
    </div>
  </fieldset>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/** Variables **/

:root {
  --color-background: #cbd5e1;
  --color-background-alt: #3a9092;
  --color-border-active: #23494c;
  --color-border-default: #94a3b8;
  --color-highlight: #7ecac7;
  --color-primary: #23494c;
  --color-primary-active: #122d30;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Inter", sans-serif;
}

/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 0.75rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 1rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 3px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.25rem;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.125rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-primary);
  height: 1rem;
  width: 1rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 1.5rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.75rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

        
        Show more
      
        

          HTML HTML/Tailwind
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="grid grid-cols-2 gap-x-3 gap-y-4"
  target="_top"
  method="POST"
>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="first-name"
      >
        First Name
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="first-name"
        name="first-name"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="last-name"
      >
        Last Name
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="last-name"
        name="last-name"
        required
      />
      <p class="block text-sm text-[--color-text-muted]">
        We&#x27;ll use this to generate your event pass.
      </p>
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="email"
      >
        Email
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="email"
        name="email"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="number"
      >
        Contact Number
      </label>
      <input
        class="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="number"
        name="number"
        placeholder="(000) 000-0000"
        required
      />
    </div>
  </fieldset>
  <div class="flex flex-col gap-y-1.5">
    <label
      class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
      for="address"
    >
      Address (optional)
    </label>
    <textarea
      class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
      id="address"
      name="address"
    ></textarea>
  </div>
  <fieldset>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
      >
        Please check the dates you would be attending
      </label>
      <div class="flex flex-col gap-y-2">
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="dates-day-1"
              name="dates"
              required
              type="checkbox"
              value="day-1"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="dates-day-1"
            >
              Day 1
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="dates-day-2"
              name="dates"
              required
              type="checkbox"
              value="day-2"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="dates-day-2"
            >
              Day 2
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="dates-day-3"
              name="dates"
              required
              type="checkbox"
              value="day-3"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="dates-day-3"
            >
              Day 3
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="dates"
      >
        Please select your t-shirt size
      </label>
      <select
        class="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="dates"
        name="dates"
      >
        <option value="s">S</option>
        <option value="m">M</option>
        <option value="l">L</option>
        <option value="xl">XL</option>
      </select>
    </div>
  </fieldset>
  <div class="col-span-full flex flex-row-reverse gap-x-3">
    <button
      class="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
      type="submit"
    >
      Submit
    </button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-background: #cbd5e1;
    --color-background-alt: #3a9092;
    --color-border-active: #23494c;
    --color-border-default: #94a3b8;
    --color-highlight: #7ecac7;
    --color-primary: #23494c;
    --color-primary-active: #122d30;
    --color-text-default: #0f172a;
    --color-text-muted: #475569;

    --font-family-body: "Inter", sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  * {
    border: 0;
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-style: normal;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  [type="checkbox"],
  [type="radio"],
  [type="range"] {
    appearance: none;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus,
  [type="range"]:focus {
    outline: none;
  }
}

@layer components {
  .fs-slider {
    background: transparent;
    cursor: pointer;
    height: 1.25rem;
    width: 100%;
  }

  .fs-slider::-moz-range-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-webkit-slider-runnable-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-moz-range-thumb {
    background-color: var(--color-primary);
    border: none; /* Removes extra border that FF applies */
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
  }

  .fs-slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary);
    border-radius: 50%;
    height: 1.25rem;
    margin-top: -0.375rem; /* Centers thumb on the track */
    width: 1.25rem;
  }

  .fs-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .fs-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer utilities {
  .bg-caret-down {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  .bg-checkbox-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .bg-radio-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  .bg-switch-thumb {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more
      
        

          HTML React
          Copy Copy
        

        
        // Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";

export function ExampleForm() {
  const [state, handleSubmit] = useForm("FORM_ID");

  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }

  return (
    <form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="first-name">
            First Name
          </label>
          <input
            className="fs-input"
            id="first-name"
            name="first-name"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="last-name">
            Last Name
          </label>
          <input
            className="fs-input"
            id="last-name"
            name="last-name"
            required
          />
          <p className="fs-description">
            We&#x27;ll use this to generate your event pass.
          </p>
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="email">
            Email
          </label>
          <input className="fs-input" id="email" name="email" required />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="number">
            Contact Number
          </label>
          <input
            className="fs-input"
            id="number"
            name="number"
            placeholder="(000) 000-0000"
            required
          />
        </div>
      </fieldset>
      <div className="fs-field">
        <label className="fs-label" htmlFor="address">
          Address (optional)
        </label>
        <textarea className="fs-textarea" id="address" name="address" />
      </div>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label">
            Please check the dates you would be attending
          </label>
          <div className="fs-checkbox-group">
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="dates-day-1"
                  name="dates"
                  required
                  type="checkbox"
                  value="day-1"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="dates-day-1">
                  Day 1
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="dates-day-2"
                  name="dates"
                  required
                  type="checkbox"
                  value="day-2"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="dates-day-2">
                  Day 2
                </label>
              </div>
            </div>
            <div className="fs-checkbox-field">
              <div className="fs-checkbox-wrapper">
                <input
                  className="fs-checkbox"
                  id="dates-day-3"
                  name="dates"
                  required
                  type="checkbox"
                  value="day-3"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="dates-day-3">
                  Day 3
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="dates">
            Please select your t-shirt size
          </label>
          <select className="fs-select" id="dates" name="dates">
            <option value="s">S</option>
            <option value="m">M</option>
            <option value="l">L</option>
            <option value="xl">XL</option>
          </select>
        </div>
      </fieldset>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

/** Variables **/

:root {
  --color-background: #cbd5e1;
  --color-background-alt: #3a9092;
  --color-border-active: #23494c;
  --color-border-default: #94a3b8;
  --color-highlight: #7ecac7;
  --color-primary: #23494c;
  --color-primary-active: #122d30;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Inter", sans-serif;
}

/** Base **/

*,
::before,
::after {
  box-sizing: border-box;
}

* {
  border: 0;
  margin: 0;
  padding: 0;
}

body {
  -webkit-font-smoothing: antialiased;
  font-family: var(--font-family-body);
  font-optical-sizing: auto;
  font-style: normal;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  font-size: 100%;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

[type="checkbox"],
[type="radio"],
[type="range"] {
  appearance: none;
  flex-shrink: 0;
  padding: 0;
  user-select: none;
}

[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
  outline: none;
}

/** Components **/

.fs-form {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
}

fieldset {
  display: grid;
  row-gap: 1rem;
}

.fs-form:where(.fs-layout__2-column) fieldset {
  column-gap: 0.75rem;
  grid-template-columns: 1fr 1fr;
  grid-column: 1 / -1;
}

.fs-field {
  display: flex;
  flex-direction: column;
  row-gap: 0.375rem;
}

.fs-label {
  color: var(--color-text-default);
  display: block;
  font-family: var(--font-family-display);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
}

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.fs-button-group {
  display: flex;
  flex-direction: row-reverse;
  column-gap: 0.75rem;
}

.fs-form:where(.fs-layout__2-column) .fs-button-group {
  grid-column: 1 / -1;
}

.fs-button {
  background-color: var(--color-primary);
  border-radius: 0.375rem;
  color: white;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1rem;
  padding: 1rem 2rem;
  transition-duration: 200ms;
  transition-property: background-color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.fs-button:hover {
  background-color: var(--color-primary-active);
}

.fs-button:focus-visible {
  background-color: var(--color-primary-active);
  outline: 3px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  height: 2rem;
  line-height: 1.25rem;
  outline: none;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-input::placeholder {
  color: var(--color-text-muted);
}

.fs-checkbox-group,
.fs-radio-group {
  display: flex;
  flex-direction: column;
  row-gap: 0.5rem;
}

.fs-checkbox-field,
.fs-radio-field {
  column-gap: 0.5rem;
  display: flex;
}

:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
  margin-top: 0.125rem;
}

.fs-checkbox-wrapper,
.fs-radio-wrapper {
  align-items: center;
  display: flex;
  height: 1.25rem;
}

.fs-checkbox,
.fs-radio {
  background-color: #fff;
  border: 1px solid var(--color-primary);
  height: 1rem;
  width: 1rem;
}

.fs-checkbox {
  border-radius: 0.25rem;
}

.fs-radio {
  border-radius: 100%;
}

.fs-checkbox:checked,
.fs-radio:checked {
  background-color: var(--color-primary);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-color: transparent;
}

.fs-checkbox:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}

.fs-radio:checked {
  background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}

.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-select {
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right 0.5rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.fs-slider {
  background: transparent;
  cursor: pointer;
  height: 1.25rem;
  width: 100%;
}

.fs-slider::-moz-range-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-webkit-slider-runnable-track {
  background-color: var(--color-background);
  border-radius: 0.5rem;
  height: 0.5rem;
}

.fs-slider::-moz-range-thumb {
  background-color: var(--color-primary);
  border: none; /* Removes extra border that FF applies */
  border-radius: 50%;
  height: 1.25rem;
  width: 1.25rem;
}

.fs-slider::-webkit-slider-thumb {
  appearance: none;
  background-color: var(--color-primary);
  border-radius: 50%;
  height: 1.25rem;
  margin-top: -0.375rem; /* Centers thumb on the track */
  width: 1.25rem;
}

.fs-slider:focus-visible::-moz-range-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-slider:focus-visible::-webkit-slider-thumb {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.fs-switch-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.5rem;
  cursor: pointer;
  height: 1.5rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.75rem;
}

.fs-switch:checked {
  background-color: var(--color-primary);
  background-position: right center;
}

.fs-switch:focus-visible {
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea {
  appearance: none;
  border-radius: 0.375rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-primary);
  font-size: 0.875rem;
  line-height: 1.25rem;
  outline: none;
  padding: 0.5rem 0.75rem;
  resize: vertical;
}

.fs-textarea:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
  outline: 3px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-textarea::placeholder {
  color: var(--color-text-muted);
}

        
        Show more
      
        

          HTML React/Tailwind
          Copy Copy
        

        
        // Make sure to run npm install @formspree/react
// For more help visit https://formspr.ee/react-help
import React from "react";
import { useForm, ValidationError } from "@formspree/react";

export function ExampleForm() {
  const [state, handleSubmit] = useForm("FORM_ID");

  if (state.succeeded) {
    return <p>Thanks for joining!</p>;
  }

  return (
    <form className="grid grid-cols-2 gap-x-3 gap-y-4" onSubmit={handleSubmit}>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="first-name"
          >
            First Name
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="first-name"
            name="first-name"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="last-name"
          >
            Last Name
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="last-name"
            name="last-name"
            required
          />
          <p className="block text-sm text-[--color-text-muted]">
            We&#x27;ll use this to generate your event pass.
          </p>
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="email"
          >
            Email
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="email"
            name="email"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="number"
          >
            Contact Number
          </label>
          <input
            className="h-8 appearance-none rounded-md border-0 px-3 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="number"
            name="number"
            placeholder="(000) 000-0000"
            required
          />
        </div>
      </fieldset>
      <div className="flex flex-col gap-y-1.5">
        <label
          className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
          htmlFor="address"
        >
          Address (optional)
        </label>
        <textarea
          className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
          id="address"
          name="address"
        />
      </div>
      <fieldset>
        <div className="flex flex-col gap-y-1.5">
          <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
            Please check the dates you would be attending
          </label>
          <div className="flex flex-col gap-y-2">
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="dates-day-1"
                  name="dates"
                  required
                  type="checkbox"
                  value="day-1"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="dates-day-1"
                >
                  Day 1
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="dates-day-2"
                  name="dates"
                  required
                  type="checkbox"
                  value="day-2"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="dates-day-2"
                >
                  Day 2
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-primary] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="dates-day-3"
                  name="dates"
                  required
                  type="checkbox"
                  value="day-3"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="dates-day-3"
                >
                  Day 3
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="dates"
          >
            Please select your t-shirt size
          </label>
          <select
            className="bg-caret-down h-8 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-sm text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="dates"
            name="dates"
          >
            <option value="s">S</option>
            <option value="m">M</option>
            <option value="l">L</option>
            <option value="xl">XL</option>
          </select>
        </div>
      </fieldset>
      <div class="col-span-full flex flex-row-reverse gap-x-3">
        <button
          className="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
          type="submit"
        >
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --color-background: #cbd5e1;
    --color-background-alt: #3a9092;
    --color-border-active: #23494c;
    --color-border-default: #94a3b8;
    --color-highlight: #7ecac7;
    --color-primary: #23494c;
    --color-primary-active: #122d30;
    --color-text-default: #0f172a;
    --color-text-muted: #475569;

    --font-family-body: "Inter", sans-serif;
  }

  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  * {
    border: 0;
    margin: 0;
    padding: 0;
  }

  body {
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-family-body);
    font-optical-sizing: auto;
    font-style: normal;
  }

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    font-size: 100%;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
    margin: 0;
    padding: 0;
  }

  [type="checkbox"],
  [type="radio"],
  [type="range"] {
    appearance: none;
    flex-shrink: 0;
    padding: 0;
    user-select: none;
  }

  [type="checkbox"]:focus,
  [type="radio"]:focus,
  [type="range"]:focus {
    outline: none;
  }
}

@layer components {
  .fs-slider {
    background: transparent;
    cursor: pointer;
    height: 1.25rem;
    width: 100%;
  }

  .fs-slider::-moz-range-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-webkit-slider-runnable-track {
    background-color: var(--color-background);
    border-radius: 0.5rem;
    height: 0.5rem;
  }

  .fs-slider::-moz-range-thumb {
    background-color: var(--color-primary);
    border: none; /* Removes extra border that FF applies */
    border-radius: 50%;
    height: 1.25rem;
    width: 1.25rem;
  }

  .fs-slider::-webkit-slider-thumb {
    appearance: none;
    background-color: var(--color-primary);
    border-radius: 50%;
    height: 1.25rem;
    margin-top: -0.375rem; /* Centers thumb on the track */
    width: 1.25rem;
  }

  .fs-slider:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }

  .fs-slider:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
  }
}

@layer utilities {
  .bg-caret-down {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
  }

  .bg-checkbox-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
  }

  .bg-radio-checked {
    background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
  }

  .bg-switch-thumb {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
  }
}

        
        Show more

How to use this form

Get started in just a few steps.

  1. Create a form on Formspree

    Create a free account and choose New Form.

  2. Add actions and validation rules

    Choose from our growing list of actions, from Airtable to Zendesk and everything in between.

  3. Update your form's action

    Replace with the form endpoint in the code above with the ID from your new form.
    <form action="https://formspree.io/f/{form_id}" method="post">

  4. Tweak your form's code

    Don’t forget to include a name attribute for every input.

  5. Deploy your form to your hosting platform

    Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below.

Integration Guides

Contact forms that work out of the box with top website platforms.

GitBook

GitBook

Adding a form to GitBook

 Shopify

Shopify

Adding a form to Shopify

 Gatsby

Gatsby

React Forms with Gatsby

 Eleventy

Eleventy

HTML Forms with Eleventy

 Jekyll

Jekyll

HTML Forms with Jekyll

 NextJS

NextJS

React Forms with NextJS

What is an Event Registration Form?

An event registration form is an essential tool for event organizers looking to gather important attendee information. Whether you’re hosting a small seminar or a large-scale conference, an event registration form simplifies the registration process and ensures that event planners have the data they need to make the event a success. In today’s digital world, using online event registration forms has become a standard practice for creating a seamless experience for both event attendees and organizers. By utilizing an intuitive form builder, you can create a streamlined registration process that captures all the necessary details.

In this article, we’ll discuss what an event registration form is, when one might need it, its most popular components, and how to create the best registration form using templates and online tools.

What is an Event Registration Form?

An event registration form is a digital or physical form used to collect information from individuals who wish to attend an event. It simplifies the registration process by allowing event organizers to gather basic information, contact information, and other details from potential attendees.

This form is crucial for various types of events, including corporate functions, conferences, fundraisers, workshops, and virtual events. By using event registration forms, event organizers can streamline the entire registration process, track attendee information, and even manage event logistics like seating arrangements, catering preferences, or registration fees.

For example, a conference registration form may collect attendee details like name, job title, and company affiliation, while a fundraiser registration form might focus more on donation amounts and ticket purchases. The flexibility of an event registration form makes it a versatile tool for all types of gatherings.

The components of an event registration form can vary depending on the type of event. However, there are several popular elements that are typically included to ensure the smooth collection of relevant information.

  1. Basic Information: Every registration form starts with the basics. This includes fields like the attendee’s name, email address, phone number, and job title. Capturing this information is critical for communication and event planning.
  2. Contact Information: In addition to basic details, it’s often necessary to collect emergency contact information or other important details like dietary restrictions or accessibility needs. This ensures that event organizers can accommodate special requests and address any concerns that may arise during the event.
  3. Event Details: Depending on the event, the form may also need to include information about registration fees, event agenda, and the venue. Event details help attendees understand what to expect and make informed decisions about their participation.
  4. Conditional Logic: A more advanced feature of many online event registration forms is conditional logic, which allows certain fields to appear based on a previous response. For example, if someone selects “Yes” when asked if they have dietary restrictions, a new field might appear asking them to specify those restrictions.
  5. Registration Form Best Practices: To create a seamless experience for users, it’s important to follow best practices. Keep your event form concise, make the fields easy to navigate, and only ask for relevant information to avoid overwhelming attendees.

When to Use Event Registration Form Templates

Event planners and organizers are often pressed for time, which makes using an event registration form template a convenient option. These templates are pre-built with common form fields and features, which can then be customized to fit the specific needs of the event.

For instance, an online event registration form template might already include basic fields for name and contact information, allowing you to focus on adding custom fields like details of the registration fees or dietary restrictions. Templates ensure that you don’t miss important components and can help you create a professional-looking form quickly.

Many form builders offer a variety of registration form templates that cater to different event types, such as conference registration forms, corporate meetings, or charity events. By using these templates, event planners can streamline the form-building process and ensure that all necessary information is captured without starting from scratch.

How to Best Create an Event Registration Form

Creating an effective event registration form doesn’t have to be complicated. Whether you’re using a form builder or a specialized registration platform, the steps are similar:

  1. Choose a Template or Start from Scratch: Using a template is often the easiest way to get started. Many intuitive form builders offer drag-and-drop features that allow you to customize the form fields to match your event’s needs. However, if you find those too restricting, you can always start from scratch, especially if you have a specific form design in mind.
  2. Customize the Form Fields: Add fields that capture the basic information you need, like the attendee’s name, email address, and phone number. Include additional fields for event details, like session preferences, payment of registration fees, or job titles.
  3. Implement Conditional Logic: To create a more dynamic form, use conditional logic to show or hide certain fields based on the attendee’s responses. This feature is especially useful for multi-day events, where different registration options may apply based on attendance preferences.
  4. Test the Form for Usability: Before launching your registration form, it’s important to test it for usability. Make sure that the form is easy to navigate, the fields are clear, and the registration process flows smoothly. Testing will help you identify any potential issues that could cause attendees to abandon the form.
  5. Set Up Confirmation and Follow-Up Emails: Once a user submits the registration form, they should receive an automatic registration confirmation. This email can include event details, their registration summary, and any additional information they need to know before the event. Follow-up emails closer to the event date are also a good way to keep attendees engaged.

Registration Form Design and Best Practices

When designing your event registration form, simplicity and functionality should be top priorities. Here are a few best practices to keep in mind:

  • Keep it Simple: Only ask for the information that you absolutely need. Long, complicated forms can frustrate users and lead to higher abandonment rates.
  • Mobile-Friendly Design: Many attendees will fill out the form on their smartphones, so make sure your online form is mobile-friendly.
  • Keep Your Branding On Point: Ensure that your registration form reflects the branding of your website. Consistent styles, colors, and fonts create a cohesive look and feel, helping the registration form blend naturally with the rest of your site.
  • Performance Matters: Page load speed is crucial for user engagement. Check your registration form page’s performance using tools like Google Lighthouse. Avoid heavy iframes or third-party form widgets, as they can slow down the page and create a sluggish experience. Opting for simple HTML forms can help maintain quick load times and better responsiveness, providing an easy way to integrate forms with most hosting setups.
  • Use Conditional Logic: To avoid overwhelming users with too many fields, use conditional logic to display only relevant sections based on their answers.
  • Ensure Data Security: Collecting personal information like email addresses and phone numbers requires a secure form platform. Make sure your registration form complies with data privacy regulations.
  • Offer Multiple Payment Options: If your event has a registration fee, ensure that you provide various payment options to accommodate different attendees.

Conclusion

Event registration forms are an essential part of planning and managing any event. By using event registration form templates, you can create a professional form quickly and easily, ensuring that all the necessary information is collected in a user-friendly way. Whether you’re an event planner, organizer, or attendee, a well-designed registration form can make the entire registration process smooth and efficient.

By incorporating best practices, you can ensure that your online registration forms offer a smooth experience from start to finish. So the next time you’re planning an event, make sure to leverage the power of a well-crafted event registration form.

FAQ

  • What is a registration form?

    A registration form is an online form that collects necessary information from users to register for events, services, or memberships. It often includes fields like name, email, and other details, depending on the purpose, streamlining the sign-up process and capturing data for further engagement.

  • When are registration forms needed?

    Registration forms are essential when collecting user information for events, memberships, courses, or service access. They provide a structured way to onboard users, allowing organizers or businesses to gather details needed to manage sign-ups and ensure smooth entry or access.

  • What are the subtypes of registration forms?

    Common subtypes of registration forms include event registration forms, account creation forms, membership sign-ups, and service registration forms. Each subtype gathers specific information suited to its purpose, ensuring the form aligns with the user’s intent and the organization’s needs.

  • What industries predominantly use registration forms?

    Industries such as education, healthcare, events, e-commerce, and hospitality predominantly use registration forms. These sectors benefit from organized data collection, helping manage sign-ups, patient registrations, customer accounts, and membership tracking efficiently.

  • How can users receive email notifications upon registration?

    With Formspree as the backend, users can easily set up email notifications for each registration form submission. This feature allows designated individuals to receive real-time email alerts and instantly view responses on the Formspree dashboard, ensuring timely follow-ups and engagement.

  • Can registration forms collect payments?

    Yes, registration forms can be connected to payment processors like Stripe to securely handle payments alongside user registration. This capability enables businesses to collect fees, event tickets, or donations directly through the form, simplifying the payment and registration process.

  • Are the form templates free to use?

    Yes, all registration form templates on this website are free to use and customizable to meet various needs. Formspree provides a range of templates that you can embed on your website, making it easy to manage sign-ups without additional costs.

More registration Forms