Form Library Signup Forms Email Signup Form

Email Signup Form

Use this simple email signup form to quickly grow your subscriber list without exposing your inbox.
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"
>
  <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 (optional)"
    />
  </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="company-name">Company Name</label>
    <input
      class="fs-input"
      id="company-name"
      name="company-name"
      placeholder="Enter your company (optional)"
    />
  </div>
  <div class="fs-field">
    <label class="fs-label" for="job-title">Job Title</label>
    <input
      class="fs-input"
      id="job-title"
      name="job-title"
      placeholder="Enter your job title (optional)"
    />
  </div>
  <div class="fs-field">
    <label class="fs-label">Topics of Interest</label>
    <div class="fs-checkbox-group">
      <div class="fs-checkbox-field">
        <div class="fs-checkbox-wrapper">
          <input
            class="fs-checkbox"
            id="topics-of-interest-product-updates"
            name="topics-of-interest"
            required
            type="checkbox"
            value="product-updates"
          />
        </div>
        <div>
          <label class="fs-label" for="topics-of-interest-product-updates">
            Product Updates
          </label>
        </div>
      </div>
      <div class="fs-checkbox-field">
        <div class="fs-checkbox-wrapper">
          <input
            class="fs-checkbox"
            id="topics-of-interest-blog-posts"
            name="topics-of-interest"
            required
            type="checkbox"
            value="blog-posts"
          />
        </div>
        <div>
          <label class="fs-label" for="topics-of-interest-blog-posts">
            Blog Posts
          </label>
        </div>
      </div>
      <div class="fs-checkbox-field">
        <div class="fs-checkbox-wrapper">
          <input
            class="fs-checkbox"
            id="topics-of-interest-promotions"
            name="topics-of-interest"
            required
            type="checkbox"
            value="promotions"
          />
        </div>
        <div>
          <label class="fs-label" for="topics-of-interest-promotions">
            Promotions
          </label>
        </div>
      </div>
      <div class="fs-checkbox-field">
        <div class="fs-checkbox-wrapper">
          <input
            class="fs-checkbox"
            id="topics-of-interest-events"
            name="topics-of-interest"
            required
            type="checkbox"
            value="events"
          />
        </div>
        <div>
          <label class="fs-label" for="topics-of-interest-events">Events</label>
        </div>
      </div>
    </div>
  </div>
  <div class="fs-field">
    <label class="fs-label" for="email-frequency">
      Preferred Email Frequency
    </label>
    <select
      class="fs-select"
      id="email-frequency"
      name="email-frequency"
      required
    >
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
      <option value="occasionally">Occasionally</option>
    </select>
  </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="Let us know how you found us (optional)"
    />
  </div>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Subscribe</button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");

/** Variables **/

:root {
  --color-background: #e7e7e7;
  --color-background-alt: #bdb4fe;
  --color-border-active: #5b26db;
  --color-border-default: #d1d1d1;
  --color-highlight: #bdb4fe;
  --color-primary: #5b26db;
  --color-primary-active: #401c96;
  --color-text-default: #262626;
  --color-text-muted: #4f4f4f;

  --font-family-body: "Manrope", sans-serif;
  --font-family-display: "Cabin", 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;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  grid-column: 1 / -1;
}

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

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

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 1rem;
  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: 9999px;
  color: white;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0.75rem 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: 4px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 9999px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 1rem;
  height: 3rem;
  line-height: 1.5rem;
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

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

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

.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.25rem;
}

.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-border-default);
  height: 1.25rem;
  width: 1.25rem;
}

.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 {
  border-color: var(--color-border-active);
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
  border-color: transparent;
}

.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.75rem center;
  background-repeat: no-repeat;
  background-size: 1.625em 1.625em;
  padding-right: 2.875rem;
}

.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='2.75' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.25rem;
  cursor: pointer;
  height: 1.25rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.5rem;
}

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

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

.fs-textarea {
  appearance: none;
  border-radius: 0.75rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  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 1px inset;
}

.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"
>
  <div class="flex flex-col gap-y-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
      for="full-name"
    >
      Full Name
    </label>
    <input
      class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
      id="full-name"
      name="full-name"
      placeholder="Enter your name (optional)"
    />
  </div>
  <div class="flex flex-col gap-y-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
      for="email-address"
    >
      Email Address
    </label>
    <input
      class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
      for="company-name"
    >
      Company Name
    </label>
    <input
      class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
      id="company-name"
      name="company-name"
      placeholder="Enter your company (optional)"
    />
  </div>
  <div class="flex flex-col gap-y-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
      for="job-title"
    >
      Job Title
    </label>
    <input
      class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
      id="job-title"
      name="job-title"
      placeholder="Enter your job title (optional)"
    />
  </div>
  <div class="flex flex-col gap-y-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
    >
      Topics of Interest
    </label>
    <div class="flex flex-col gap-y-4">
      <div class="flex gap-x-2">
        <div class="flex h-5 items-center">
          <input
            class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
            id="topics-of-interest-product-updates"
            name="topics-of-interest"
            required
            type="checkbox"
            value="product-updates"
          />
        </div>
        <div>
          <label
            class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            for="topics-of-interest-product-updates"
          >
            Product Updates
          </label>
        </div>
      </div>
      <div class="flex gap-x-2">
        <div class="flex h-5 items-center">
          <input
            class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
            id="topics-of-interest-blog-posts"
            name="topics-of-interest"
            required
            type="checkbox"
            value="blog-posts"
          />
        </div>
        <div>
          <label
            class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            for="topics-of-interest-blog-posts"
          >
            Blog Posts
          </label>
        </div>
      </div>
      <div class="flex gap-x-2">
        <div class="flex h-5 items-center">
          <input
            class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
            id="topics-of-interest-promotions"
            name="topics-of-interest"
            required
            type="checkbox"
            value="promotions"
          />
        </div>
        <div>
          <label
            class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            for="topics-of-interest-promotions"
          >
            Promotions
          </label>
        </div>
      </div>
      <div class="flex gap-x-2">
        <div class="flex h-5 items-center">
          <input
            class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
            id="topics-of-interest-events"
            name="topics-of-interest"
            required
            type="checkbox"
            value="events"
          />
        </div>
        <div>
          <label
            class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            for="topics-of-interest-events"
          >
            Events
          </label>
        </div>
      </div>
    </div>
  </div>
  <div class="flex flex-col gap-y-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
      for="email-frequency"
    >
      Preferred Email Frequency
    </label>
    <select
      class="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
      id="email-frequency"
      name="email-frequency"
      required
    >
      <option value="weekly">Weekly</option>
      <option value="monthly">Monthly</option>
      <option value="occasionally">Occasionally</option>
    </select>
  </div>
  <div class="col-span-full flex flex-col gap-y-2">
    <label
      class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
      for="referral-source"
    >
      How Did You Hear About Us?
    </label>
    <input
      class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
      id="referral-source"
      name="referral-source"
      placeholder="Let us know how you found us (optional)"
    />
  </div>
  <div class="col-span-full flex flex-row-reverse gap-x-6">
    <button
      class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
      type="submit"
    >
      Subscribe
    </button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");

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

@layer base {
  :root {
    --color-background: #e7e7e7;
    --color-background-alt: #bdb4fe;
    --color-border-active: #5b26db;
    --color-border-default: #d1d1d1;
    --color-highlight: #bdb4fe;
    --color-primary: #5b26db;
    --color-primary-active: #401c96;
    --color-text-default: #262626;
    --color-text-muted: #4f4f4f;

    --font-family-body: "Manrope", sans-serif;
    --font-family-display: "Cabin", 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='2.75' 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}>
      <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 (optional)"
        />
      </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="company-name">
          Company Name
        </label>
        <input
          className="fs-input"
          id="company-name"
          name="company-name"
          placeholder="Enter your company (optional)"
        />
      </div>
      <div className="fs-field">
        <label className="fs-label" htmlFor="job-title">
          Job Title
        </label>
        <input
          className="fs-input"
          id="job-title"
          name="job-title"
          placeholder="Enter your job title (optional)"
        />
      </div>
      <div className="fs-field">
        <label className="fs-label">Topics of Interest</label>
        <div className="fs-checkbox-group">
          <div className="fs-checkbox-field">
            <div className="fs-checkbox-wrapper">
              <input
                className="fs-checkbox"
                id="topics-of-interest-product-updates"
                name="topics-of-interest"
                required
                type="checkbox"
                value="product-updates"
              />
            </div>
            <div>
              <label
                className="fs-label"
                htmlFor="topics-of-interest-product-updates"
              >
                Product Updates
              </label>
            </div>
          </div>
          <div className="fs-checkbox-field">
            <div className="fs-checkbox-wrapper">
              <input
                className="fs-checkbox"
                id="topics-of-interest-blog-posts"
                name="topics-of-interest"
                required
                type="checkbox"
                value="blog-posts"
              />
            </div>
            <div>
              <label
                className="fs-label"
                htmlFor="topics-of-interest-blog-posts"
              >
                Blog Posts
              </label>
            </div>
          </div>
          <div className="fs-checkbox-field">
            <div className="fs-checkbox-wrapper">
              <input
                className="fs-checkbox"
                id="topics-of-interest-promotions"
                name="topics-of-interest"
                required
                type="checkbox"
                value="promotions"
              />
            </div>
            <div>
              <label
                className="fs-label"
                htmlFor="topics-of-interest-promotions"
              >
                Promotions
              </label>
            </div>
          </div>
          <div className="fs-checkbox-field">
            <div className="fs-checkbox-wrapper">
              <input
                className="fs-checkbox"
                id="topics-of-interest-events"
                name="topics-of-interest"
                required
                type="checkbox"
                value="events"
              />
            </div>
            <div>
              <label className="fs-label" htmlFor="topics-of-interest-events">
                Events
              </label>
            </div>
          </div>
        </div>
      </div>
      <div className="fs-field">
        <label className="fs-label" htmlFor="email-frequency">
          Preferred Email Frequency
        </label>
        <select
          className="fs-select"
          id="email-frequency"
          name="email-frequency"
          required
        >
          <option value="weekly">Weekly</option>
          <option value="monthly">Monthly</option>
          <option value="occasionally">Occasionally</option>
        </select>
      </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="Let us know how you found us (optional)"
        />
      </div>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          Subscribe
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");

/** Variables **/

:root {
  --color-background: #e7e7e7;
  --color-background-alt: #bdb4fe;
  --color-border-active: #5b26db;
  --color-border-default: #d1d1d1;
  --color-highlight: #bdb4fe;
  --color-primary: #5b26db;
  --color-primary-active: #401c96;
  --color-text-default: #262626;
  --color-text-muted: #4f4f4f;

  --font-family-body: "Manrope", sans-serif;
  --font-family-display: "Cabin", 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;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  grid-column: 1 / -1;
}

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

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

.fs-description {
  color: var(--color-text-muted);
  display: block;
  font-size: 1rem;
  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: 9999px;
  color: white;
  cursor: pointer;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.5rem;
  padding: 0.75rem 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: 4px solid var(--color-highlight);
}

.fs-input,
.fs-select {
  appearance: none;
  border-radius: 9999px;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  font-size: 1rem;
  height: 3rem;
  line-height: 1.5rem;
  outline: none;
  padding-left: 1rem;
  padding-right: 1rem;
}

.fs-input:focus-visible,
.fs-select:focus-visible {
  box-shadow: var(--color-border-active) 0 0 0 1px inset;
}

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

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

.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.25rem;
}

.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-border-default);
  height: 1.25rem;
  width: 1.25rem;
}

.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 {
  border-color: var(--color-border-active);
  outline: 4px solid var(--color-highlight);
  outline-offset: 0;
}

.fs-checkbox:checked:focus-visible,
.fs-radio:checked:focus-visible {
  border-color: transparent;
}

.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.75rem center;
  background-repeat: no-repeat;
  background-size: 1.625em 1.625em;
  padding-right: 2.875rem;
}

.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='2.75' fill='white'/%3e%3c/svg%3e");
  background-position: left center;
  background-repeat: no-repeat;
  border-radius: 1.25rem;
  cursor: pointer;
  height: 1.25rem;
  transition-duration: 200ms;
  transition-property: background-color, background-position;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  width: 2.5rem;
}

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

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

.fs-textarea {
  appearance: none;
  border-radius: 0.75rem;
  border-width: 0;
  box-shadow: var(--color-border-default) 0 0 0 1px inset;
  color: var(--color-text-default);
  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 1px inset;
}

.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}>
      <div className="flex flex-col gap-y-2">
        <label
          className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
          htmlFor="full-name"
        >
          Full Name
        </label>
        <input
          className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
          id="full-name"
          name="full-name"
          placeholder="Enter your name (optional)"
        />
      </div>
      <div className="flex flex-col gap-y-2">
        <label
          className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
          htmlFor="email-address"
        >
          Email Address
        </label>
        <input
          className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] 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-2">
        <label
          className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
          htmlFor="company-name"
        >
          Company Name
        </label>
        <input
          className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
          id="company-name"
          name="company-name"
          placeholder="Enter your company (optional)"
        />
      </div>
      <div className="flex flex-col gap-y-2">
        <label
          className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
          htmlFor="job-title"
        >
          Job Title
        </label>
        <input
          className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
          id="job-title"
          name="job-title"
          placeholder="Enter your job title (optional)"
        />
      </div>
      <div className="flex flex-col gap-y-2">
        <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]">
          Topics of Interest
        </label>
        <div className="flex flex-col gap-y-4">
          <div className="flex gap-x-2">
            <div className="flex h-5 items-center">
              <input
                className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
                id="topics-of-interest-product-updates"
                name="topics-of-interest"
                required
                type="checkbox"
                value="product-updates"
              />
            </div>
            <div>
              <label
                className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                htmlFor="topics-of-interest-product-updates"
              >
                Product Updates
              </label>
            </div>
          </div>
          <div className="flex gap-x-2">
            <div className="flex h-5 items-center">
              <input
                className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
                id="topics-of-interest-blog-posts"
                name="topics-of-interest"
                required
                type="checkbox"
                value="blog-posts"
              />
            </div>
            <div>
              <label
                className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                htmlFor="topics-of-interest-blog-posts"
              >
                Blog Posts
              </label>
            </div>
          </div>
          <div className="flex gap-x-2">
            <div className="flex h-5 items-center">
              <input
                className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
                id="topics-of-interest-promotions"
                name="topics-of-interest"
                required
                type="checkbox"
                value="promotions"
              />
            </div>
            <div>
              <label
                className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                htmlFor="topics-of-interest-promotions"
              >
                Promotions
              </label>
            </div>
          </div>
          <div className="flex gap-x-2">
            <div className="flex h-5 items-center">
              <input
                className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent"
                id="topics-of-interest-events"
                name="topics-of-interest"
                required
                type="checkbox"
                value="events"
              />
            </div>
            <div>
              <label
                className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
                htmlFor="topics-of-interest-events"
              >
                Events
              </label>
            </div>
          </div>
        </div>
      </div>
      <div className="flex flex-col gap-y-2">
        <label
          className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
          htmlFor="email-frequency"
        >
          Preferred Email Frequency
        </label>
        <select
          className="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
          id="email-frequency"
          name="email-frequency"
          required
        >
          <option value="weekly">Weekly</option>
          <option value="monthly">Monthly</option>
          <option value="occasionally">Occasionally</option>
        </select>
      </div>
      <div className="col-span-full flex flex-col gap-y-2">
        <label
          className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
          htmlFor="referral-source"
        >
          How Did You Hear About Us?
        </label>
        <input
          className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]"
          id="referral-source"
          name="referral-source"
          placeholder="Let us know how you found us (optional)"
        />
      </div>
      <div class="col-span-full flex flex-row-reverse gap-x-6">
        <button
          className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]"
          type="submit"
        >
          Subscribe
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap");

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

@layer base {
  :root {
    --color-background: #e7e7e7;
    --color-background-alt: #bdb4fe;
    --color-border-active: #5b26db;
    --color-border-default: #d1d1d1;
    --color-highlight: #bdb4fe;
    --color-primary: #5b26db;
    --color-primary-active: #401c96;
    --color-text-default: #262626;
    --color-text-muted: #4f4f4f;

    --font-family-body: "Manrope", sans-serif;
    --font-family-display: "Cabin", 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='2.75' 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 an Email Signup Form?

An email signup form is a simple yet powerful tool used by websites to collect email addresses from visitors. Typically consisting of one or two input fields—usually for the visitor’s email address and optionally a name—these forms are designed to convert casual browsers into subscribers, customers, or leads. Whether it’s a popup, a widget in the sidebar, or a full-page landing form, the goal is the same: to grow your mailing list and open up a direct line of communication.

Email signup forms play a crucial role in list building and email marketing strategies. They enable businesses to nurture relationships with their audience, promote new content, share exclusive offers, and boost engagement over time. A well-placed, high-converting signup form can be the difference between a one-time visitor and a long-term subscriber.

Types of Email Signup Forms

There are several types of email signup forms, each suited for different placement strategies, user behaviors, and campaign goals:

  • Popups
    • Entry popups appear when a user lands on the site.
    • Exit-intent popups trigger as the user is about to leave.
    • Timed popups show after a few seconds or minutes on the page.
  • Embedded forms
    • Placed within blog content, sidebars, or footers for seamless user flow.
    • Floating buttons/icons and slide-ins
    • Subtle, always-visible elements that expand into forms when clicked.
  • Landing page forms: Standalone forms designed for focused campaigns like webinars or lead magnets.
  • Gamified forms: Interactive experiences such as wheel spinners or quizzes that incentivize signup through fun and rewards.
  • Multi-step forms: Break longer forms into steps to avoid overwhelming users and increase data collection without hurting conversions.

High-Converting Placement Strategies

Placing your email signup form in the right location can significantly improve conversion rates. Here are some high-performing strategies:

  • Homepage: Feature your signup form prominently to capture attention immediately.
  • Blog posts: Insert forms at the beginning, middle, or end of articles to target engaged readers.
  • Headers, footers, and sidebars: Site-wide visibility ensures consistent exposure across all pages.
  • Dedicated landing pages: Best for targeted campaigns with a single focus, like lead magnets or event registrations.
  • Popups: Use strategically based on behavior (entry, exit, scroll depth) for maximum relevance.
  • Product or checkout pages: Ideal for upselling, abandoned cart strategies, or post-purchase engagement in ecommerce.
  • After blog comments or downloads: Leverage moments of interaction by prompting users to subscribe once they’ve engaged.

Design and UX Best Practices

A well-designed email signup form doesn’t just look good—it removes friction, guides the user, and encourages conversions. Follow these user experience (UX) best practices to ensure your form is effective and accessible:

  • Keep it short and simple: Only request essential information. Most high-converting forms ask for just an email address. You can collect more details later through follow-ups or progressive profiling.
  • Use clear, compelling CTAs: Replace generic buttons like “Submit” with action-oriented phrases like “Get the Guide”, “Join the List”, or “Send Me Updates”. Make it clear what the user is getting.
  • Make forms visually prominent: Use adequate spacing, bold headers, and borders to separate the form from surrounding content. Don’t bury it at the bottom of a dense page.
  • Ensure mobile responsiveness: Forms should adapt gracefully to smaller screens. Test input fields, buttons, and popups on various devices to ensure usability.
  • Use contrasting colors and visuals: A contrasting submit button color can guide the user’s eye, while visuals like icons or illustrations can make the form feel more welcoming.
  • Avoid clutter and add microcopy: Eliminate unnecessary fields or distractions, and use helpful text near inputs (e.g., “We’ll never spam you” or “Enter your work email”) to reassure or guide users.
  • Prioritize accessibility: Use proper HTML labels, focus states, and keyboard navigation. Make sure screen readers can interpret the form, and that color contrast meets WCAG guidelines.

Psychological Triggers and Conversion Boosters

Incorporating psychological principles into your email signup forms can significantly improve conversions. These strategies tap into user motivation, urgency, and trust:

  • Offer incentives: Encourage signups by offering something of value—such as a discount, free eBook, exclusive content, or early access. Be specific about what the user will receive.
  • Use urgency and scarcity: Add countdown timers, limited-time messages, or phrases like “Only available for the next 24 hours” to drive immediate action.
  • Add gamification: Interactive signup forms—such as spin-to-win wheels, mystery offers, or personality quizzes—engage users and create a fun experience that increases form submissions.
  • Display social proof: Reinforce trust by showing subscriber counts (e.g., “Join 10,000+ readers”), testimonials, ratings, or trust badges near your form.
  • Personalize the experience: Ask a simple question to tailor content or segment subscribers. This helps create a sense of relevance and improves email targeting later on.
  • Be transparent about data use: Add short notes or links to your privacy policy to let users know how their data will be handled. Reassurance builds confidence and reduces hesitation.

Building and Embedding Signup Forms

Creating an email signup form is easier than ever, thanks to tools like Formspree that eliminate the need for custom backend infrastructure. With Formspree, you can build forms using plain HTML or React components and have them fully functional within minutes. All you need to do is copy a form template from Formspree’s Forms Library, paste it into your website code, and point the action attribute to your unique Formspree endpoint. This instantly enables secure data collection and form submission handling without requiring server-side logic.

Once your form is embedded, it’s important to customize it to match your site’s branding. Apply your design system’s fonts, colors, and spacing to ensure visual consistency, and consider adding a headline or supporting images to increase appeal. If you’re targeting audiences in regions with data protection laws like GDPR, enabling a double opt-in process (where users confirm their subscription through a follow-up email) helps ensure compliance and maintains the quality of your email list. Before going live, thoroughly test your form on both desktop and mobile to confirm it works as expected, triggers any welcome automations, and looks great across devices. With a well-embedded form and a reliable backend like Formspree, you’re set up for effective, scalable subscriber growth.

Common Pitfalls to Avoid

Avoid these common mistakes when creating and deploying your email signup forms to ensure high conversions, accessibility, and subscriber satisfaction:

  • Asking for too much information up front: Long forms with multiple required fields (name, phone, company, job title, etc.) can scare off potential subscribers. Start with the minimum—usually just an email address—and collect additional information later through follow-ups or segmentation tools.
  • Hiding forms or making them hard to find: Forms buried in footers or behind multiple clicks reduce signup rates. Ensure visibility by placing forms on high-traffic pages, above the fold, or via well-timed popups and slide-ins.
  • Not optimizing for mobile: A form that looks great on desktop but breaks on smaller screens can frustrate users and cause drop-offs. Test mobile responsiveness thoroughly and use mobile-friendly input sizes and tap targets.
  • Neglecting accessibility: Forms that can’t be navigated by keyboard, lack proper labels, or fail to meet color contrast standards alienate users with disabilities. Follow WCAG guidelines and test with screen readers to make sure your form is usable by all.
  • Failing to deliver promised incentives: If you offer a freebie (like a PDF guide or discount code) in exchange for an email, deliver it immediately via automation. Not following through damages trust and hurts your brand reputation.
  • Ignoring form validation and spam protection: Without proper validation, you may collect fake or mistyped emails. Use HTML5 validation, honeypot fields, and Formspree’s built-in spam filtering to keep your list clean.
  • Skipping confirmation or feedback: Always show a success message or redirect users after submission. A silent form that appears to do nothing can confuse users and lead to multiple submissions or abandonment.

Conclusion

Email signup forms are one of the most valuable tools for growing your audience, nurturing leads, and converting website traffic into long-term engagement. Whether you’re running a newsletter, an e-commerce store, or a SaaS product, a well-designed and strategically placed signup form can drive consistent results over time.

To maximize your impact, keep your forms simple, visually clear, and technically sound. Follow UX best practices, leverage psychological triggers to boost conversions, and avoid common mistakes that hurt usability and trust. And when you’re ready to build and deploy your form, using a backend service like Formspree makes the entire process effortless; no server code, no hassle, just a secure, customizable, and high-converting signup experience. Don’t forget to test and iterate regularly to keep improving your results.

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