HTML
Copy
<form action="https://formspree.io/f/{FORM_ID}" class="fs-form" target="_top" method="POST" > <div class="fs-field"> <label class="fs-label" for="full-name">Full Name</label> <input class="fs-input" id="full-name" name="full-name" placeholder="Enter your name (optional)" /> </div> <div class="fs-field"> <label class="fs-label" for="email-address">Email Address</label> <input class="fs-input" id="email-address" name="email-address" placeholder="Enter your email address" required /> </div> <div class="fs-checkbox-field"> <div class="fs-checkbox-wrapper"> <input aria-describedby="newsletter-consent-description" class="fs-checkbox" id="newsletter-consent" name="newsletter-consent" required type="checkbox" value="yes" /> </div> <div> <label class="fs-label" for="newsletter-consent"> Consent to Receive Newsletters </label> <p class="fs-description" id="newsletter-consent-description"> I agree to receive newsletters from [Company Name]. </p> </div> </div> <div class="fs-checkbox-field"> <div class="fs-checkbox-wrapper"> <input aria-describedby="privacy-policy-agreement-description" class="fs-checkbox" id="privacy-policy-agreement" name="privacy-policy-agreement" required type="checkbox" value="yes" /> </div> <div> <label class="fs-label" for="privacy-policy-agreement"> I Agree to the Privacy Policy </label> <p class="fs-description" id="privacy-policy-agreement-description"> I have read and agree to the Privacy Policy. </p> </div> </div> <div class="fs-button-group"> <button class="fs-button" type="submit">Subscribe</button> </div> </form>
Show moreCSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); /** Variables **/ :root { --color-background: #cbd5e1; --color-background-alt: #8ec6ff; --color-border-active: #173db6; --color-border-default: #94a3b8; --color-highlight: #8ec6ff; --color-primary: #144be1; --color-primary-active: #19388f; --color-text-default: #0f172a; --color-text-muted: #475569; --font-family-body: "Inter", sans-serif; } /** Base **/ *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } /** Components **/ .fs-form { display: grid; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; } fieldset { display: grid; margin: 1.5rem 0; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) fieldset { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; } .fs-fieldset-title { color: var(--color-text-default); font-family: var(--font-family-display); font-size: 1.25rem; font-weight: 500; line-height: 1.75rem; margin-bottom: 1.5rem; grid-column: 1 / -1; } .fs-field { display: flex; flex-direction: column; row-gap: 0.375rem; } .fs-label { color: var(--color-text-default); display: block; font-family: var(--font-family-display); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; } .fs-description { color: var(--color-text-muted); display: block; font-size: 0.875rem; line-height: 1.25rem; } .fs-button-group { display: flex; flex-direction: row-reverse; column-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) .fs-button-group { grid-column: 1 / -1; } .fs-button { background-color: var(--color-primary); border-radius: 0.375rem; color: white; cursor: pointer; font-size: 0.875rem; font-weight: 500; line-height: 1rem; padding: 1rem 2rem; transition-duration: 200ms; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .fs-button:hover { background-color: var(--color-primary-active); } .fs-button:focus-visible { background-color: var(--color-primary-active); outline: 3px solid var(--color-highlight); } .fs-input, .fs-select { appearance: none; border-radius: 0.375rem; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; height: 2.5rem; line-height: 1.5rem; outline: none; padding-left: 0.75rem; padding-right: 0.75rem; } .fs-input:focus-visible, .fs-select:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1.5px inset; outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-input::placeholder { color: var(--color-text-muted); } .fs-checkbox-group, .fs-radio-group { display: flex; flex-direction: column; row-gap: 0.5rem; } .fs-checkbox-field, .fs-radio-field { column-gap: 0.5rem; display: flex; } :is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description { margin-top: 0.125rem; } .fs-checkbox-wrapper, .fs-radio-wrapper { align-items: center; display: flex; height: 1.25rem; } .fs-checkbox, .fs-radio { background-color: #fff; border: 1px solid var(--color-text-default); height: 1rem; width: 1rem; } .fs-checkbox { border-radius: 0.25rem; } .fs-radio { border-radius: 100%; } .fs-checkbox:checked, .fs-radio:checked { background-color: var(--color-primary); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; border-color: transparent; } .fs-checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .fs-radio:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .fs-checkbox:focus-visible, .fs-radio:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-select { background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; } .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-switch { background-color: var(--color-background-alt); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e"); background-position: left center; background-repeat: no-repeat; border-radius: 1.5rem; cursor: pointer; height: 1.5rem; transition-duration: 200ms; transition-property: background-color, background-position; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 2.75rem; } .fs-switch:checked { background-color: var(--color-primary); background-position: right center; } .fs-switch:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-textarea { appearance: none; border-radius: 0.375rem; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-primary); font-size: 1rem; line-height: 1.5rem; outline: none; padding: 0.5rem 0.75rem; resize: vertical; } .fs-textarea:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1.5px inset; outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-textarea::placeholder { color: var(--color-text-muted); } /** Utilities **/ .col-span-full { grid-column: 1 / -1; } .fs-textarea::placeholder { color: var(--color-text-muted); } .slider-label-container { display: flex; justify-content: space-between; width: 100%; margin-top: 0.25rem; } .slider-label-text { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; white-space: nowrap; }
Show more
HTML/Tailwind
Copy
<form action="https://formspree.io/f/{FORM_ID}" class="grid gap-y-6" target="_top" method="POST" > <div class="flex flex-col gap-y-1.5"> <label class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]" for="full-name" > Full Name </label> <input class="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]" id="full-name" name="full-name" placeholder="Enter your name (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="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 gap-x-2"> <div class="flex h-5 items-center"> <input aria-describedby="newsletter-consent-description" class="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]" id="newsletter-consent" name="newsletter-consent" required type="checkbox" value="yes" /> </div> <div> <label class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]" for="newsletter-consent" > Consent to Receive Newsletters </label> <p class="mt-0.5 block text-sm text-[--color-text-muted]" id="newsletter-consent-description" > I agree to receive newsletters from [Company Name]. </p> </div> </div> <div class="flex gap-x-2"> <div class="flex h-5 items-center"> <input aria-describedby="privacy-policy-agreement-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="privacy-policy-agreement" name="privacy-policy-agreement" required type="checkbox" value="yes" /> </div> <div> <label class="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]" for="privacy-policy-agreement" > I Agree to the Privacy Policy </label> <p class="mt-0.5 block text-sm text-[--color-text-muted]" id="privacy-policy-agreement-description" > I have read and agree to the Privacy Policy. </p> </div> </div> <div class="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" > Subscribe </button> </div> </form>
Show moreCSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-background: #cbd5e1; --color-background-alt: #8ec6ff; --color-border-active: #173db6; --color-border-default: #94a3b8; --color-highlight: #8ec6ff; --color-primary: #144be1; --color-primary-active: #19388f; --color-text-default: #0f172a; --color-text-muted: #475569; --font-family-body: "Inter", sans-serif; } *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } } @layer components { .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .slider-label-container { @apply flex justify-between w-full mt-1; /* Removed px-2.5 */ } .slider-label-text { @apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */ } } @layer utilities { .bg-caret-down { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); } .bg-checkbox-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .bg-radio-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .bg-switch-thumb { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e"); } }
Show more
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" onSubmit={handleSubmit}> <div className="fs-field"> <label className="fs-label" htmlFor="full-name"> Full Name </label> <input className="fs-input" id="full-name" name="full-name" placeholder="Enter your name (optional)" /> </div> <div className="fs-field"> <label className="fs-label" htmlFor="email-address"> Email Address </label> <input className="fs-input" id="email-address" name="email-address" placeholder="Enter your email address" required /> </div> <div className="fs-checkbox-field"> <div className="fs-checkbox-wrapper"> <input aria-describedby="newsletter-consent-description" className="fs-checkbox" id="newsletter-consent" name="newsletter-consent" required type="checkbox" value="yes" /> </div> <div> <label className="fs-label" htmlFor="newsletter-consent"> Consent to Receive Newsletters </label> <p className="fs-description" id="newsletter-consent-description"> I agree to receive newsletters from [Company Name]. </p> </div> </div> <div className="fs-checkbox-field"> <div className="fs-checkbox-wrapper"> <input aria-describedby="privacy-policy-agreement-description" className="fs-checkbox" id="privacy-policy-agreement" name="privacy-policy-agreement" required type="checkbox" value="yes" /> </div> <div> <label className="fs-label" htmlFor="privacy-policy-agreement"> I Agree to the Privacy Policy </label> <p className="fs-description" id="privacy-policy-agreement-description" > I have read and agree to the Privacy Policy. </p> </div> </div> <div class="fs-button-group"> <button className="fs-button" type="submit"> Subscribe </button> </div> </form> ); }
Show moreCSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); /** Variables **/ :root { --color-background: #cbd5e1; --color-background-alt: #8ec6ff; --color-border-active: #173db6; --color-border-default: #94a3b8; --color-highlight: #8ec6ff; --color-primary: #144be1; --color-primary-active: #19388f; --color-text-default: #0f172a; --color-text-muted: #475569; --font-family-body: "Inter", sans-serif; } /** Base **/ *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } /** Components **/ .fs-form { display: grid; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; } fieldset { display: grid; margin: 1.5rem 0; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) fieldset { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; } .fs-fieldset-title { color: var(--color-text-default); font-family: var(--font-family-display); font-size: 1.25rem; font-weight: 500; line-height: 1.75rem; margin-bottom: 1.5rem; grid-column: 1 / -1; } .fs-field { display: flex; flex-direction: column; row-gap: 0.375rem; } .fs-label { color: var(--color-text-default); display: block; font-family: var(--font-family-display); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; } .fs-description { color: var(--color-text-muted); display: block; font-size: 0.875rem; line-height: 1.25rem; } .fs-button-group { display: flex; flex-direction: row-reverse; column-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) .fs-button-group { grid-column: 1 / -1; } .fs-button { background-color: var(--color-primary); border-radius: 0.375rem; color: white; cursor: pointer; font-size: 0.875rem; font-weight: 500; line-height: 1rem; padding: 1rem 2rem; transition-duration: 200ms; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .fs-button:hover { background-color: var(--color-primary-active); } .fs-button:focus-visible { background-color: var(--color-primary-active); outline: 3px solid var(--color-highlight); } .fs-input, .fs-select { appearance: none; border-radius: 0.375rem; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; height: 2.5rem; line-height: 1.5rem; outline: none; padding-left: 0.75rem; padding-right: 0.75rem; } .fs-input:focus-visible, .fs-select:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1.5px inset; outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-input::placeholder { color: var(--color-text-muted); } .fs-checkbox-group, .fs-radio-group { display: flex; flex-direction: column; row-gap: 0.5rem; } .fs-checkbox-field, .fs-radio-field { column-gap: 0.5rem; display: flex; } :is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description { margin-top: 0.125rem; } .fs-checkbox-wrapper, .fs-radio-wrapper { align-items: center; display: flex; height: 1.25rem; } .fs-checkbox, .fs-radio { background-color: #fff; border: 1px solid var(--color-text-default); height: 1rem; width: 1rem; } .fs-checkbox { border-radius: 0.25rem; } .fs-radio { border-radius: 100%; } .fs-checkbox:checked, .fs-radio:checked { background-color: var(--color-primary); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; border-color: transparent; } .fs-checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .fs-radio:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .fs-checkbox:focus-visible, .fs-radio:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-select { background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.5rem center; background-repeat: no-repeat; background-size: 1.5em 1.5em; padding-right: 2.5rem; } .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-switch { background-color: var(--color-background-alt); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e"); background-position: left center; background-repeat: no-repeat; border-radius: 1.5rem; cursor: pointer; height: 1.5rem; transition-duration: 200ms; transition-property: background-color, background-position; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 2.75rem; } .fs-switch:checked { background-color: var(--color-primary); background-position: right center; } .fs-switch:focus-visible { outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-textarea { appearance: none; border-radius: 0.375rem; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-primary); font-size: 1rem; line-height: 1.5rem; outline: none; padding: 0.5rem 0.75rem; resize: vertical; } .fs-textarea:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1.5px inset; outline: 3px solid var(--color-highlight); outline-offset: 0; } .fs-textarea::placeholder { color: var(--color-text-muted); } /** Utilities **/ .col-span-full { grid-column: 1 / -1; } .fs-textarea::placeholder { color: var(--color-text-muted); } .slider-label-container { display: flex; justify-content: space-between; width: 100%; margin-top: 0.25rem; } .slider-label-text { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; white-space: nowrap; }
Show more
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 gap-y-6" onSubmit={handleSubmit}> <div className="flex flex-col gap-y-1.5"> <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]" htmlFor="full-name" > Full Name </label> <input className="h-10 appearance-none rounded-md border-0 px-3 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] focus-visible:ring-[1.5px] focus-visible:ring-inset focus-visible:ring-[--color-border-active]" id="full-name" name="full-name" placeholder="Enter your name (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="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 gap-x-2"> <div className="flex h-5 items-center"> <input aria-describedby="newsletter-consent-description" className="checked:bg-checkbox-checked h-4 w-4 rounded border border-solid border-[--color-text-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:outline focus-visible:outline-[3px] focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight]" id="newsletter-consent" name="newsletter-consent" required type="checkbox" value="yes" /> </div> <div> <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]" htmlFor="newsletter-consent" > Consent to Receive Newsletters </label> <p className="mt-0.5 block text-sm text-[--color-text-muted]" id="newsletter-consent-description" > I agree to receive newsletters from [Company Name]. </p> </div> </div> <div className="flex gap-x-2"> <div className="flex h-5 items-center"> <input aria-describedby="privacy-policy-agreement-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="privacy-policy-agreement" name="privacy-policy-agreement" required type="checkbox" value="yes" /> </div> <div> <label className="block font-[family-name:--font-family-display] text-sm font-medium text-[--color-text-default]" htmlFor="privacy-policy-agreement" > I Agree to the Privacy Policy </label> <p className="mt-0.5 block text-sm text-[--color-text-muted]" id="privacy-policy-agreement-description" > I have read and agree to the Privacy Policy. </p> </div> </div> <div class="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" > Subscribe </button> </div> </form> ); }
Show moreCSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-background: #cbd5e1; --color-background-alt: #8ec6ff; --color-border-active: #173db6; --color-border-default: #94a3b8; --color-highlight: #8ec6ff; --color-primary: #144be1; --color-primary-active: #19388f; --color-text-default: #0f172a; --color-text-muted: #475569; --font-family-body: "Inter", sans-serif; } *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } } @layer components { .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .slider-label-container { @apply flex justify-between w-full mt-1; /* Removed px-2.5 */ } .slider-label-text { @apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */ } } @layer utilities { .bg-caret-down { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); } .bg-checkbox-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .bg-radio-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .bg-switch-thumb { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e"); } }
Show more
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. Adding a Form to Astro Forms in Angular Adding a Form to Webflow Adding a Form to Wordpress Adding a form to GitBook Adding a form to Shopify React Forms with Gatsby HTML Forms with Eleventy HTML Forms with Jekyll React Forms with NextJSHow 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
Astro
Angular
Webflow
Wordpress
GitBook
Shopify
Gatsby
Eleventy
Jekyll
NextJS
A newsletter signup form is designed to collect email addresses from visitors who want to receive regular updates, blog posts, offers, or news from your organization. It’s one of the most common forms on the web, found on blogs, landing pages, eCommerce stores, and SaaS sites. Whether you’re a solo creator or running a business, a newsletter signup form helps build a direct relationship with your audience outside of social media platforms.
Formspree provides a minimal and customizable newsletter signup form template that you can add to any webpage with ease. It captures user information and forwards submissions securely to your email or third-party tools like Mailchimp or Klaviyo. With Formspree, you skip the hassle of backend code or plugin bloat, allowing you to launch a beautiful newsletter signup experience that fits your brand perfectly—and start growing your list in minutes.
A signup form is an online form used to collect user information for newsletter subscriptions, account creation, waitlists, or event registration. It typically includes fields like name, email address, and password or preferences. With Formspree as the backend, signup forms are easy to embed, send instant email notifications, and let you view responses in real time through the Formspree dashboard.
To create a register form, decide what user details you need—such as name, email, and password—and add those fields to your form layout. Using Formspree, you can build and customize your register form quickly, and receive automatic notifications for each new submission, making user onboarding seamless and efficient.
A signing form is typically used to capture consent, agreement, or formal commitment to something—such as a petition, policy, or legal document. When connected to Formspree, a signing form can collect names, emails, digital signatures, and notify your team instantly for timely follow-up and record keeping.
Joining forms are used to let users express interest or enroll in groups, communities, memberships, or programs. These forms can be embedded easily with Formspree, providing real-time email alerts and immediate access to submitted data through your Formspree dashboard for efficient community or program management.
Clean, focused waiting list form for capturing early interest and leads.
Get codeClean email signup form for capturing subscribers and building engagement.
Get codeClean, efficient Mailchimp signup form for growing your mailing list.
Get code