Form Library Request Forms Refund Request Form

Refund Request Form

Add this minimal HTML refund request form to your website to allow customers to submit refund requests without hassle.
Preview Preview
Code Code 
        

          HTML HTML
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="fs-form fs-layout__2-column"
  target="_top"
  method="POST"
>
  <fieldset>
    <legend class="fs-fieldset-title">Requester Information</legend>
    <div class="fs-field">
      <label class="fs-label" for="full-name">Full Name</label>
      <input
        class="fs-input"
        id="full-name"
        name="full-name"
        placeholder="Enter your full name"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="email-address">Email Address</label>
      <input
        class="fs-input"
        id="email-address"
        name="email-address"
        placeholder="Enter your email address"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="phone-number">Phone Number</label>
      <input
        class="fs-input"
        id="phone-number"
        name="phone-number"
        placeholder="Enter your phone number (optional)"
      />
    </div>
  </fieldset>
  <fieldset>
    <legend class="fs-fieldset-title">Order Details</legend>
    <div class="fs-field">
      <label class="fs-label" for="order-id">
        Order Number / Transaction ID
      </label>
      <input
        class="fs-input"
        id="order-id"
        name="order-id"
        placeholder="Enter your order number or transaction ID"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="purchase-date">Date of Purchase</label>
      <input
        class="fs-input"
        id="purchase-date"
        name="purchase-date"
        placeholder="Select the purchase date"
        required
      />
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="item-for-refund">
        Item or Service for Refund
      </label>
      <input
        class="fs-input"
        id="item-for-refund"
        name="item-for-refund"
        placeholder="Enter the item or service name"
        required
      />
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="refund-reason">
        Reason for Refund Request
      </label>
      <textarea
        class="fs-textarea"
        id="refund-reason"
        name="refund-reason"
        placeholder="Describe the reason for requesting a refund"
        required
      ></textarea>
    </div>
    <div class="fs-field">
      <label class="fs-label" for="refund-amount">
        Refund Amount Requested
      </label>
      <input
        class="fs-input"
        id="refund-amount"
        name="refund-amount"
        placeholder="Enter the amount requested for refund"
        required
      />
    </div>
    <div class="fs-field">
      <label class="fs-label" for="refund-method">
        Preferred Refund Method
      </label>
      <select
        class="fs-select"
        id="refund-method"
        name="refund-method"
        required
      >
        <option value="original">Original Payment Method</option>
        <option value="store-credit">Store Credit</option>
        <option value="bank-transfer">Bank Transfer</option>
      </select>
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="supporting-documents">
        Supporting Documents (Invoice, Receipts, Proof of Purchase)
      </label>
      <input
        class="fs-input"
        id="supporting-documents"
        name="supporting-documents"
        placeholder="Add a link after uploading files to Google Drive, Dropbox, etc."
      />
    </div>
  </fieldset>
  <fieldset>
    <legend class="fs-fieldset-title">Additional Information</legend>
    <div class="fs-field">
      <label class="fs-label">Have You Received the Product?</label>
      <div class="fs-radio-group">
        <div class="fs-radio-field">
          <div class="fs-radio-wrapper">
            <input
              class="fs-radio"
              id="received-product-yes"
              name="received-product"
              required
              type="radio"
              value="yes"
            />
          </div>
          <div>
            <label class="fs-label" for="received-product-yes">Yes</label>
          </div>
        </div>
        <div class="fs-radio-field">
          <div class="fs-radio-wrapper">
            <input
              class="fs-radio"
              id="received-product-no"
              name="received-product"
              required
              type="radio"
              value="no"
            />
          </div>
          <div>
            <label class="fs-label" for="received-product-no">No</label>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-field">
      <label class="fs-label">Was the Item Used or Opened?</label>
      <div class="fs-radio-group">
        <div class="fs-radio-field">
          <div class="fs-radio-wrapper">
            <input
              class="fs-radio"
              id="item-used-yes"
              name="item-used"
              type="radio"
              value="yes"
            />
          </div>
          <div>
            <label class="fs-label" for="item-used-yes">Yes</label>
          </div>
        </div>
        <div class="fs-radio-field">
          <div class="fs-radio-wrapper">
            <input
              class="fs-radio"
              id="item-used-no"
              name="item-used"
              type="radio"
              value="no"
            />
          </div>
          <div>
            <label class="fs-label" for="item-used-no">No</label>
          </div>
        </div>
      </div>
    </div>
    <div class="fs-field col-span-full">
      <label class="fs-label" for="additional-comments">
        Additional Comments or Special Instructions
      </label>
      <textarea
        class="fs-textarea"
        id="additional-comments"
        name="additional-comments"
        placeholder="Add any other relevant notes or instructions"
      ></textarea>
    </div>
    <div class="fs-checkbox-field col-span-full">
      <div class="fs-checkbox-wrapper">
        <input
          aria-describedby="acknowledgment-description"
          class="fs-checkbox"
          id="acknowledgment"
          name="acknowledgment"
          required
          type="checkbox"
          value="agreed"
        />
      </div>
      <div>
        <label class="fs-label" for="acknowledgment">
          Acknowledgment of Refund Policy
        </label>
        <p class="fs-description" id="acknowledgment-description">
          I agree to the terms and conditions of the refund policy.
        </p>
      </div>
    </div>
  </fieldset>
  <div class="fs-button-group">
    <button class="fs-button" type="submit">Submit</button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/** Variables **/

:root {
  --color-background: #cbd5e1;
  --color-background-alt: #64748b;
  --color-border-active: #64748b;
  --color-border-default: #94a3b8;
  --color-highlight: #cbd5e1;
  --color-primary: #1e293b;
  --color-primary-active: #090f1d;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Open Sans", sans-serif;
  --font-family-display: "Nunito Sans", sans-serif;
}

/** Base **/

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

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

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

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

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

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

/** Components **/

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

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

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

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

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  grid-column: 1 / -1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/** Utilities **/

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

        
        Show more
      
        

          HTML HTML/Tailwind
          Copy Copy
        

        
        <form
  action="https://formspree.io/f/{FORM_ID}"
  class="grid grid-cols-2 gap-x-6 gap-y-6"
  target="_top"
  method="POST"
>
  <fieldset>
    <legend
      class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
    >
      Requester Information
    </legend>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="full-name"
      >
        Full Name
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="full-name"
        name="full-name"
        placeholder="Enter your full name"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="email-address"
      >
        Email Address
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="email-address"
        name="email-address"
        placeholder="Enter your email address"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="phone-number"
      >
        Phone Number
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="phone-number"
        name="phone-number"
        placeholder="Enter your phone number (optional)"
      />
    </div>
  </fieldset>
  <fieldset>
    <legend
      class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
    >
      Order Details
    </legend>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="order-id"
      >
        Order Number / Transaction ID
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="order-id"
        name="order-id"
        placeholder="Enter your order number or transaction ID"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="purchase-date"
      >
        Date of Purchase
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="purchase-date"
        name="purchase-date"
        placeholder="Select the purchase date"
        required
      />
    </div>
    <div class="col-span-full flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="item-for-refund"
      >
        Item or Service for Refund
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="item-for-refund"
        name="item-for-refund"
        placeholder="Enter the item or service name"
        required
      />
    </div>
    <div class="col-span-full flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="refund-reason"
      >
        Reason for Refund Request
      </label>
      <textarea
        class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="refund-reason"
        name="refund-reason"
        placeholder="Describe the reason for requesting a refund"
        required
      ></textarea>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="refund-amount"
      >
        Refund Amount Requested
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="refund-amount"
        name="refund-amount"
        placeholder="Enter the amount requested for refund"
        required
      />
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="refund-method"
      >
        Preferred Refund Method
      </label>
      <select
        class="bg-caret-down h-10 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="refund-method"
        name="refund-method"
        required
      >
        <option value="original">Original Payment Method</option>
        <option value="store-credit">Store Credit</option>
        <option value="bank-transfer">Bank Transfer</option>
      </select>
    </div>
    <div class="col-span-full flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="supporting-documents"
      >
        Supporting Documents (Invoice, Receipts, Proof of Purchase)
      </label>
      <input
        class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="supporting-documents"
        name="supporting-documents"
        placeholder="Add a link after uploading files to Google Drive, Dropbox, etc."
      />
    </div>
  </fieldset>
  <fieldset>
    <legend
      class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
    >
      Additional Information
    </legend>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
      >
        Have You Received the Product?
      </label>
      <div class="flex flex-col gap-y-2">
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="received-product-yes"
              name="received-product"
              required
              type="radio"
              value="yes"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="received-product-yes"
            >
              Yes
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="received-product-no"
              name="received-product"
              required
              type="radio"
              value="no"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="received-product-no"
            >
              No
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
      >
        Was the Item Used or Opened?
      </label>
      <div class="flex flex-col gap-y-2">
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="item-used-yes"
              name="item-used"
              type="radio"
              value="yes"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="item-used-yes"
            >
              Yes
            </label>
          </div>
        </div>
        <div class="flex gap-x-2">
          <div class="flex h-5 items-center">
            <input
              class="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="item-used-no"
              name="item-used"
              type="radio"
              value="no"
            />
          </div>
          <div>
            <label
              class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              for="item-used-no"
            >
              No
            </label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-span-full flex flex-col gap-y-1.5">
      <label
        class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
        for="additional-comments"
      >
        Additional Comments or Special Instructions
      </label>
      <textarea
        class="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
        id="additional-comments"
        name="additional-comments"
        placeholder="Add any other relevant notes or instructions"
      ></textarea>
    </div>
    <div class="col-span-full flex gap-x-2">
      <div class="flex h-5 items-center">
        <input
          aria-describedby="acknowledgment-description"
          class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
          id="acknowledgment"
          name="acknowledgment"
          required
          type="checkbox"
          value="agreed"
        />
      </div>
      <div>
        <label
          class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
          for="acknowledgment"
        >
          Acknowledgment of Refund Policy
        </label>
        <p
          class="mt-0.5 block text-sm text-[--color-text-muted]"
          id="acknowledgment-description"
        >
          I agree to the terms and conditions of the refund policy.
        </p>
      </div>
    </div>
  </fieldset>
  <div class="col-span-full flex flex-row-reverse gap-x-6">
    <button
      class="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
      type="submit"
    >
      Submit
    </button>
  </div>
</form>

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

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

@layer base {
  :root {
    --color-background: #cbd5e1;
    --color-background-alt: #64748b;
    --color-border-active: #64748b;
    --color-border-default: #94a3b8;
    --color-highlight: #cbd5e1;
    --color-primary: #1e293b;
    --color-primary-active: #090f1d;
    --color-text-default: #0f172a;
    --color-text-muted: #475569;

    --font-family-body: "Open Sans", sans-serif;
    --font-family-display: "Nunito Sans", sans-serif;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        
        Show more
      
        

          HTML React
          Copy Copy
        

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

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

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

  return (
    <form className="fs-form fs-layout__2-column" onSubmit={handleSubmit}>
      <fieldset>
        <legend className="fs-fieldset-title">Requester Information</legend>
        <div className="fs-field">
          <label className="fs-label" htmlFor="full-name">
            Full Name
          </label>
          <input
            className="fs-input"
            id="full-name"
            name="full-name"
            placeholder="Enter your full name"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="email-address">
            Email Address
          </label>
          <input
            className="fs-input"
            id="email-address"
            name="email-address"
            placeholder="Enter your email address"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="phone-number">
            Phone Number
          </label>
          <input
            className="fs-input"
            id="phone-number"
            name="phone-number"
            placeholder="Enter your phone number (optional)"
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="fs-fieldset-title">Order Details</legend>
        <div className="fs-field">
          <label className="fs-label" htmlFor="order-id">
            Order Number / Transaction ID
          </label>
          <input
            className="fs-input"
            id="order-id"
            name="order-id"
            placeholder="Enter your order number or transaction ID"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="purchase-date">
            Date of Purchase
          </label>
          <input
            className="fs-input"
            id="purchase-date"
            name="purchase-date"
            placeholder="Select the purchase date"
            required
          />
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="item-for-refund">
            Item or Service for Refund
          </label>
          <input
            className="fs-input"
            id="item-for-refund"
            name="item-for-refund"
            placeholder="Enter the item or service name"
            required
          />
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="refund-reason">
            Reason for Refund Request
          </label>
          <textarea
            className="fs-textarea"
            id="refund-reason"
            name="refund-reason"
            placeholder="Describe the reason for requesting a refund"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="refund-amount">
            Refund Amount Requested
          </label>
          <input
            className="fs-input"
            id="refund-amount"
            name="refund-amount"
            placeholder="Enter the amount requested for refund"
            required
          />
        </div>
        <div className="fs-field">
          <label className="fs-label" htmlFor="refund-method">
            Preferred Refund Method
          </label>
          <select
            className="fs-select"
            id="refund-method"
            name="refund-method"
            required
          >
            <option value="original">Original Payment Method</option>
            <option value="store-credit">Store Credit</option>
            <option value="bank-transfer">Bank Transfer</option>
          </select>
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="supporting-documents">
            Supporting Documents (Invoice, Receipts, Proof of Purchase)
          </label>
          <input
            className="fs-input"
            id="supporting-documents"
            name="supporting-documents"
            placeholder="Add a link after uploading files to Google Drive, Dropbox, etc."
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="fs-fieldset-title">Additional Information</legend>
        <div className="fs-field">
          <label className="fs-label">Have You Received the Product?</label>
          <div className="fs-radio-group">
            <div className="fs-radio-field">
              <div className="fs-radio-wrapper">
                <input
                  className="fs-radio"
                  id="received-product-yes"
                  name="received-product"
                  required
                  type="radio"
                  value="yes"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="received-product-yes">
                  Yes
                </label>
              </div>
            </div>
            <div className="fs-radio-field">
              <div className="fs-radio-wrapper">
                <input
                  className="fs-radio"
                  id="received-product-no"
                  name="received-product"
                  required
                  type="radio"
                  value="no"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="received-product-no">
                  No
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="fs-field">
          <label className="fs-label">Was the Item Used or Opened?</label>
          <div className="fs-radio-group">
            <div className="fs-radio-field">
              <div className="fs-radio-wrapper">
                <input
                  className="fs-radio"
                  id="item-used-yes"
                  name="item-used"
                  type="radio"
                  value="yes"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="item-used-yes">
                  Yes
                </label>
              </div>
            </div>
            <div className="fs-radio-field">
              <div className="fs-radio-wrapper">
                <input
                  className="fs-radio"
                  id="item-used-no"
                  name="item-used"
                  type="radio"
                  value="no"
                />
              </div>
              <div>
                <label className="fs-label" htmlFor="item-used-no">
                  No
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="fs-field col-span-full">
          <label className="fs-label" htmlFor="additional-comments">
            Additional Comments or Special Instructions
          </label>
          <textarea
            className="fs-textarea"
            id="additional-comments"
            name="additional-comments"
            placeholder="Add any other relevant notes or instructions"
          />
        </div>
        <div className="fs-checkbox-field col-span-full">
          <div className="fs-checkbox-wrapper">
            <input
              aria-describedby="acknowledgment-description"
              className="fs-checkbox"
              id="acknowledgment"
              name="acknowledgment"
              required
              type="checkbox"
              value="agreed"
            />
          </div>
          <div>
            <label className="fs-label" htmlFor="acknowledgment">
              Acknowledgment of Refund Policy
            </label>
            <p className="fs-description" id="acknowledgment-description">
              I agree to the terms and conditions of the refund policy.
            </p>
          </div>
        </div>
      </fieldset>
      <div class="fs-button-group">
        <button className="fs-button" type="submit">
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

/** Variables **/

:root {
  --color-background: #cbd5e1;
  --color-background-alt: #64748b;
  --color-border-active: #64748b;
  --color-border-default: #94a3b8;
  --color-highlight: #cbd5e1;
  --color-primary: #1e293b;
  --color-primary-active: #090f1d;
  --color-text-default: #0f172a;
  --color-text-muted: #475569;

  --font-family-body: "Open Sans", sans-serif;
  --font-family-display: "Nunito Sans", sans-serif;
}

/** Base **/

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

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

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

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

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

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

/** Components **/

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

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

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

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

.fs-fieldset-title {
  color: var(--color-text-default);
  font-family: var(--font-family-display);
  font-size: 1.25rem;
  font-weight: 500;
  line-height: 1.75rem;
  margin-bottom: 1.5rem;
  grid-column: 1 / -1;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/** Utilities **/

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

        
        Show more
      
        

          HTML React/Tailwind
          Copy Copy
        

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

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

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

  return (
    <form className="grid grid-cols-2 gap-x-6 gap-y-6" onSubmit={handleSubmit}>
      <fieldset>
        <legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
          Requester Information
        </legend>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="full-name"
          >
            Full Name
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="full-name"
            name="full-name"
            placeholder="Enter your full name"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="email-address"
          >
            Email Address
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="email-address"
            name="email-address"
            placeholder="Enter your email address"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="phone-number"
          >
            Phone Number
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="phone-number"
            name="phone-number"
            placeholder="Enter your phone number (optional)"
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
          Order Details
        </legend>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="order-id"
          >
            Order Number / Transaction ID
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="order-id"
            name="order-id"
            placeholder="Enter your order number or transaction ID"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="purchase-date"
          >
            Date of Purchase
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="purchase-date"
            name="purchase-date"
            placeholder="Select the purchase date"
            required
          />
        </div>
        <div className="col-span-full flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="item-for-refund"
          >
            Item or Service for Refund
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="item-for-refund"
            name="item-for-refund"
            placeholder="Enter the item or service name"
            required
          />
        </div>
        <div className="col-span-full flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="refund-reason"
          >
            Reason for Refund Request
          </label>
          <textarea
            className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="refund-reason"
            name="refund-reason"
            placeholder="Describe the reason for requesting a refund"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="refund-amount"
          >
            Refund Amount Requested
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="refund-amount"
            name="refund-amount"
            placeholder="Enter the amount requested for refund"
            required
          />
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="refund-method"
          >
            Preferred Refund Method
          </label>
          <select
            className="bg-caret-down h-10 appearance-none rounded-md border-0 bg-white bg-[size:1.5em_1.5em] bg-[position:right_0.5rem_center] bg-no-repeat px-3 pe-10 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="refund-method"
            name="refund-method"
            required
          >
            <option value="original">Original Payment Method</option>
            <option value="store-credit">Store Credit</option>
            <option value="bank-transfer">Bank Transfer</option>
          </select>
        </div>
        <div className="col-span-full flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="supporting-documents"
          >
            Supporting Documents (Invoice, Receipts, Proof of Purchase)
          </label>
          <input
            className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="supporting-documents"
            name="supporting-documents"
            placeholder="Add a link after uploading files to Google Drive, Dropbox, etc."
          />
        </div>
      </fieldset>
      <fieldset>
        <legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
          Additional Information
        </legend>
        <div className="flex flex-col gap-y-1.5">
          <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
            Have You Received the Product?
          </label>
          <div className="flex flex-col gap-y-2">
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="received-product-yes"
                  name="received-product"
                  required
                  type="radio"
                  value="yes"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="received-product-yes"
                >
                  Yes
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="received-product-no"
                  name="received-product"
                  required
                  type="radio"
                  value="no"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="received-product-no"
                >
                  No
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="flex flex-col gap-y-1.5">
          <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]">
            Was the Item Used or Opened?
          </label>
          <div className="flex flex-col gap-y-2">
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="item-used-yes"
                  name="item-used"
                  type="radio"
                  value="yes"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="item-used-yes"
                >
                  Yes
                </label>
              </div>
            </div>
            <div className="flex gap-x-2">
              <div className="flex h-5 items-center">
                <input
                  className="checked:bg-radio-checked h-4 w-4 rounded-full border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
                  id="item-used-no"
                  name="item-used"
                  type="radio"
                  value="no"
                />
              </div>
              <div>
                <label
                  className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
                  htmlFor="item-used-no"
                >
                  No
                </label>
              </div>
            </div>
          </div>
        </div>
        <div className="col-span-full flex flex-col gap-y-1.5">
          <label
            className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
            htmlFor="additional-comments"
          >
            Additional Comments or Special Instructions
          </label>
          <textarea
            className="resize-y appearance-none rounded-md border-0 px-3 py-2 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]"
            id="additional-comments"
            name="additional-comments"
            placeholder="Add any other relevant notes or instructions"
          />
        </div>
        <div className="col-span-full flex gap-x-2">
          <div className="flex h-5 items-center">
            <input
              aria-describedby="acknowledgment-description"
              className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]"
              id="acknowledgment"
              name="acknowledgment"
              required
              type="checkbox"
              value="agreed"
            />
          </div>
          <div>
            <label
              className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
              htmlFor="acknowledgment"
            >
              Acknowledgment of Refund Policy
            </label>
            <p
              className="mt-0.5 block text-sm text-[--color-text-muted]"
              id="acknowledgment-description"
            >
              I agree to the terms and conditions of the refund policy.
            </p>
          </div>
        </div>
      </fieldset>
      <div class="col-span-full flex flex-row-reverse gap-x-6">
        <button
          className="cursor-pointer rounded-md bg-[--color-primary] px-8 py-4 text-sm font-medium leading-4 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-[--color-highlight]"
          type="submit"
        >
          Submit
        </button>
      </div>
    </form>
  );
}

        
        Show more
        

          CSS CSS
          Copy Copy
        

        
        @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap");

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

@layer base {
  :root {
    --color-background: #cbd5e1;
    --color-background-alt: #64748b;
    --color-border-active: #64748b;
    --color-border-default: #94a3b8;
    --color-highlight: #cbd5e1;
    --color-primary: #1e293b;
    --color-primary-active: #090f1d;
    --color-text-default: #0f172a;
    --color-text-muted: #475569;

    --font-family-body: "Open Sans", sans-serif;
    --font-family-display: "Nunito Sans", sans-serif;
  }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

        
        Show more

How to use this form

Get started in just a few steps.

  1. Create a form on Formspree

    Create a free account and choose New Form.

  2. Add actions and validation rules

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

  3. Update your form's action

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

  4. Tweak your form's code

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

  5. Deploy your form to your hosting platform

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

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.

Webflow

Webflow

Adding a Form to Webflow

 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 Refund Request Form?

A refund request form allows customers to easily request a refund for a product or service, providing all necessary details like the purchase date, order number, reason for the refund, and preferred method of resolution. This form is crucial for businesses looking to formalize their refund process, maintain customer satisfaction, and ensure consistent handling of refund cases. Having a dedicated form also minimizes back-and-forth communication and speeds up issue resolution.

Formspree’s refund request form template makes it easy to add a simple, structured form to your website without needing a custom refund management tool. Submissions are securely sent to your email, helping you track, review, and process refund requests quickly and consistently. Plus, with built-in spam protection and easy customization options, you can create a seamless refund experience for your customers while keeping your workflow efficient.

FAQ

  • What is a request form?

    A request form is an online tool used to formally gather specific information or service requests from users. Request forms help streamline communication between users and organizations. When powered by Formspree, request forms are simple to embed, provide instant email notifications, and allow real-time viewing of submissions on the Formspree dashboard.

  • How do you write a request form?

    To write a request form, clearly define the information needed, such as user contact details, type of request, and any necessary additional information. Using Formspree, you can create a fully functional request form that not only collects data efficiently but also notifies your team immediately and stores responses securely for easy access.

  • What is a letter request form?

    A letter request form is used to collect information needed to generate formal letters, such as recommendation letters, employment letters, or verification letters. With Formspree as the backend, these forms can quickly capture necessary details and automatically notify the responsible party upon each submission.

  • What is a customer request form?

    A customer request form allows businesses to gather service, support, or product requests directly from customers in an organized way. Formspree-powered customer request forms simplify data collection, instantly alert your team via email, and make tracking and managing customer needs effortless through the dashboard.

  • What is request form data?

    Request form data refers to the information submitted by users through the request form, including names, contact details, specific requests, and additional notes. With Formspree, this data is securely stored, immediately accessible via your dashboard, and delivered to your inbox through automatic email notifications.

More request Forms

    No pages found with the specified tag.