Form Library Signup Forms Waiting List Form

Waiting List Form

Use this simple waiting list form to build anticipation for your launch or closed beta.
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>
    <legend class="fs-fieldset-title">Join the Waiting List</legend>
    <div class="fs-field">
      <label class="fs-label" for="full-name">Full Name</label>
      <input
        class="fs-input"
        id="full-name"
        name="full-name"
        placeholder="Enter your name"
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="email-address">Email Address</label>
      <input
        class="fs-input"
        id="email-address"
        name="email-address"
        placeholder="Enter your email address"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="phone-number">Phone Number</label>
      <input
        class="fs-input"
        id="phone-number"
        name="phone-number"
        placeholder="Enter your phone number (optional)"
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="interest">
        Product / Service of Interest
      </label>
      <input
        class="fs-input"
        id="interest"
        name="interest"
        placeholder="Enter the product or service name"
      />
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="interest-reason">
        Why Are You Interested?
      </label>
      <textarea
        class="fs-textarea"
        id="interest-reason"
        name="interest-reason"
        placeholder="Tell us why you&#x27;re interested (optional)"
      ></textarea>
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="referral-source">
        How Did You Hear About Us?
      </label>
      <input
        class="fs-input"
        id="referral-source"
        name="referral-source"
        placeholder="Optional"
      />
    </div>
    <div class="fs-checkbox-field col-span-full">
      <div class="fs-checkbox-wrapper">
        <input
          aria-describedby="update-consent-description"
          class="fs-checkbox"
          id="update-consent"
          name="update-consent"
          required
          type="checkbox"
          value="yes"
        />
      </div>
      <div>
        <label class="fs-label" for="update-consent">
          Consent to Receive Updates
        </label>
        <p class="fs-description" id="update-consent-description">
          Notify me when spots become available.
        </p>
      </div>
    </div>
    <div class="fs-checkbox-field col-span-full">
      <div class="fs-checkbox-wrapper">
        <input
          aria-describedby="terms-privacy-description"
          class="fs-checkbox"
          id="terms-privacy"
          name="terms-privacy"
          required
          type="checkbox"
          value="yes"
        />
      </div>
      <div>
        <label class="fs-label" for="terms-privacy">
          Agree to Terms &amp; Privacy Policy
        </label>
        <p class="fs-description" id="terms-privacy-description">
          I agree to the Terms &amp; Privacy Policy.
        </p>
      </div>
    </div>
  </fieldset>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Join Waitlist</button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,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: "Work Sans", system-ui, sans-serif;
  --font-family-display: "IBM Plex Serif", system-ui, 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: 1.5rem;
}

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

fieldset {
  display: grid;
  margin: 1.5rem 0;
  row-gap: 1.5rem;
}

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

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  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: 1.5rem;
}

.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-text-default);
  font-size: 1rem;
  height: 2.5rem;
  line-height: 1.5rem;
  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-text-default);
  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 {
  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: 1rem;
  line-height: 1.5rem;
  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);
}

/** Utilities **/

.col-span-full {
  grid-column: 1 / -1;
}

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

.slider-label-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
}

.slider-label-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

        
        Show more
      
        

          HTML HTML/Tailwind
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="grid grid-cols-2 gap-x-6 gap-y-6"
  target="_top"
  method="POST"
>
  <fieldset>
    <legend
      class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
    >
      Join the Waiting List
    </legend>
    <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="full-name"
      >
        Full Name
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 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="full-name"
        name="full-name"
        placeholder="Enter your name"
      />
    </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="email-address"
      >
        Email Address
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 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-address"
        name="email-address"
        placeholder="Enter your email address"
        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="phone-number"
      >
        Phone Number
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 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="phone-number"
        name="phone-number"
        placeholder="Enter your phone number (optional)"
      />
    </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="interest"
      >
        Product / Service of Interest
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 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="interest"
        name="interest"
        placeholder="Enter the product or service name"
      />
    </div>
    <div class="col-span-full 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="interest-reason"
      >
        Why Are You Interested?
      </label>
      <textarea
        class="resize-y appearance-none rounded-md border-0 px-3 py-2 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="interest-reason"
        name="interest-reason"
        placeholder="Tell us why you&#x27;re interested (optional)"
      ></textarea>
    </div>
    <div class="col-span-full 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="referral-source"
      >
        How Did You Hear About Us?
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 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="referral-source"
        name="referral-source"
        placeholder="Optional"
      />
    </div>
    <div class="col-span-full flex gap-x-2">
      <div class="flex h-5 items-center">
        <input
          aria-describedby="update-consent-description"
          class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] 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="update-consent"
          name="update-consent"
          required
          type="checkbox"
          value="yes"
        />
      </div>
      <div>
        <label
          class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
          for="update-consent"
        >
          Consent to Receive Updates
        </label>
        <p
          class="mt-0.5 block text-sm text-[--color-text-muted]"
          id="update-consent-description"
        >
          Notify me when spots become available.
        </p>
      </div>
    </div>
    <div class="col-span-full flex gap-x-2">
      <div class="flex h-5 items-center">
        <input
          aria-describedby="terms-privacy-description"
          class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] 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="terms-privacy"
          name="terms-privacy"
          required
          type="checkbox"
          value="yes"
        />
      </div>
      <div>
        <label
          class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
          for="terms-privacy"
        >
          Agree to Terms &amp; Privacy Policy
        </label>
        <p
          class="mt-0.5 block text-sm text-[--color-text-muted]"
          id="terms-privacy-description"
        >
          I agree to the Terms &amp; Privacy Policy.
        </p>
      </div>
    </div>
  </fieldset>
  <div class="col-span-full flex flex-row-reverse gap-x-6">
    <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"
    >
      Join Waitlist
    </button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,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: "Work Sans", system-ui, sans-serif;
    --font-family-display: "IBM Plex Serif", system-ui, 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;
  }

  .slider-label-container {
    @apply flex justify-between w-full mt-1; /* Removed px-2.5 */
  }

  .slider-label-text {
    @apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */
  }
}

@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>
        <legend className="fs-fieldset-title">Join the Waiting List</legend>
        <div className="fs-field">
          <label className="fs-label" htmlFor="full-name">
            Full Name
          </label>
          <input
            className="fs-input"
            id="full-name"
            name="full-name"
            placeholder="Enter your name"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="email-address">
            Email Address
          </label>
          <input
            className="fs-input"
            id="email-address"
            name="email-address"
            placeholder="Enter your email address"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="phone-number">
            Phone Number
          </label>
          <input
            className="fs-input"
            id="phone-number"
            name="phone-number"
            placeholder="Enter your phone number (optional)"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="interest">
            Product / Service of Interest
          </label>
          <input
            className="fs-input"
            id="interest"
            name="interest"
            placeholder="Enter the product or service name"
          />
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="interest-reason">
            Why Are You Interested?
          </label>
          <textarea
            className="fs-textarea"
            id="interest-reason"
            name="interest-reason"
            placeholder="Tell us why you&#x27;re interested (optional)"
          />
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="referral-source">
            How Did You Hear About Us?
          </label>
          <input
            className="fs-input"
            id="referral-source"
            name="referral-source"
            placeholder="Optional"
          />
        </div>
        <div className="fs-checkbox-field col-span-full">
          <div className="fs-checkbox-wrapper">
            <input
              aria-describedby="update-consent-description"
              className="fs-checkbox"
              id="update-consent"
              name="update-consent"
              required
              type="checkbox"
              value="yes"
            />
          </div>
          <div>
            <label className="fs-label" htmlFor="update-consent">
              Consent to Receive Updates
            </label>
            <p className="fs-description" id="update-consent-description">
              Notify me when spots become available.
            </p>
          </div>
        </div>
        <div className="fs-checkbox-field col-span-full">
          <div className="fs-checkbox-wrapper">
            <input
              aria-describedby="terms-privacy-description"
              className="fs-checkbox"
              id="terms-privacy"
              name="terms-privacy"
              required
              type="checkbox"
              value="yes"
            />
          </div>
          <div>
            <label className="fs-label" htmlFor="terms-privacy">
              Agree to Terms &amp; Privacy Policy
            </label>
            <p className="fs-description" id="terms-privacy-description">
              I agree to the Terms &amp; Privacy Policy.
            </p>
          </div>
        </div>
      </fieldset>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          Join Waitlist
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,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: "Work Sans", system-ui, sans-serif;
  --font-family-display: "IBM Plex Serif", system-ui, 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: 1.5rem;
}

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

fieldset {
  display: grid;
  margin: 1.5rem 0;
  row-gap: 1.5rem;
}

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

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  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: 1.5rem;
}

.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-text-default);
  font-size: 1rem;
  height: 2.5rem;
  line-height: 1.5rem;
  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-text-default);
  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 {
  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: 1rem;
  line-height: 1.5rem;
  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);
}

/** Utilities **/

.col-span-full {
  grid-column: 1 / -1;
}

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

.slider-label-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-top: 0.25rem;
}

.slider-label-text {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
}

        
        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-6 gap-y-6" onSubmit={handleSubmit}>
      <fieldset>
        <legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
          Join the Waiting List
        </legend>
        <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="full-name"
          >
            Full Name
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 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="full-name"
            name="full-name"
            placeholder="Enter your name"
          />
        </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="email-address"
          >
            Email Address
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 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-address"
            name="email-address"
            placeholder="Enter your email address"
            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="phone-number"
          >
            Phone Number
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 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="phone-number"
            name="phone-number"
            placeholder="Enter your phone number (optional)"
          />
        </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="interest"
          >
            Product / Service of Interest
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 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="interest"
            name="interest"
            placeholder="Enter the product or service name"
          />
        </div>
        <div className="col-span-full 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="interest-reason"
          >
            Why Are You Interested?
          </label>
          <textarea
            className="resize-y appearance-none rounded-md border-0 px-3 py-2 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="interest-reason"
            name="interest-reason"
            placeholder="Tell us why you&#x27;re interested (optional)"
          />
        </div>
        <div className="col-span-full 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="referral-source"
          >
            How Did You Hear About Us?
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 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="referral-source"
            name="referral-source"
            placeholder="Optional"
          />
        </div>
        <div className="col-span-full flex gap-x-2">
          <div className="flex h-5 items-center">
            <input
              aria-describedby="update-consent-description"
              className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] 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="update-consent"
              name="update-consent"
              required
              type="checkbox"
              value="yes"
            />
          </div>
          <div>
            <label
              className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              htmlFor="update-consent"
            >
              Consent to Receive Updates
            </label>
            <p
              className="mt-0.5 block text-sm text-[--color-text-muted]"
              id="update-consent-description"
            >
              Notify me when spots become available.
            </p>
          </div>
        </div>
        <div className="col-span-full flex gap-x-2">
          <div className="flex h-5 items-center">
            <input
              aria-describedby="terms-privacy-description"
              className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] 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="terms-privacy"
              name="terms-privacy"
              required
              type="checkbox"
              value="yes"
            />
          </div>
          <div>
            <label
              className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              htmlFor="terms-privacy"
            >
              Agree to Terms &amp; Privacy Policy
            </label>
            <p
              className="mt-0.5 block text-sm text-[--color-text-muted]"
              id="terms-privacy-description"
            >
              I agree to the Terms &amp; Privacy Policy.
            </p>
          </div>
        </div>
      </fieldset>
      <div class="col-span-full flex flex-row-reverse gap-x-6">
        <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"
        >
          Join Waitlist
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,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: "Work Sans", system-ui, sans-serif;
    --font-family-display: "IBM Plex Serif", system-ui, 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;
  }

  .slider-label-container {
    @apply flex justify-between w-full mt-1; /* Removed px-2.5 */
  }

  .slider-label-text {
    @apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */
  }
}

@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.

How to Use This Form in Your Shopify Store

Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.

  1. Create a Form on Formspree

    Sign up for a free Formspree account and create a new form. Once created, you’ll get a unique form endpoint like https://formspree.io/f/your-form-id.

  2. Copy the HTML from this Library Page

    Scroll up and copy the full HTML form code shown above. Don’t forget to replace the FORM_ID in the action attribute with your actual form ID.

  3. Paste the Form into a Shopify Page

    Go to your Shopify Admin and navigate to Online Store > Themes > Customize. Select the page where you want the form to appear, then add a new Custom Liquid section. Paste the copied HTML into the Custom Liquid field and save.

  4. Copy the CSS Styles

    Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.

  5. Paste the CSS into Your Shopify Theme

    In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code. Open the assets/base.css file (or your theme’s main CSS file) and paste the copied CSS at the very end. Save the file.

  6. Preview and Publish

    Return to the page where you added the form. You should now see your styled Formspree form live in your Shopify store. Test it out and then hit “Publish” to make it live for customers.

Integration Guides

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

Astro

Astro

Adding a Form to Astro

 Angular

Angular

Forms in Angular

 Webflow

Webflow

Adding a Form to Webflow

 Wordpress

Wordpress

Adding a Form to Wordpress

 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 a Waiting List Form?

A waiting list form allows you to collect interest from users who want early access to a product, service, beta program, or upcoming launch. It’s commonly used by startups, indie hackers, and creators who want to build hype and collect qualified leads before releasing something new. These forms usually include fields for the user’s name, email, and sometimes a few qualifying questions like intended use or preferred features.

Formspree offers a simple way to launch a professional-looking waitlist form without writing server-side code. You can embed a customized form on your landing page and start collecting leads immediately, with submissions delivered to your inbox or connected through Zapier to a CRM or email marketing platform. With built-in spam protection and responsive design support, it’s the perfect lightweight solution for pre-launch campaigns or invite-only access workflows.

FAQ

  • What is a signup form?

    A signup form is an online form used to collect user information for newsletter subscriptions, account creation, waitlists, or event registration. It typically includes fields like name, email address, and password or preferences. With Formspree as the backend, signup forms are easy to embed, send instant email notifications, and let you view responses in real time through the Formspree dashboard.

  • How do you create a register form?

    To create a register form, decide what user details you need—such as name, email, and password—and add those fields to your form layout. Using Formspree, you can build and customize your register form quickly, and receive automatic notifications for each new submission, making user onboarding seamless and efficient.

  • What is a signing form?

    A signing form is typically used to capture consent, agreement, or formal commitment to something—such as a petition, policy, or legal document. When connected to Formspree, a signing form can collect names, emails, digital signatures, and notify your team instantly for timely follow-up and record keeping.

  • What are joining forms?

    Joining forms are used to let users express interest or enroll in groups, communities, memberships, or programs. These forms can be embedded easily with Formspree, providing real-time email alerts and immediate access to submitted data through your Formspree dashboard for efficient community or program management.

More signup Forms