HTML
Copy
<form action="https://formspree.io/f/{FORM_ID}" class="fs-form" target="_top" method="POST" > <fieldset> <legend class="fs-fieldset-title">Subscriber Details</legend> <div class="fs-field"> <label class="fs-label" for="name">Full Name</label> <input class="fs-input" id="name" name="name" placeholder="Enter your name (optional)" /> </div> <div class="fs-field"> <label class="fs-label" for="email">Email Address</label> <input class="fs-input" id="email" name="email" placeholder="Enter your email address" required /> </div> <div class="fs-checkbox-field col-span-full"> <div class="fs-checkbox-wrapper"> <input aria-describedby="_optin-description" class="fs-checkbox" id="_optin" name="_optin" required type="checkbox" value="yes" /> </div> <div> <label class="fs-label" for="_optin">Consent to Receive Emails</label> <p class="fs-description" id="_optin-description"> I agree to receive communications from [Company Name]. </p> </div> </div> </fieldset> <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=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap"); /** Variables **/ :root { --color-background: #e7e7e7; --color-background-alt: #bdb4fe; --color-border-active: #5b26db; --color-border-default: #d1d1d1; --color-highlight: #bdb4fe; --color-primary: #5b26db; --color-primary-active: #401c96; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Manrope", sans-serif; --font-family-display: "Cabin", sans-serif; } /** Base **/ *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } /** Components **/ .fs-form { display: grid; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; } fieldset { display: grid; margin: 1.5rem 0; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) fieldset { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; } .fs-fieldset-title { color: var(--color-text-default); font-family: var(--font-family-display); font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 1.5rem; grid-column: 1 / -1; } .fs-field { display: flex; flex-direction: column; row-gap: 0.5rem; } .fs-label { color: var(--color-text-default); display: block; font-family: var(--font-family-display); font-size: 1rem; line-height: 1.25rem; } .fs-description { color: var(--color-text-muted); display: block; font-size: 1rem; line-height: 1.25rem; } .fs-button-group { display: flex; flex-direction: row-reverse; column-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) .fs-button-group { grid-column: 1 / -1; } .fs-button { background-color: var(--color-primary); border-radius: 9999px; color: white; cursor: pointer; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; padding: 0.75rem 2rem; transition-duration: 200ms; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .fs-button:hover { background-color: var(--color-primary-active); } .fs-button:focus-visible { background-color: var(--color-primary-active); outline: 4px solid var(--color-highlight); } .fs-input, .fs-select { appearance: none; border-radius: 9999px; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; height: 3rem; line-height: 1.5rem; outline: none; padding-left: 1rem; padding-right: 1rem; } .fs-input:focus-visible, .fs-select:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1px inset; } .fs-input::placeholder { color: var(--color-text-muted); } .fs-checkbox-group, .fs-radio-group { display: flex; flex-direction: column; row-gap: 1rem; } .fs-checkbox-field, .fs-radio-field { column-gap: 0.5rem; display: flex; } :is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description { margin-top: 0.25rem; } .fs-checkbox-wrapper, .fs-radio-wrapper { align-items: center; display: flex; height: 1.25rem; } .fs-checkbox, .fs-radio { background-color: #fff; border: 1px solid var(--color-border-default); height: 1.25rem; width: 1.25rem; } .fs-checkbox { border-radius: 0.25rem; } .fs-radio { border-radius: 100%; } .fs-checkbox:checked, .fs-radio:checked { background-color: var(--color-primary); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; border-color: transparent; } .fs-checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .fs-radio:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .fs-checkbox:focus-visible, .fs-radio:focus-visible { border-color: var(--color-border-active); outline: 4px solid var(--color-highlight); outline-offset: 0; } .fs-checkbox:checked:focus-visible, .fs-radio:checked:focus-visible { border-color: transparent; } .fs-select { background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.625em 1.625em; padding-right: 2.875rem; } .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-switch { background-color: var(--color-background-alt); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e"); background-position: left center; background-repeat: no-repeat; border-radius: 1.25rem; cursor: pointer; height: 1.25rem; transition-duration: 200ms; transition-property: background-color, background-position; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 2.5rem; } .fs-switch:checked { background-color: var(--color-primary); background-position: right center; } .fs-switch:focus-visible { outline: 4px solid var(--color-highlight); outline-offset: 0; } .fs-textarea { appearance: none; border-radius: 0.75rem; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; line-height: 1.5rem; outline: none; padding: 0.5rem 0.75rem; resize: vertical; } .fs-textarea:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1px inset; } .fs-textarea::placeholder { color: var(--color-text-muted); } /** Utilities **/ .col-span-full { grid-column: 1 / -1; } .fs-textarea::placeholder { color: var(--color-text-muted); } .slider-label-container { display: flex; justify-content: space-between; width: 100%; margin-top: 0.25rem; } .slider-label-text { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; white-space: nowrap; }
Show more
HTML/Tailwind
Copy
<form action="https://formspree.io/f/{FORM_ID}" class="grid gap-y-6" target="_top" method="POST" > <fieldset> <legend class="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]" > Subscriber Details </legend> <div class="flex flex-col gap-y-2"> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="name" > Full Name </label> <input class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]" id="name" name="name" placeholder="Enter your name (optional)" /> </div> <div class="flex flex-col gap-y-2"> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="email" > Email Address </label> <input class="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]" id="email" name="email" placeholder="Enter your email address" required /> </div> <div class="col-span-full flex gap-x-2"> <div class="flex h-5 items-center"> <input aria-describedby="_optin-description" class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="_optin" name="_optin" required type="checkbox" value="yes" /> </div> <div> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="_optin" > Consent to Receive Emails </label> <p class="mt-1 block leading-5 text-[--color-text-muted]" id="_optin-description" > I agree to receive communications from [Company Name]. </p> </div> </div> </fieldset> <div class="flex flex-row-reverse gap-x-6"> <button class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]" type="submit" > Subscribe </button> </div> </form>
Show moreCSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-background: #e7e7e7; --color-background-alt: #bdb4fe; --color-border-active: #5b26db; --color-border-default: #d1d1d1; --color-highlight: #bdb4fe; --color-primary: #5b26db; --color-primary-active: #401c96; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Manrope", sans-serif; --font-family-display: "Cabin", sans-serif; } *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } } @layer components { .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .slider-label-container { @apply flex justify-between w-full mt-1; /* Removed px-2.5 */ } .slider-label-text { @apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */ } } @layer utilities { .bg-caret-down { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); } .bg-checkbox-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .bg-radio-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .bg-switch-thumb { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e"); } }
Show more
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}> <fieldset> <legend className="fs-fieldset-title">Subscriber Details</legend> <div className="fs-field"> <label className="fs-label" htmlFor="name"> Full Name </label> <input className="fs-input" id="name" name="name" placeholder="Enter your name (optional)" /> </div> <div className="fs-field"> <label className="fs-label" htmlFor="email"> Email Address </label> <input className="fs-input" id="email" name="email" placeholder="Enter your email address" required /> </div> <div className="fs-checkbox-field col-span-full"> <div className="fs-checkbox-wrapper"> <input aria-describedby="_optin-description" className="fs-checkbox" id="_optin" name="_optin" required type="checkbox" value="yes" /> </div> <div> <label className="fs-label" htmlFor="_optin"> Consent to Receive Emails </label> <p className="fs-description" id="_optin-description"> I agree to receive communications from [Company Name]. </p> </div> </div> </fieldset> <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=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap"); /** Variables **/ :root { --color-background: #e7e7e7; --color-background-alt: #bdb4fe; --color-border-active: #5b26db; --color-border-default: #d1d1d1; --color-highlight: #bdb4fe; --color-primary: #5b26db; --color-primary-active: #401c96; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Manrope", sans-serif; --font-family-display: "Cabin", sans-serif; } /** Base **/ *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } /** Components **/ .fs-form { display: grid; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; } fieldset { display: grid; margin: 1.5rem 0; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) fieldset { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; } .fs-fieldset-title { color: var(--color-text-default); font-family: var(--font-family-display); font-size: 1.25rem; line-height: 1.75rem; margin-bottom: 1.5rem; grid-column: 1 / -1; } .fs-field { display: flex; flex-direction: column; row-gap: 0.5rem; } .fs-label { color: var(--color-text-default); display: block; font-family: var(--font-family-display); font-size: 1rem; line-height: 1.25rem; } .fs-description { color: var(--color-text-muted); display: block; font-size: 1rem; line-height: 1.25rem; } .fs-button-group { display: flex; flex-direction: row-reverse; column-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) .fs-button-group { grid-column: 1 / -1; } .fs-button { background-color: var(--color-primary); border-radius: 9999px; color: white; cursor: pointer; font-size: 1.125rem; font-weight: 600; line-height: 1.5rem; padding: 0.75rem 2rem; transition-duration: 200ms; transition-property: background-color; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .fs-button:hover { background-color: var(--color-primary-active); } .fs-button:focus-visible { background-color: var(--color-primary-active); outline: 4px solid var(--color-highlight); } .fs-input, .fs-select { appearance: none; border-radius: 9999px; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; height: 3rem; line-height: 1.5rem; outline: none; padding-left: 1rem; padding-right: 1rem; } .fs-input:focus-visible, .fs-select:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1px inset; } .fs-input::placeholder { color: var(--color-text-muted); } .fs-checkbox-group, .fs-radio-group { display: flex; flex-direction: column; row-gap: 1rem; } .fs-checkbox-field, .fs-radio-field { column-gap: 0.5rem; display: flex; } :is(.fs-checkbox-field, .fs-radio-field) .fs-label + .fs-description { margin-top: 0.25rem; } .fs-checkbox-wrapper, .fs-radio-wrapper { align-items: center; display: flex; height: 1.25rem; } .fs-checkbox, .fs-radio { background-color: #fff; border: 1px solid var(--color-border-default); height: 1.25rem; width: 1.25rem; } .fs-checkbox { border-radius: 0.25rem; } .fs-radio { border-radius: 100%; } .fs-checkbox:checked, .fs-radio:checked { background-color: var(--color-primary); background-position: center; background-repeat: no-repeat; background-size: 100% 100%; border-color: transparent; } .fs-checkbox:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .fs-radio:checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .fs-checkbox:focus-visible, .fs-radio:focus-visible { border-color: var(--color-border-active); outline: 4px solid var(--color-highlight); outline-offset: 0; } .fs-checkbox:checked:focus-visible, .fs-radio:checked:focus-visible { border-color: transparent; } .fs-select { background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 0.75rem center; background-repeat: no-repeat; background-size: 1.625em 1.625em; padding-right: 2.875rem; } .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-switch { background-color: var(--color-background-alt); background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e"); background-position: left center; background-repeat: no-repeat; border-radius: 1.25rem; cursor: pointer; height: 1.25rem; transition-duration: 200ms; transition-property: background-color, background-position; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); width: 2.5rem; } .fs-switch:checked { background-color: var(--color-primary); background-position: right center; } .fs-switch:focus-visible { outline: 4px solid var(--color-highlight); outline-offset: 0; } .fs-textarea { appearance: none; border-radius: 0.75rem; border-width: 0; box-shadow: var(--color-border-default) 0 0 0 1px inset; color: var(--color-text-default); font-size: 1rem; line-height: 1.5rem; outline: none; padding: 0.5rem 0.75rem; resize: vertical; } .fs-textarea:focus-visible { box-shadow: var(--color-border-active) 0 0 0 1px inset; } .fs-textarea::placeholder { color: var(--color-text-muted); } /** Utilities **/ .col-span-full { grid-column: 1 / -1; } .fs-textarea::placeholder { color: var(--color-text-muted); } .slider-label-container { display: flex; justify-content: space-between; width: 100%; margin-top: 0.25rem; } .slider-label-text { font-size: 0.75rem; color: var(--color-text-muted); text-align: center; white-space: nowrap; }
Show more
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}> <fieldset> <legend className="col-span-full mb-6 font-[family-name:--font-family-display] text-xl text-[--color-text-default]"> Subscriber Details </legend> <div className="flex flex-col gap-y-2"> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="name" > Full Name </label> <input className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]" id="name" name="name" placeholder="Enter your name (optional)" /> </div> <div className="flex flex-col gap-y-2"> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="email" > Email Address </label> <input className="h-12 appearance-none rounded-full border-0 px-4 text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]" id="email" name="email" placeholder="Enter your email address" required /> </div> <div className="col-span-full flex gap-x-2"> <div className="flex h-5 items-center"> <input aria-describedby="_optin-description" className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="_optin" name="_optin" required type="checkbox" value="yes" /> </div> <div> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="_optin" > Consent to Receive Emails </label> <p className="mt-1 block leading-5 text-[--color-text-muted]" id="_optin-description" > I agree to receive communications from [Company Name]. </p> </div> </div> </fieldset> <div class="flex flex-row-reverse gap-x-6"> <button className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]" type="submit" > Subscribe </button> </div> </form> ); }
Show moreCSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Cabin:ital,wght@0,400..700;1,400..700&family=Manrope:wght@200..800&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-background: #e7e7e7; --color-background-alt: #bdb4fe; --color-border-active: #5b26db; --color-border-default: #d1d1d1; --color-highlight: #bdb4fe; --color-primary: #5b26db; --color-primary-active: #401c96; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Manrope", sans-serif; --font-family-display: "Cabin", sans-serif; } *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } } @layer components { .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .slider-label-container { @apply flex justify-between w-full mt-1; /* Removed px-2.5 */ } .slider-label-text { @apply text-xs text-gray-500 dark:text-gray-400 text-center whitespace-nowrap; /* text-xs is 0.75rem */ } } @layer utilities { .bg-caret-down { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); } .bg-checkbox-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e"); } .bg-radio-checked { background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e"); } .bg-switch-thumb { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2.75' fill='white'/%3e%3c/svg%3e"); } }
Show more
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
Mailchimp is a popular marketing platform used by businesses to send email newsletters, manage audiences, and automate marketing campaigns. At the core of any Mailchimp email strategy is the signup form: a tool that collects email addresses and other information from users who want to receive updates, offers, or announcements.
Mailchimp signup forms help businesses grow their subscriber base and keep audiences engaged with personalized content. These forms can be embedded into websites, shared as standalone landing pages, or integrated with third-party tools.
Formspree makes this integration flexible by letting you use your own HTML form that submits directly to Mailchimp’s backend via a custom form action URL. This gives you full control over the look and feel of your form; ideal for custom layouts, responsive design, and branded experiences. You avoid embedding third-party scripts while still capturing leads securely and reliably.
Double opt-in is a privacy-focused signup process that requires users to confirm their subscription via email before being added to your list. This two-step process ensures you’re only collecting contacts who truly want to hear from you.
Here’s why it’s a good idea:
In Mailchimp, double opt-in is optional, but it’s highly recommended. If enabled, Mailchimp will send a confirmation email to each subscriber before adding them to your audience.
To enable it:
With double opt-in active, subscribers added through Formspree or any other method will receive a confirmation email automatically.
Mailchimp provides several built-in options for collecting signups, including hosted forms, pop-ups, embedded HTML snippets, and integrations with platforms like WordPress and Shopify. These work well for basic use cases, but they can be limiting when you need custom styling, complex behaviors, or full control over your frontend.
That’s where Formspree comes in. Formspree acts as a flexible form backend that lets you build your own form in plain HTML, React, or any frontend framework, while still sending submissions directly to Mailchimp.
Using Formspree, you can:
Formspree makes it easy to connect a custom HTML form to your Mailchimp audience using a built-in integration. This is especially useful if you’re building your own frontend and want full control over the form’s design and behavior, while still using Mailchimp’s list management and automation features.
To set up a form that adds subscribers to a Mailchimp list, follow the Formspree help guide on Mailchimp.
An important detail to note here is that your form must include a field named email
. This is required by Mailchimp to add the subscriber. Without it, the submission will fail.
You can also include additional fields to enrich the subscriber profile:
name
: To set the first and last names of the list subscriber that will be added.phone
: To set the phone number of the list subscriber that will be added.address
: To set the street address of the list subscriber that will be added._optin
: This is an optional field and only works if you have enabled the Optin checkbox in the Mailchimp plugin settings when configuring the plugin. Adding this field will only trigger the Mailchimp plugin to add a contact to the specified list when the field is checked. If the checkbox is left unchecked, the contact won’t be sent to Mailchimp.group
: To add the subscriber to a Mailchimp group. The value here should be an exact group name, case insensitive. If the group name doesn’t exist, this field will be ignored.interests
: To add the subscriber to group interest. Same as group
, the value here should be an exact group name, case insensitive. If the group name doesn’t exist, this field will be ignored.tags
: To make the subscriber with tagsIf you maintain additional merge fields on your contact list, Formspree will attempt to match the merge fields. You can read more about how to set up custom merge tags on the Mailchimp documentation.
You can use the HTML form on this page to get started quickly. It has the email
, name
, and _optin
fields configured correctly.
Creating a signup form is only the first step; optimizing it for conversions is key to growing your audience efficiently. A well-designed form paired with strong backend support from Formspree and Mailchimp can significantly boost both the quantity and quality of your leads.
With Formspree handling form submissions, you gain access to built-in spam filters, field validation, and reCAPTCHA support. This ensures you receive real, high-quality leads instead of bot traffic or junk data; improving the deliverability of your Mailchimp emails.
Track and compare different form variants to see which design or placement performs best. While Mailchimp provides campaign-level reporting, Formspree offers per-form submission analytics and conversion metrics. You can monitor trends and tweak forms for better performance over time.
Using responsive templates from Formspree’s forms library ensures your signup forms look great and work properly on all screen sizes. These templates are built with accessibility in mind, making them keyboard-friendly and screen-reader compatible by default, expanding your reach to more users.
Formspree’s forms library offers a powerful way to enhance your Mailchimp signup forms by providing pre-built, customizable templates for common use cases. Whether you need a newsletter signup form, a lead capture form, or an event registration form, the library makes it easy to launch professional-looking forms that are fully compatible with Mailchimp. These templates are optimized for conversion and can be embedded into any website or landing page, helping you grow your email list faster.
In addition to templates, Formspree supports deep integrations with dozens of tools beyond Mailchimp. You can route form submissions to CRMs like Salesforce, HubSpot, or Pipedrive, or send new leads to productivity apps such as Google Sheets, Notion, or Trello. Formspree also connects with marketing tools like Klaviyo, ConvertKit, and MailerLite, making it easy to sync your subscriber data across all platforms. These integrations allow your Mailchimp signup form to become the central point in a broader marketing and automation workflow.
With Formspree’s built-in automation features, you can set up auto-responses, notify team members in Slack, Telegram, or Discord, and trigger webhooks for custom workflows. You’ll also gain access to detailed submission analytics and spam filtering, ensuring high-quality signups. When used with Mailchimp, this combination gives you full visibility into your form’s performance and how well your campaigns engage your audience post-signup.
To boost reach, you can even create custom thank-you pages that encourage social sharing or incentivize referrals. By combining Formspree’s form-building capabilities with Mailchimp’s email marketing tools, you get a flexible, scalable system for acquiring and nurturing leads. Whether you’re a startup launching your first campaign or a growing business optimizing conversions, a Formspree-powered Mailchimp signup form can be a high-impact addition to your marketing stack.
Mailchimp signup forms are a reliable and popular way to collect email subscribers. While Mailchimp’s built-in forms are functional, using Formspree gives you full control over form layout and behavior, ideal for static sites or modern frontend frameworks.
Double opt-in is optional in Mailchimp, but highly recommended to improve list quality. When enabled, it works seamlessly with forms built using Formspree. All you need to do is configure your form to point to the right Mailchimp action URL, and Mailchimp will handle confirmations and list management from there.
Ready to start? Set up your Formspree + Mailchimp integration.
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.