Form Library Order Forms Tshirt Order Form

Tshirt Order Form

Use this simple HTML t-shirt order form to collect and manage custom orders for sizes, colors, and designs effortlessly.
Preview Preview
Code Code 
        

          HTML HTML
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form fs-layout__2-column"
  target="_top"
  method="POST"
>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="customer-name">Full Name</label>
      <input
        class="fs-input"
        id="customer-name"
        name="customer-name"
        placeholder="Enter your full name"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="customer-email">Email Address</label>
      <input
        class="fs-input"
        id="customer-email"
        name="customer-email"
        placeholder="Enter your email address"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="customer-phone">Phone Number</label>
      <input
        class="fs-input"
        id="customer-phone"
        name="customer-phone"
        placeholder="Enter your phone number"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="delivery-address">Delivery Address</label>
      <textarea
        class="fs-textarea"
        id="delivery-address"
        name="delivery-address"
        placeholder="Enter your delivery address"
        required
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="tshirt-design">T-Shirt Design/Style</label>
      <select
        class="fs-select"
        id="tshirt-design"
        name="tshirt-design"
        required
      >
        <option value="classic">Classic</option>
        <option value="v-neck">V-Neck</option>
        <option value="polo">Polo</option>
        <option value="custom">Custom Design</option>
      </select>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="tshirt-size">Size</label>
      <select class="fs-select" id="tshirt-size" name="tshirt-size" required>
        <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
        <option value="xl">XL</option>
        <option value="xxl">XXL</option>
      </select>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="tshirt-color">Color</label>
      <select class="fs-select" id="tshirt-color" name="tshirt-color" required>
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="black">Black</option>
        <option value="white">White</option>
        <option value="green">Green</option>
      </select>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="tshirt-count">Count</label>
      <select class="fs-select" id="tshirt-count" name="tshirt-count" required>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <p class="fs-description">
        Pick the number of tshirts you&#x27;d like to order
      </p>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="custom-text">Custom Text/Design</label>
      <textarea
        class="fs-textarea"
        id="custom-text"
        name="custom-text"
        placeholder="Enter any custom text or design details (optional)"
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="fs-field">
      <label class="fs-label" for="shipping-method">Shipping Method</label>
      <select
        class="fs-select"
        id="shipping-method"
        name="shipping-method"
        required
      >
        <option value="standard">Standard</option>
        <option value="express">Express</option>
        <option value="pickup">Pickup</option>
      </select>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="delivery-date">
        Preferred Delivery Date
      </label>
      <input
        class="fs-input"
        id="delivery-date"
        name="delivery-date"
        placeholder="Enter your preferred delivery date in MM-DD-YYYY format"
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="delivery-instructions">
        Delivery Instructions
      </label>
      <textarea
        class="fs-textarea"
        id="delivery-instructions"
        name="delivery-instructions"
        placeholder="Enter any special delivery instructions (optional)"
      ></textarea>
    </div>
  </fieldset>
  <div class="fs-checkbox-field">
    <div class="fs-checkbox-wrapper">
      <input
        class="fs-checkbox"
        id="terms-agreement"
        name="terms-agreement"
        required
        type="checkbox"
        value="agree"
      />
    </div>
    <div>
      <label class="fs-label" for="terms-agreement">
        Agree to Terms and Conditions
      </label>
    </div>
  </div>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&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: "Figtree", system-ui, sans-serif;
  --font-family-display: "Poppins", 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;
  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-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-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='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);
}

        
        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>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="customer-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="customer-name"
        name="customer-name"
        placeholder="Enter your full name"
        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="customer-email"
      >
        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="customer-email"
        name="customer-email"
        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="customer-phone"
      >
        Phone Number
      </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="customer-phone"
        name="customer-phone"
        placeholder="Enter your phone number"
        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="delivery-address"
      >
        Delivery Address
      </label>
      <textarea
        class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
        id="delivery-address"
        name="delivery-address"
        placeholder="Enter your delivery address"
        required
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="tshirt-design"
      >
        T-Shirt Design/Style
      </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="tshirt-design"
        name="tshirt-design"
        required
      >
        <option value="classic">Classic</option>
        <option value="v-neck">V-Neck</option>
        <option value="polo">Polo</option>
        <option value="custom">Custom Design</option>
      </select>
    </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="tshirt-size"
      >
        Size
      </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="tshirt-size"
        name="tshirt-size"
        required
      >
        <option value="small">Small</option>
        <option value="medium">Medium</option>
        <option value="large">Large</option>
        <option value="xl">XL</option>
        <option value="xxl">XXL</option>
      </select>
    </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="tshirt-color"
      >
        Color
      </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="tshirt-color"
        name="tshirt-color"
        required
      >
        <option value="red">Red</option>
        <option value="blue">Blue</option>
        <option value="black">Black</option>
        <option value="white">White</option>
        <option value="green">Green</option>
      </select>
    </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="tshirt-count"
      >
        Count
      </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="tshirt-count"
        name="tshirt-count"
        required
      >
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
      </select>
      <p class="block leading-5 text-[--color-text-muted]">
        Pick the number of tshirts you&#x27;d like to order
      </p>
    </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="custom-text"
      >
        Custom Text/Design
      </label>
      <textarea
        class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
        id="custom-text"
        name="custom-text"
        placeholder="Enter any custom text or design details (optional)"
      ></textarea>
    </div>
  </fieldset>
  <fieldset>
    <div class="flex flex-col gap-y-2">
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="shipping-method"
      >
        Shipping Method
      </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="shipping-method"
        name="shipping-method"
        required
      >
        <option value="standard">Standard</option>
        <option value="express">Express</option>
        <option value="pickup">Pickup</option>
      </select>
    </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="delivery-date"
      >
        Preferred Delivery Date
      </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="delivery-date"
        name="delivery-date"
        placeholder="Enter your preferred delivery date in MM-DD-YYYY format"
      />
    </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="delivery-instructions"
      >
        Delivery Instructions
      </label>
      <textarea
        class="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
        id="delivery-instructions"
        name="delivery-instructions"
        placeholder="Enter any special delivery instructions (optional)"
      ></textarea>
    </div>
  </fieldset>
  <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="terms-agreement"
        name="terms-agreement"
        required
        type="checkbox"
        value="agree"
      />
    </div>
    <div>
      <label
        class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
        for="terms-agreement"
      >
        Agree to Terms and Conditions
      </label>
    </div>
  </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"
    >
      Submit
    </button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

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

@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}>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="customer-name">
            Full Name
          </label>
          <input
            className="fs-input"
            id="customer-name"
            name="customer-name"
            placeholder="Enter your full name"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="customer-email">
            Email Address
          </label>
          <input
            className="fs-input"
            id="customer-email"
            name="customer-email"
            placeholder="Enter your email address"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="customer-phone">
            Phone Number
          </label>
          <input
            className="fs-input"
            id="customer-phone"
            name="customer-phone"
            placeholder="Enter your phone number"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="delivery-address">
            Delivery Address
          </label>
          <textarea
            className="fs-textarea"
            id="delivery-address"
            name="delivery-address"
            placeholder="Enter your delivery address"
            required
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="tshirt-design">
            T-Shirt Design/Style
          </label>
          <select
            className="fs-select"
            id="tshirt-design"
            name="tshirt-design"
            required
          >
            <option value="classic">Classic</option>
            <option value="v-neck">V-Neck</option>
            <option value="polo">Polo</option>
            <option value="custom">Custom Design</option>
          </select>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="tshirt-size">
            Size
          </label>
          <select
            className="fs-select"
            id="tshirt-size"
            name="tshirt-size"
            required
          >
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="large">Large</option>
            <option value="xl">XL</option>
            <option value="xxl">XXL</option>
          </select>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="tshirt-color">
            Color
          </label>
          <select
            className="fs-select"
            id="tshirt-color"
            name="tshirt-color"
            required
          >
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="black">Black</option>
            <option value="white">White</option>
            <option value="green">Green</option>
          </select>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="tshirt-count">
            Count
          </label>
          <select
            className="fs-select"
            id="tshirt-count"
            name="tshirt-count"
            required
          >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <p className="fs-description">
            Pick the number of tshirts you&#x27;d like to order
          </p>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="custom-text">
            Custom Text/Design
          </label>
          <textarea
            className="fs-textarea"
            id="custom-text"
            name="custom-text"
            placeholder="Enter any custom text or design details (optional)"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="fs-field">
          <label className="fs-label" htmlFor="shipping-method">
            Shipping Method
          </label>
          <select
            className="fs-select"
            id="shipping-method"
            name="shipping-method"
            required
          >
            <option value="standard">Standard</option>
            <option value="express">Express</option>
            <option value="pickup">Pickup</option>
          </select>
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="delivery-date">
            Preferred Delivery Date
          </label>
          <input
            className="fs-input"
            id="delivery-date"
            name="delivery-date"
            placeholder="Enter your preferred delivery date in MM-DD-YYYY format"
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="delivery-instructions">
            Delivery Instructions
          </label>
          <textarea
            className="fs-textarea"
            id="delivery-instructions"
            name="delivery-instructions"
            placeholder="Enter any special delivery instructions (optional)"
          />
        </div>
      </fieldset>
      <div className="fs-checkbox-field">
        <div className="fs-checkbox-wrapper">
          <input
            className="fs-checkbox"
            id="terms-agreement"
            name="terms-agreement"
            required
            type="checkbox"
            value="agree"
          />
        </div>
        <div>
          <label className="fs-label" htmlFor="terms-agreement">
            Agree to Terms and Conditions
          </label>
        </div>
      </div>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&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: "Figtree", system-ui, sans-serif;
  --font-family-display: "Poppins", 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;
  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-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-field {
  align-items: center;
  column-gap: 0.75rem;
  display: flex;
  justify-content: space-between;
}

.fs-switch {
  background-color: var(--color-background-alt);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='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);
}

        
        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>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="customer-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="customer-name"
            name="customer-name"
            placeholder="Enter your full name"
            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="customer-email"
          >
            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="customer-email"
            name="customer-email"
            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="customer-phone"
          >
            Phone Number
          </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="customer-phone"
            name="customer-phone"
            placeholder="Enter your phone number"
            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="delivery-address"
          >
            Delivery Address
          </label>
          <textarea
            className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
            id="delivery-address"
            name="delivery-address"
            placeholder="Enter your delivery address"
            required
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="tshirt-design"
          >
            T-Shirt Design/Style
          </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="tshirt-design"
            name="tshirt-design"
            required
          >
            <option value="classic">Classic</option>
            <option value="v-neck">V-Neck</option>
            <option value="polo">Polo</option>
            <option value="custom">Custom Design</option>
          </select>
        </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="tshirt-size"
          >
            Size
          </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="tshirt-size"
            name="tshirt-size"
            required
          >
            <option value="small">Small</option>
            <option value="medium">Medium</option>
            <option value="large">Large</option>
            <option value="xl">XL</option>
            <option value="xxl">XXL</option>
          </select>
        </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="tshirt-color"
          >
            Color
          </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="tshirt-color"
            name="tshirt-color"
            required
          >
            <option value="red">Red</option>
            <option value="blue">Blue</option>
            <option value="black">Black</option>
            <option value="white">White</option>
            <option value="green">Green</option>
          </select>
        </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="tshirt-count"
          >
            Count
          </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="tshirt-count"
            name="tshirt-count"
            required
          >
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
          </select>
          <p className="block leading-5 text-[--color-text-muted]">
            Pick the number of tshirts you&#x27;d like to order
          </p>
        </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="custom-text"
          >
            Custom Text/Design
          </label>
          <textarea
            className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
            id="custom-text"
            name="custom-text"
            placeholder="Enter any custom text or design details (optional)"
          />
        </div>
      </fieldset>
      <fieldset>
        <div className="flex flex-col gap-y-2">
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="shipping-method"
          >
            Shipping Method
          </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="shipping-method"
            name="shipping-method"
            required
          >
            <option value="standard">Standard</option>
            <option value="express">Express</option>
            <option value="pickup">Pickup</option>
          </select>
        </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="delivery-date"
          >
            Preferred Delivery Date
          </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="delivery-date"
            name="delivery-date"
            placeholder="Enter your preferred delivery date in MM-DD-YYYY format"
          />
        </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="delivery-instructions"
          >
            Delivery Instructions
          </label>
          <textarea
            className="resize-y appearance-none rounded-xl 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:ring-[--color-border-active]"
            id="delivery-instructions"
            name="delivery-instructions"
            placeholder="Enter any special delivery instructions (optional)"
          />
        </div>
      </fieldset>
      <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="terms-agreement"
            name="terms-agreement"
            required
            type="checkbox"
            value="agree"
          />
        </div>
        <div>
          <label
            className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]"
            htmlFor="terms-agreement"
          >
            Agree to Terms and Conditions
          </label>
        </div>
      </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"
        >
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

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

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

Integration Guides

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

GitBook

GitBook

Adding a form to GitBook

 Shopify

Shopify

Adding a form to Shopify

 Gatsby

Gatsby

React Forms with Gatsby

 Eleventy

Eleventy

HTML Forms with Eleventy

 Jekyll

Jekyll

HTML Forms with Jekyll

 NextJS

NextJS

React Forms with NextJS

What is a T-shirt Order Form?

A tshirt order form is a simple yet powerful tool for businesses, organizations, and events to streamline the ordering process for custom t-shirts. Whether you run a shirt business, manage an event, or handle team apparel, a well-designed order form can save time, reduce errors, and enhance customer experience.

This guide explores the essential components of a tshirt order form, best practices for designing one, and how to make it stand out. Using shirt order form templates, you can create professional, user-friendly forms that simplify the ordering process for both you and your customers.

Understanding the Basics of a Tshirt Order Form

Every shirt order form should include essential details to ensure smooth processing. Key components include:

  • Customer Details: Name, email address, and phone number for communication.
  • Order Details: Shirt size, quantity, color, and other customization options.
  • Shipping Information: Address for delivery and preferred shipping method.
  • Online Payment: Payment options to streamline the checkout process.

These fields form the backbone of a professional t shirt order form and are crucial for reducing confusion and processing errors.

Using shirt order form templates saves time and ensures consistency. Templates can be customized for various needs, whether you’re processing bulk orders for an event or managing school t-shirt campaigns. They provide a professional starting point, reducing the effort needed to create forms from scratch.

Choosing the Right Form Fields for Your Tshirt Order Form

Selecting the correct form fields is essential to create user-friendly and efficient t shirt order forms. Each field should serve a purpose and align with the needs of your customers and your shirt business. Here are some tips to guide your field selection:

  • Customer Details: Always include fields for name, email, and phone number to ensure smooth communication.
  • Order Details: Use dropdowns or radio buttons for shirt size, color, and quantity. Include optional fields for additional instructions or special requests.
  • Customization Options: Add upload fields for logos, shirt design, or artwork, and consider including checkboxes for customization preferences.
  • Shipping and Payment Information: Ensure there are fields for the delivery address, shipping method, and online payment options.

By thoughtfully designing your form fields, you can make the order process intuitive and efficient.

Use an HTML Form Template to Get Started Quickly

If you’re unsure where to begin, consider using one of the HTML form templates available on this page. These templates are designed with best practices in mind, offering a solid foundation for creating your t shirt order form. They include pre-configured fields for shirt size, color, quantity, and payment options, saving you time while ensuring a professional look.

Using a shirt order ****form template allows you to focus on customizing your form to match your brand rather than starting from scratch. It’s a great way to jumpstart your form-building process while maintaining control over the design and functionality.

Why a Custom HTML Form With Formspree is the Best Choice

While templates are an excellent starting point, a custom HTML form gives you unmatched flexibility and scalability. By pairing your custom form with Formspree, you unlock features that elevate your form to a professional level:

  • Flexibility: With custom HTML, you can tailor every element of your form to meet specific business needs, from unique field arrangements to personalized styling.
  • Scalability: Formspree handles backend processing, allowing you to scale effortlessly as your online orders grow.
  • Advanced Features: Formspree supports integrations for online payments, email notifications, and conditional logic, making it perfect for handling complex order forms.
  • Security: Built-in spam protection and encryption ensure customer data remains secure.

By using Formspree with a custom HTML form, you can create a professional-grade solution that grows with your shirt business. Whether you’re managing a few custom team orders or processing large-scale bulk online orders, this approach ensures your form is both robust and adaptable.

Adding Customization Options to Your Tshirt Order Form

Customization is a must for a great tshirt order form. Allow customers to select:

  • Shirt Style and Color: Dropdowns or image selectors for basic or premium t-shirts.
  • Logo Uploads: Provide space for uploading artwork, logos, or team designs.
  • Size Chart Reference: Include a link or image to help customers choose the correct size.

These features cater to both individual and group orders, improving customer satisfaction.

Setting Up Online Payment

Integrating online payment options simplifies the checkout process. Use tools like Stripe, PayPal, or Square to handle payments securely. Online payment options reduce the risk of errors and provide a seamless experience for customers making basic t-shirt orders.

Best Practices for Designing Shirt Order Forms

Keep it Simple and Clear

Simplicity is key when designing your form:

  • Use clear labels for all form fields.
  • Avoid unnecessary questions to prevent form abandonment.
  • Ensure the form is mobile-friendly to accommodate users on different devices.

Incorporate Conditional Logic

Adding conditional logic can improve usability. For instance:

  • Show fields for bulk discounts or group orders only when the user selects a large quantity.
  • Hide unnecessary sections based on user preferences.

This keeps the form clean and user-friendly, especially for complex orders.

Enhancing the Ordering Process with Automation

Automating Order Confirmation and Approval

Automation improves efficiency and enhances the ordering process. Set up automated emails to:

  • Confirm order details.
  • Provide shipping updates.
  • Request approval for custom designs or shirt artwork.

This reduces manual effort and keeps customers informed.

Tracking Orders and Managing Inventory

Using tools like Google Sheets or specialized inventory systems can help track shirt orders and manage stock levels. Real-time tracking ensures you stay updated on inventory and deadlines.

Special Considerations for School, Event, and Team Orders

Handling Bulk and Group Orders

For school t-shirts, team apparel, or event merchandise, cater to large volumes with features like:

  • Tiered pricing for bulk orders.
  • Group discounts for organizations or teams.
  • Optional fields for specifying group sizes or team names.

Promotions and Discounts

Incorporate fields for promotional codes or early-bird discounts to attract more customers. Highlight these features to encourage online t-shirt orders.

Managing Online Orders and Shipping

Handling Online T Orders

Efficiently process online t-shirt orders by:

  • Providing real-time order confirmations.
  • Offering multiple shipping options, such as express delivery or local pickup.
  • Ensuring all details, from shirt size to payment, are captured accurately.

Shipping and Tracking

Include fields for tracking preferences, like shipment tracking links. Clear communication about shipping deadlines helps set customer expectations.

Conclusion

An effective tshirt order form is more than a tool—it’s a gateway to providing excellent customer service. By including essential form fields, customization options, and streamlined payment and shipping methods, you can enhance the ordering process for your customers.

Leverage shirt order form templates and automation to simplify operations, cater to group and bulk orders, and grow your shirt business with ease. A well-designed order form isn’t just functional—it’s a reflection of your brand’s professionalism and commitment to quality.

FAQ

  • What essential information does an order form collect?

    An order form collects essential details such as the customer’s name, contact information, order items, quantities, and payment preferences. With Formspree as the backend, these forms ensure secure data submission and instant email notifications for efficient order processing.

  • How are order forms used by different businesses like online stores, restaurants, and nonprofits?

    Order forms are versatile tools used by online stores to sell products, restaurants for takeout orders, and nonprofits for merchandise sales or donations. When powered by Formspree, these forms streamline the order process and allow real-time access to submission data for better management.

  • What key elements should be included in an order form?

    Key elements of an order form include product or service descriptions, quantity fields, pricing, payment methods, and contact details. Formspree makes it easy to customize these forms while providing seamless backend functionality for managing submissions and notifications.

  • What are the benefits of using order form templates?

    Order form templates save time, reduce errors, and improve the customer experience by offering a structured and professional design. With Formspree, templates can be integrated effortlessly, providing instant email notifications and easy access to submission data via the dashboard.

  • What are five common types of order forms?

    Common types of order forms include product order forms, service request forms, food order forms, wholesale order forms, and donation order forms. Using Formspree as the backend ensures these forms are flexible and secure, catering to the unique needs of various businesses.

  • Why might your order form not need to collect a delivery address?

    An order form might not need a delivery address if the transaction involves digital products, in-store pickup, or services provided online. With Formspree, you can tailor the form fields to collect only the necessary information, ensuring a streamlined and user-friendly experience.

More order Forms