Shipping Request Form
Add this minimal HTML shipping request form to your website to simplify how customers or partners submit shipping instructions or requests.
Preview
Code
HTML
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="requestor-name">Requestor Name</label>
<input
class="fs-input"
id="requestor-name"
name="requestor-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"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="department-team">Department / Team</label>
<input
class="fs-input"
id="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Items to Ship</legend>
<div class="fs-field col-span-full">
<label class="fs-label" for="items-to-ship">Item(s) to be Shipped</label>
<textarea
class="fs-textarea"
id="items-to-ship"
name="items-to-ship"
placeholder="List items with description and quantity"
required
></textarea>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Pickup Location</legend>
<div class="fs-field">
<label class="fs-label" for="pickup-address-line1">
Street Address Line 1
</label>
<input
class="fs-input"
id="pickup-address-line1"
name="pickup-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="pickup-address-line2">
Street Address Line 2
</label>
<input
class="fs-input"
id="pickup-address-line2"
name="pickup-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="pickup-city">City</label>
<input
class="fs-input"
id="pickup-city"
name="pickup-city"
placeholder="City"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="pickup-state">
State / Province / Region
</label>
<input
class="fs-input"
id="pickup-state"
name="pickup-state"
placeholder="State, province, or region"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="pickup-postal-code">Postal / ZIP Code</label>
<input
class="fs-input"
id="pickup-postal-code"
name="pickup-postal-code"
placeholder="Postal code or ZIP code"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="pickup-country">Country</label>
<input
class="fs-input"
id="pickup-country"
name="pickup-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Destination Address</legend>
<div class="fs-field">
<label class="fs-label" for="destination-address-line1">
Street Address Line 1
</label>
<input
class="fs-input"
id="destination-address-line1"
name="destination-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="destination-address-line2">
Street Address Line 2
</label>
<input
class="fs-input"
id="destination-address-line2"
name="destination-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div class="fs-field">
<label class="fs-label" for="destination-city">City</label>
<input
class="fs-input"
id="destination-city"
name="destination-city"
placeholder="City"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="destination-state">
State / Province / Region
</label>
<input
class="fs-input"
id="destination-state"
name="destination-state"
placeholder="State, province, or region"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="destination-postal-code">
Postal / ZIP Code
</label>
<input
class="fs-input"
id="destination-postal-code"
name="destination-postal-code"
placeholder="Postal code or ZIP code"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="destination-country">Country</label>
<input
class="fs-input"
id="destination-country"
name="destination-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend class="fs-fieldset-title">Shipping Preferences</legend>
<div class="fs-field">
<label class="fs-label" for="shipping-method">
Preferred 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="overnight">Overnight</option>
<option value="freight">Freight</option>
</select>
</div>
<div class="fs-field">
<label class="fs-label" for="carrier-preference">
Carrier Preference
</label>
<select
class="fs-select"
id="carrier-preference"
name="carrier-preference"
>
<option value="ups">UPS</option>
<option value="fedex">FedEx</option>
<option value="dhl">DHL</option>
<option value="other">Other</option>
</select>
</div>
<div class="fs-field">
<label class="fs-label" for="package-details">
Package Dimensions and Weight
</label>
<input
class="fs-input"
id="package-details"
name="package-details"
placeholder="Enter dimensions (LxWxH) and weight"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="declared-value">
Declared Value (for Insurance)
</label>
<input
class="fs-input"
id="declared-value"
name="declared-value"
placeholder="Enter declared value (optional)"
/>
</div>
<div class="fs-field col-span-full">
<label class="fs-label" for="special-handling">
Special Handling Instructions
</label>
<textarea
class="fs-textarea"
id="special-handling"
name="special-handling"
placeholder="Fragile, temperature-sensitive, etc."
></textarea>
</div>
<div class="fs-field">
<label class="fs-label" for="requested-ship-date">
Requested Ship Date
</label>
<input
class="fs-input"
id="requested-ship-date"
name="requested-ship-date"
placeholder="Enter required ship date (YYYY-MM-DD)"
required
/>
</div>
<div class="fs-field">
<label class="fs-label" for="delivery-deadline">Delivery Deadline</label>
<input
class="fs-input"
id="delivery-deadline"
name="delivery-deadline"
placeholder="Select delivery deadline (optional)"
/>
</div>
<div class="fs-field col-span-full">
<label class="fs-label" for="supporting-documents">
Supporting Documents (e.g., Shipping Labels, Invoices)
</label>
<textarea
class="fs-textarea"
id="supporting-documents"
name="supporting-documents"
placeholder="Add a link after uploading to Google Drive, Dropbox, etc."
></textarea>
</div>
<div class="fs-field col-span-full">
<label class="fs-label" for="additional-notes">
Additional Notes or Special Instructions
</label>
<textarea
class="fs-textarea"
id="additional-notes"
name="additional-notes"
placeholder="Enter any special notes or extra instructions"
></textarea>
</div>
</fieldset>
<div class="fs-button-group">
<button class="fs-button" type="submit">Submit</button>
</div>
</form>
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #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: "Work Sans", system-ui, sans-serif;
--font-family-display: "IBM Plex Serif", system-ui, sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
margin: 1.5rem 0;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 2.5rem;
line-height: 1.5rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-text-default);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
/** Utilities **/
.col-span-full {
grid-column: 1 / -1;
}
Show more
HTML/Tailwind
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="requestor-name"
>
Requestor 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="requestor-name"
name="requestor-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"
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="department-team"
>
Department / Team
</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="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Items to Ship
</legend>
<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="items-to-ship"
>
Item(s) to be Shipped
</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="items-to-ship"
name="items-to-ship"
placeholder="List items with description and quantity"
required
></textarea>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Pickup Location
</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="pickup-address-line1"
>
Street Address Line 1
</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="pickup-address-line1"
name="pickup-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
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="pickup-address-line2"
>
Street Address Line 2
</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="pickup-address-line2"
name="pickup-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="pickup-city"
>
City
</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="pickup-city"
name="pickup-city"
placeholder="City"
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="pickup-state"
>
State / Province / Region
</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="pickup-state"
name="pickup-state"
placeholder="State, province, or region"
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="pickup-postal-code"
>
Postal / ZIP Code
</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="pickup-postal-code"
name="pickup-postal-code"
placeholder="Postal code or ZIP code"
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="pickup-country"
>
Country
</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="pickup-country"
name="pickup-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Destination Address
</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="destination-address-line1"
>
Street Address Line 1
</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="destination-address-line1"
name="destination-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
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="destination-address-line2"
>
Street Address Line 2
</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="destination-address-line2"
name="destination-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div class="flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="destination-city"
>
City
</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="destination-city"
name="destination-city"
placeholder="City"
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="destination-state"
>
State / Province / Region
</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="destination-state"
name="destination-state"
placeholder="State, province, or region"
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="destination-postal-code"
>
Postal / ZIP Code
</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="destination-postal-code"
name="destination-postal-code"
placeholder="Postal code or ZIP code"
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="destination-country"
>
Country
</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="destination-country"
name="destination-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend
class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]"
>
Shipping Preferences
</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="shipping-method"
>
Preferred Shipping 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="shipping-method"
name="shipping-method"
required
>
<option value="standard">Standard</option>
<option value="express">Express</option>
<option value="overnight">Overnight</option>
<option value="freight">Freight</option>
</select>
</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="carrier-preference"
>
Carrier Preference
</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="carrier-preference"
name="carrier-preference"
>
<option value="ups">UPS</option>
<option value="fedex">FedEx</option>
<option value="dhl">DHL</option>
<option value="other">Other</option>
</select>
</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="package-details"
>
Package Dimensions and Weight
</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="package-details"
name="package-details"
placeholder="Enter dimensions (LxWxH) and weight"
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="declared-value"
>
Declared Value (for Insurance)
</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="declared-value"
name="declared-value"
placeholder="Enter declared value (optional)"
/>
</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="special-handling"
>
Special Handling 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="special-handling"
name="special-handling"
placeholder="Fragile, temperature-sensitive, etc."
></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="requested-ship-date"
>
Requested Ship Date
</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="requested-ship-date"
name="requested-ship-date"
placeholder="Enter required ship date (YYYY-MM-DD)"
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="delivery-deadline"
>
Delivery Deadline
</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="delivery-deadline"
name="delivery-deadline"
placeholder="Select delivery deadline (optional)"
/>
</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 (e.g., Shipping Labels, Invoices)
</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="supporting-documents"
name="supporting-documents"
placeholder="Add a link after uploading to Google Drive, Dropbox, etc."
></textarea>
</div>
<div class="col-span-full flex flex-col gap-y-1.5">
<label
class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
for="additional-notes"
>
Additional Notes 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-notes"
name="additional-notes"
placeholder="Enter any special notes or extra instructions"
></textarea>
</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
Copy
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #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: "Work Sans", system-ui, sans-serif;
--font-family-display: "IBM Plex Serif", system-ui, sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@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
React
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="requestor-name">
Requestor Name
</label>
<input
className="fs-input"
id="requestor-name"
name="requestor-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"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="department-team">
Department / Team
</label>
<input
className="fs-input"
id="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Items to Ship</legend>
<div className="fs-field col-span-full">
<label className="fs-label" htmlFor="items-to-ship">
Item(s) to be Shipped
</label>
<textarea
className="fs-textarea"
id="items-to-ship"
name="items-to-ship"
placeholder="List items with description and quantity"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Pickup Location</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="pickup-address-line1">
Street Address Line 1
</label>
<input
className="fs-input"
id="pickup-address-line1"
name="pickup-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="pickup-address-line2">
Street Address Line 2
</label>
<input
className="fs-input"
id="pickup-address-line2"
name="pickup-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="pickup-city">
City
</label>
<input
className="fs-input"
id="pickup-city"
name="pickup-city"
placeholder="City"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="pickup-state">
State / Province / Region
</label>
<input
className="fs-input"
id="pickup-state"
name="pickup-state"
placeholder="State, province, or region"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="pickup-postal-code">
Postal / ZIP Code
</label>
<input
className="fs-input"
id="pickup-postal-code"
name="pickup-postal-code"
placeholder="Postal code or ZIP code"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="pickup-country">
Country
</label>
<input
className="fs-input"
id="pickup-country"
name="pickup-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Destination Address</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="destination-address-line1">
Street Address Line 1
</label>
<input
className="fs-input"
id="destination-address-line1"
name="destination-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="destination-address-line2">
Street Address Line 2
</label>
<input
className="fs-input"
id="destination-address-line2"
name="destination-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="destination-city">
City
</label>
<input
className="fs-input"
id="destination-city"
name="destination-city"
placeholder="City"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="destination-state">
State / Province / Region
</label>
<input
className="fs-input"
id="destination-state"
name="destination-state"
placeholder="State, province, or region"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="destination-postal-code">
Postal / ZIP Code
</label>
<input
className="fs-input"
id="destination-postal-code"
name="destination-postal-code"
placeholder="Postal code or ZIP code"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="destination-country">
Country
</label>
<input
className="fs-input"
id="destination-country"
name="destination-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="fs-fieldset-title">Shipping Preferences</legend>
<div className="fs-field">
<label className="fs-label" htmlFor="shipping-method">
Preferred 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="overnight">Overnight</option>
<option value="freight">Freight</option>
</select>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="carrier-preference">
Carrier Preference
</label>
<select
className="fs-select"
id="carrier-preference"
name="carrier-preference"
>
<option value="ups">UPS</option>
<option value="fedex">FedEx</option>
<option value="dhl">DHL</option>
<option value="other">Other</option>
</select>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="package-details">
Package Dimensions and Weight
</label>
<input
className="fs-input"
id="package-details"
name="package-details"
placeholder="Enter dimensions (LxWxH) and weight"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="declared-value">
Declared Value (for Insurance)
</label>
<input
className="fs-input"
id="declared-value"
name="declared-value"
placeholder="Enter declared value (optional)"
/>
</div>
<div className="fs-field col-span-full">
<label className="fs-label" htmlFor="special-handling">
Special Handling Instructions
</label>
<textarea
className="fs-textarea"
id="special-handling"
name="special-handling"
placeholder="Fragile, temperature-sensitive, etc."
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="requested-ship-date">
Requested Ship Date
</label>
<input
className="fs-input"
id="requested-ship-date"
name="requested-ship-date"
placeholder="Enter required ship date (YYYY-MM-DD)"
required
/>
</div>
<div className="fs-field">
<label className="fs-label" htmlFor="delivery-deadline">
Delivery Deadline
</label>
<input
className="fs-input"
id="delivery-deadline"
name="delivery-deadline"
placeholder="Select delivery deadline (optional)"
/>
</div>
<div className="fs-field col-span-full">
<label className="fs-label" htmlFor="supporting-documents">
Supporting Documents (e.g., Shipping Labels, Invoices)
</label>
<textarea
className="fs-textarea"
id="supporting-documents"
name="supporting-documents"
placeholder="Add a link after uploading to Google Drive, Dropbox, etc."
/>
</div>
<div className="fs-field col-span-full">
<label className="fs-label" htmlFor="additional-notes">
Additional Notes or Special Instructions
</label>
<textarea
className="fs-textarea"
id="additional-notes"
name="additional-notes"
placeholder="Enter any special notes or extra instructions"
/>
</div>
</fieldset>
<div class="fs-button-group">
<button className="fs-button" type="submit">
Submit
</button>
</div>
</form>
);
}
Show more
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
/** Variables **/
:root {
--color-background: #cbd5e1;
--color-background-alt: #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: "Work Sans", system-ui, sans-serif;
--font-family-display: "IBM Plex Serif", system-ui, sans-serif;
}
/** Base **/
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
/** Components **/
.fs-form {
display: grid;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
}
fieldset {
display: grid;
margin: 1.5rem 0;
row-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) fieldset {
column-gap: 1.5rem;
grid-template-columns: 1fr 1fr;
grid-column: 1 / -1;
}
.fs-fieldset-title {
color: var(--color-text-default);
font-family: var(--font-family-display);
font-size: 1.25rem;
font-weight: 500;
line-height: 1.75rem;
margin-bottom: 1.5rem;
grid-column: 1 / -1;
}
.fs-field {
display: flex;
flex-direction: column;
row-gap: 0.375rem;
}
.fs-label {
color: var(--color-text-default);
display: block;
font-family: var(--font-family-display);
font-size: 0.875rem;
font-weight: 500;
line-height: 1.25rem;
}
.fs-description {
color: var(--color-text-muted);
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
}
.fs-button-group {
display: flex;
flex-direction: row-reverse;
column-gap: 1.5rem;
}
.fs-form:where(.fs-layout__2-column) .fs-button-group {
grid-column: 1 / -1;
}
.fs-button {
background-color: var(--color-primary);
border-radius: 0.375rem;
color: white;
cursor: pointer;
font-size: 0.875rem;
font-weight: 500;
line-height: 1rem;
padding: 1rem 2rem;
transition-duration: 200ms;
transition-property: background-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}
.fs-button:hover {
background-color: var(--color-primary-active);
}
.fs-button:focus-visible {
background-color: var(--color-primary-active);
outline: 3px solid var(--color-highlight);
}
.fs-input,
.fs-select {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-text-default);
font-size: 1rem;
height: 2.5rem;
line-height: 1.5rem;
outline: none;
padding-left: 0.75rem;
padding-right: 0.75rem;
}
.fs-input:focus-visible,
.fs-select:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-input::placeholder {
color: var(--color-text-muted);
}
.fs-checkbox-group,
.fs-radio-group {
display: flex;
flex-direction: column;
row-gap: 0.5rem;
}
.fs-checkbox-field,
.fs-radio-field {
column-gap: 0.5rem;
display: flex;
}
:is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description {
margin-top: 0.125rem;
}
.fs-checkbox-wrapper,
.fs-radio-wrapper {
align-items: center;
display: flex;
height: 1.25rem;
}
.fs-checkbox,
.fs-radio {
background-color: #fff;
border: 1px solid var(--color-text-default);
height: 1rem;
width: 1rem;
}
.fs-checkbox {
border-radius: 0.25rem;
}
.fs-radio {
border-radius: 100%;
}
.fs-checkbox:checked,
.fs-radio:checked {
background-color: var(--color-primary);
background-position: center;
background-repeat: no-repeat;
background-size: 100% 100%;
border-color: transparent;
}
.fs-checkbox:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
}
.fs-radio:checked {
background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
}
.fs-checkbox:focus-visible,
.fs-radio:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-select {
background-color: #fff;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right 0.5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
}
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-switch {
background-color: var(--color-background-alt);
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e");
background-position: left center;
background-repeat: no-repeat;
border-radius: 1.5rem;
cursor: pointer;
height: 1.5rem;
transition-duration: 200ms;
transition-property: background-color, background-position;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
width: 2.75rem;
}
.fs-switch:checked {
background-color: var(--color-primary);
background-position: right center;
}
.fs-switch:focus-visible {
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea {
appearance: none;
border-radius: 0.375rem;
border-width: 0;
box-shadow: var(--color-border-default) 0 0 0 1px inset;
color: var(--color-primary);
font-size: 1rem;
line-height: 1.5rem;
outline: none;
padding: 0.5rem 0.75rem;
resize: vertical;
}
.fs-textarea:focus-visible {
box-shadow: var(--color-border-active) 0 0 0 1.5px inset;
outline: 3px solid var(--color-highlight);
outline-offset: 0;
}
.fs-textarea::placeholder {
color: var(--color-text-muted);
}
/** Utilities **/
.col-span-full {
grid-column: 1 / -1;
}
Show more
React/Tailwind
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="requestor-name"
>
Requestor 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="requestor-name"
name="requestor-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"
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="department-team"
>
Department / Team
</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="department-team"
name="department-team"
placeholder="Enter your department or team"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Items to Ship
</legend>
<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="items-to-ship"
>
Item(s) to be Shipped
</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="items-to-ship"
name="items-to-ship"
placeholder="List items with description and quantity"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Pickup Location
</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="pickup-address-line1"
>
Street Address Line 1
</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="pickup-address-line1"
name="pickup-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
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="pickup-address-line2"
>
Street Address Line 2
</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="pickup-address-line2"
name="pickup-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="pickup-city"
>
City
</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="pickup-city"
name="pickup-city"
placeholder="City"
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="pickup-state"
>
State / Province / Region
</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="pickup-state"
name="pickup-state"
placeholder="State, province, or region"
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="pickup-postal-code"
>
Postal / ZIP Code
</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="pickup-postal-code"
name="pickup-postal-code"
placeholder="Postal code or ZIP code"
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="pickup-country"
>
Country
</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="pickup-country"
name="pickup-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Destination Address
</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="destination-address-line1"
>
Street Address Line 1
</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="destination-address-line1"
name="destination-address-line1"
placeholder="Street address, P.O. box, company name, c/o"
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="destination-address-line2"
>
Street Address Line 2
</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="destination-address-line2"
name="destination-address-line2"
placeholder="Apartment, suite, unit, building, floor, etc. (optional)"
/>
</div>
<div className="flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="destination-city"
>
City
</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="destination-city"
name="destination-city"
placeholder="City"
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="destination-state"
>
State / Province / Region
</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="destination-state"
name="destination-state"
placeholder="State, province, or region"
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="destination-postal-code"
>
Postal / ZIP Code
</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="destination-postal-code"
name="destination-postal-code"
placeholder="Postal code or ZIP code"
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="destination-country"
>
Country
</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="destination-country"
name="destination-country"
placeholder="Country"
required
/>
</div>
</fieldset>
<fieldset>
<legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl font-medium text-[--color-text-default]">
Shipping Preferences
</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="shipping-method"
>
Preferred Shipping 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="shipping-method"
name="shipping-method"
required
>
<option value="standard">Standard</option>
<option value="express">Express</option>
<option value="overnight">Overnight</option>
<option value="freight">Freight</option>
</select>
</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="carrier-preference"
>
Carrier Preference
</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="carrier-preference"
name="carrier-preference"
>
<option value="ups">UPS</option>
<option value="fedex">FedEx</option>
<option value="dhl">DHL</option>
<option value="other">Other</option>
</select>
</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="package-details"
>
Package Dimensions and Weight
</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="package-details"
name="package-details"
placeholder="Enter dimensions (LxWxH) and weight"
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="declared-value"
>
Declared Value (for Insurance)
</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="declared-value"
name="declared-value"
placeholder="Enter declared value (optional)"
/>
</div>
<div className="col-span-full flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="special-handling"
>
Special Handling 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="special-handling"
name="special-handling"
placeholder="Fragile, temperature-sensitive, etc."
/>
</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="requested-ship-date"
>
Requested Ship Date
</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="requested-ship-date"
name="requested-ship-date"
placeholder="Enter required ship date (YYYY-MM-DD)"
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="delivery-deadline"
>
Delivery Deadline
</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="delivery-deadline"
name="delivery-deadline"
placeholder="Select delivery deadline (optional)"
/>
</div>
<div className="col-span-full flex flex-col gap-y-1.5">
<label
className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]"
htmlFor="supporting-documents"
>
Supporting Documents (e.g., Shipping Labels, Invoices)
</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="supporting-documents"
name="supporting-documents"
placeholder="Add a link after uploading to Google Drive, Dropbox, etc."
/>
</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-notes"
>
Additional Notes 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-notes"
name="additional-notes"
placeholder="Enter any special notes or extra instructions"
/>
</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
Copy
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Serif:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap");
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--color-background: #cbd5e1;
--color-background-alt: #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: "Work Sans", system-ui, sans-serif;
--font-family-display: "IBM Plex Serif", system-ui, sans-serif;
}
*,
::before,
::after {
box-sizing: border-box;
}
* {
border: 0;
margin: 0;
padding: 0;
}
body {
-webkit-font-smoothing: antialiased;
font-family: var(--font-family-body);
font-optical-sizing: auto;
font-style: normal;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-feature-settings: inherit;
font-variation-settings: inherit;
font-size: 100%;
font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
[type="checkbox"],
[type="radio"],
[type="range"] {
appearance: none;
flex-shrink: 0;
padding: 0;
user-select: none;
}
[type="checkbox"]:focus,
[type="radio"]:focus,
[type="range"]:focus {
outline: none;
}
}
@layer components {
.fs-slider {
background: transparent;
cursor: pointer;
height: 1.25rem;
width: 100%;
}
.fs-slider::-moz-range-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-webkit-slider-runnable-track {
background-color: var(--color-background);
border-radius: 0.5rem;
height: 0.5rem;
}
.fs-slider::-moz-range-thumb {
background-color: var(--color-primary);
border: none; /* Removes extra border that FF applies */
border-radius: 50%;
height: 1.25rem;
width: 1.25rem;
}
.fs-slider::-webkit-slider-thumb {
appearance: none;
background-color: var(--color-primary);
border-radius: 50%;
height: 1.25rem;
margin-top: -0.375rem; /* Centers thumb on the track */
width: 1.25rem;
}
.fs-slider:focus-visible::-moz-range-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
.fs-slider:focus-visible::-webkit-slider-thumb {
outline: 2px solid var(--color-primary);
outline-offset: 2px;
}
}
@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
Get started in just a few steps. Create a free account and choose New Form. Choose from our growing list of actions, from Airtable to Zendesk and everything in between. Replace with the form endpoint in the code above with the ID from your new form. Don’t forget to include a name attribute for every input. Formspree works great with static websites, but also plays nicely with many hosting platforms like Shopify, Webflow and more. See the guides below. Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.
Sign up for a free Formspree account and create a new form.
Once created, you’ll get a unique form endpoint like
Scroll up and copy the full HTML form code shown above. Don’t forget to replace the
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.
Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.
In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code.
Open the
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.
Contact forms that work out of the box with top website platforms.
How to use this form
Create a form on Formspree
Add actions and validation rules
Update your form's action
<form action="https://formspree.io/f/{form_id}" method="post">Tweak your form's code
Deploy your form to your hosting platform
How to Use This Form in Your Shopify Store
Create a Form on Formspree
https://formspree.io/f/your-form-id.
Copy the HTML from this Library Page
FORM_ID in the action attribute with your actual form ID.
Paste the Form into a Shopify Page
Copy the CSS Styles
Paste the CSS into Your Shopify Theme
assets/base.css file (or your theme’s main CSS file) and paste the copied CSS at the very end.
Save the file.
Preview and Publish
Integration Guides
What is a Shipping Request Form?
A shipping request form enables customers or partners to submit delivery instructions, special shipping needs, or requests for shipment tracking. These forms typically gather customer information, shipping addresses, product details, and any delivery notes. Shipping request forms are particularly useful for businesses dealing with bulk orders, custom orders, or specialized logistics needs where clear communication about delivery is crucial.
Formspree’s shipping request form template can be added to any Shopify site, eCommerce platform, or custom-built store with just a few lines of HTML. Formspree handles the submissions securely and reliably, delivering shipping requests straight to your inbox or connected apps. With spam protection, easy customization, and instant notifications, it’s a great lightweight alternative to building a full customer portal, helping you streamline shipping coordination without the overhead.
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.