HTML
Copy
<form action="https://formspree.io/f/{FORM_ID}" class="fs-form fs-layout__2-column" 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-field"> <label class="fs-label" for="company-name">Company Name</label> <input class="fs-input" id="company-name" name="company-name" placeholder="Enter your company (optional)" /> </div> <div class="fs-field"> <label class="fs-label" for="job-title">Job Title</label> <input class="fs-input" id="job-title" name="job-title" placeholder="Enter your job title (optional)" /> </div> <div class="fs-field"> <label class="fs-label">Topics of Interest</label> <div class="fs-checkbox-group"> <div class="fs-checkbox-field"> <div class="fs-checkbox-wrapper"> <input class="fs-checkbox" id="topics-of-interest-product-updates" name="topics-of-interest" required type="checkbox" value="product-updates" /> </div> <div> <label class="fs-label" for="topics-of-interest-product-updates"> Product Updates </label> </div> </div> <div class="fs-checkbox-field"> <div class="fs-checkbox-wrapper"> <input class="fs-checkbox" id="topics-of-interest-blog-posts" name="topics-of-interest" required type="checkbox" value="blog-posts" /> </div> <div> <label class="fs-label" for="topics-of-interest-blog-posts"> Blog Posts </label> </div> </div> <div class="fs-checkbox-field"> <div class="fs-checkbox-wrapper"> <input class="fs-checkbox" id="topics-of-interest-promotions" name="topics-of-interest" required type="checkbox" value="promotions" /> </div> <div> <label class="fs-label" for="topics-of-interest-promotions"> Promotions </label> </div> </div> <div class="fs-checkbox-field"> <div class="fs-checkbox-wrapper"> <input class="fs-checkbox" id="topics-of-interest-events" name="topics-of-interest" required type="checkbox" value="events" /> </div> <div> <label class="fs-label" for="topics-of-interest-events">Events</label> </div> </div> </div> </div> <div class="fs-field"> <label class="fs-label" for="email-frequency"> Preferred Email Frequency </label> <select class="fs-select" id="email-frequency" name="email-frequency" required > <option value="weekly">Weekly</option> <option value="monthly">Monthly</option> <option value="occasionally">Occasionally</option> </select> </div> <div class="fs-field col-span-full"> <label class="fs-label" for="referral-source"> How Did You Hear About Us? </label> <input class="fs-input" id="referral-source" name="referral-source" placeholder="Let us know how you found us (optional)" /> </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=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 grid-cols-2 gap-x-6 gap-y-6" target="_top" method="POST" > <div class="flex flex-col gap-y-2"> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="full-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="full-name" name="full-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-address" > 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-address" name="email-address" placeholder="Enter your email address" required /> </div> <div class="flex flex-col gap-y-2"> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="company-name" > Company 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="company-name" name="company-name" placeholder="Enter your company (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="job-title" > Job Title </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="job-title" name="job-title" placeholder="Enter your job title (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]" > Topics of Interest </label> <div class="flex flex-col gap-y-4"> <div class="flex gap-x-2"> <div class="flex h-5 items-center"> <input class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-product-updates" name="topics-of-interest" required type="checkbox" value="product-updates" /> </div> <div> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="topics-of-interest-product-updates" > Product Updates </label> </div> </div> <div class="flex gap-x-2"> <div class="flex h-5 items-center"> <input class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-blog-posts" name="topics-of-interest" required type="checkbox" value="blog-posts" /> </div> <div> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="topics-of-interest-blog-posts" > Blog Posts </label> </div> </div> <div class="flex gap-x-2"> <div class="flex h-5 items-center"> <input class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-promotions" name="topics-of-interest" required type="checkbox" value="promotions" /> </div> <div> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="topics-of-interest-promotions" > Promotions </label> </div> </div> <div class="flex gap-x-2"> <div class="flex h-5 items-center"> <input class="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-events" name="topics-of-interest" required type="checkbox" value="events" /> </div> <div> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="topics-of-interest-events" > Events </label> </div> </div> </div> </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-frequency" > Preferred Email Frequency </label> <select class="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]" id="email-frequency" name="email-frequency" required > <option value="weekly">Weekly</option> <option value="monthly">Monthly</option> <option value="occasionally">Occasionally</option> </select> </div> <div class="col-span-full flex flex-col gap-y-2"> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="referral-source" > How Did You Hear About Us? </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="referral-source" name="referral-source" placeholder="Let us know how you found us (optional)" /> </div> <div class="col-span-full flex flex-row-reverse gap-x-6"> <button class="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]" type="submit" > 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 fs-layout__2-column" 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-field"> <label className="fs-label" htmlFor="company-name"> Company Name </label> <input className="fs-input" id="company-name" name="company-name" placeholder="Enter your company (optional)" /> </div> <div className="fs-field"> <label className="fs-label" htmlFor="job-title"> Job Title </label> <input className="fs-input" id="job-title" name="job-title" placeholder="Enter your job title (optional)" /> </div> <div className="fs-field"> <label className="fs-label">Topics of Interest</label> <div className="fs-checkbox-group"> <div className="fs-checkbox-field"> <div className="fs-checkbox-wrapper"> <input className="fs-checkbox" id="topics-of-interest-product-updates" name="topics-of-interest" required type="checkbox" value="product-updates" /> </div> <div> <label className="fs-label" htmlFor="topics-of-interest-product-updates" > Product Updates </label> </div> </div> <div className="fs-checkbox-field"> <div className="fs-checkbox-wrapper"> <input className="fs-checkbox" id="topics-of-interest-blog-posts" name="topics-of-interest" required type="checkbox" value="blog-posts" /> </div> <div> <label className="fs-label" htmlFor="topics-of-interest-blog-posts" > Blog Posts </label> </div> </div> <div className="fs-checkbox-field"> <div className="fs-checkbox-wrapper"> <input className="fs-checkbox" id="topics-of-interest-promotions" name="topics-of-interest" required type="checkbox" value="promotions" /> </div> <div> <label className="fs-label" htmlFor="topics-of-interest-promotions" > Promotions </label> </div> </div> <div className="fs-checkbox-field"> <div className="fs-checkbox-wrapper"> <input className="fs-checkbox" id="topics-of-interest-events" name="topics-of-interest" required type="checkbox" value="events" /> </div> <div> <label className="fs-label" htmlFor="topics-of-interest-events"> Events </label> </div> </div> </div> </div> <div className="fs-field"> <label className="fs-label" htmlFor="email-frequency"> Preferred Email Frequency </label> <select className="fs-select" id="email-frequency" name="email-frequency" required > <option value="weekly">Weekly</option> <option value="monthly">Monthly</option> <option value="occasionally">Occasionally</option> </select> </div> <div className="fs-field col-span-full"> <label className="fs-label" htmlFor="referral-source"> How Did You Hear About Us? </label> <input className="fs-input" id="referral-source" name="referral-source" placeholder="Let us know how you found us (optional)" /> </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=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 grid-cols-2 gap-x-6 gap-y-6" onSubmit={handleSubmit}> <div className="flex flex-col gap-y-2"> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="full-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="full-name" name="full-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-address" > 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-address" name="email-address" placeholder="Enter your email address" required /> </div> <div className="flex flex-col gap-y-2"> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="company-name" > Company 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="company-name" name="company-name" placeholder="Enter your company (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="job-title" > Job Title </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="job-title" name="job-title" placeholder="Enter your job title (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]"> Topics of Interest </label> <div className="flex flex-col gap-y-4"> <div className="flex gap-x-2"> <div className="flex h-5 items-center"> <input className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-product-updates" name="topics-of-interest" required type="checkbox" value="product-updates" /> </div> <div> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="topics-of-interest-product-updates" > Product Updates </label> </div> </div> <div className="flex gap-x-2"> <div className="flex h-5 items-center"> <input className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-blog-posts" name="topics-of-interest" required type="checkbox" value="blog-posts" /> </div> <div> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="topics-of-interest-blog-posts" > Blog Posts </label> </div> </div> <div className="flex gap-x-2"> <div className="flex h-5 items-center"> <input className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-promotions" name="topics-of-interest" required type="checkbox" value="promotions" /> </div> <div> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="topics-of-interest-promotions" > Promotions </label> </div> </div> <div className="flex gap-x-2"> <div className="flex h-5 items-center"> <input className="checked:bg-checkbox-checked h-5 w-5 rounded border border-solid border-[--color-border-default] bg-white checked:border-transparent checked:bg-[--color-primary] checked:bg-[size:100%_100%] checked:bg-center checked:bg-no-repeat focus-visible:border-[--color-border-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-0 focus-visible:outline-[--color-highlight] checked:focus-visible:border-transparent" id="topics-of-interest-events" name="topics-of-interest" required type="checkbox" value="events" /> </div> <div> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="topics-of-interest-events" > Events </label> </div> </div> </div> </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-frequency" > Preferred Email Frequency </label> <select className="bg-caret-down h-12 appearance-none rounded-full border-0 bg-white bg-[size:1.625em_1.625em] bg-[position:right_0.75rem_center] bg-no-repeat px-4 pe-[2.875rem] text-[--color-text-default] outline-none ring-1 ring-inset ring-[--color-border-default] placeholder:text-[--color-text-muted] focus-visible:ring-[--color-border-active]" id="email-frequency" name="email-frequency" required > <option value="weekly">Weekly</option> <option value="monthly">Monthly</option> <option value="occasionally">Occasionally</option> </select> </div> <div className="col-span-full flex flex-col gap-y-2"> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="referral-source" > How Did You Hear About Us? </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="referral-source" name="referral-source" placeholder="Let us know how you found us (optional)" /> </div> <div class="col-span-full flex flex-row-reverse gap-x-6"> <button className="cursor-pointer rounded-full bg-[--color-primary] px-8 py-3 text-lg font-semibold leading-6 text-white transition-colors duration-200 hover:bg-[--color-primary-active] focus-visible:bg-[--color-primary-active] focus-visible:outline focus-visible:outline-4 focus-visible:outline-[--color-highlight]" type="submit" > 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
An email signup form is a simple yet powerful tool used by websites to collect email addresses from visitors. Typically consisting of one or two input fields—usually for the visitor’s email address and optionally a name—these forms are designed to convert casual browsers into subscribers, customers, or leads. Whether it’s a popup, a widget in the sidebar, or a full-page landing form, the goal is the same: to grow your mailing list and open up a direct line of communication.
Email signup forms play a crucial role in list building and email marketing strategies. They enable businesses to nurture relationships with their audience, promote new content, share exclusive offers, and boost engagement over time. A well-placed, high-converting signup form can be the difference between a one-time visitor and a long-term subscriber.
There are several types of email signup forms, each suited for different placement strategies, user behaviors, and campaign goals:
Placing your email signup form in the right location can significantly improve conversion rates. Here are some high-performing strategies:
A well-designed email signup form doesn’t just look good—it removes friction, guides the user, and encourages conversions. Follow these user experience (UX) best practices to ensure your form is effective and accessible:
Incorporating psychological principles into your email signup forms can significantly improve conversions. These strategies tap into user motivation, urgency, and trust:
Creating an email signup form is easier than ever, thanks to tools like Formspree that eliminate the need for custom backend infrastructure. With Formspree, you can build forms using plain HTML or React components and have them fully functional within minutes. All you need to do is copy a form template from Formspree’s Forms Library, paste it into your website code, and point the action
attribute to your unique Formspree endpoint. This instantly enables secure data collection and form submission handling without requiring server-side logic.
Once your form is embedded, it’s important to customize it to match your site’s branding. Apply your design system’s fonts, colors, and spacing to ensure visual consistency, and consider adding a headline or supporting images to increase appeal. If you’re targeting audiences in regions with data protection laws like GDPR, enabling a double opt-in process (where users confirm their subscription through a follow-up email) helps ensure compliance and maintains the quality of your email list. Before going live, thoroughly test your form on both desktop and mobile to confirm it works as expected, triggers any welcome automations, and looks great across devices. With a well-embedded form and a reliable backend like Formspree, you’re set up for effective, scalable subscriber growth.
Avoid these common mistakes when creating and deploying your email signup forms to ensure high conversions, accessibility, and subscriber satisfaction:
Email signup forms are one of the most valuable tools for growing your audience, nurturing leads, and converting website traffic into long-term engagement. Whether you’re running a newsletter, an e-commerce store, or a SaaS product, a well-designed and strategically placed signup form can drive consistent results over time.
To maximize your impact, keep your forms simple, visually clear, and technically sound. Follow UX best practices, leverage psychological triggers to boost conversions, and avoid common mistakes that hurt usability and trust. And when you’re ready to build and deploy your form, using a backend service like Formspree makes the entire process effortless; no server code, no hassle, just a secure, customizable, and high-converting signup experience. Don’t forget to test and iterate regularly to keep improving your results.
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.