Klaviyo Signup Form

Use this simple Klaviyo signup form to send new email subscribers directly into your Klaviyo lists.
Preview Preview
Code Code
        
HTML HTML Copy Copy
<form action="https://formspree.io/f/{FORM_ID}" class="fs-form" target="_top" method="POST" > <div class="fs-field"> <label class="fs-label" for="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="email-consent-description" class="fs-checkbox" id="email-consent" name="email-consent" required type="checkbox" value="yes" /> </div> <div> <label class="fs-label" for="email-consent"> Consent to Receive Emails </label> <p class="fs-description" id="email-consent-description"> I agree to receive communications from [Company Name]. </p> </div> </div> <div class="fs-button-group"> <button class="fs-button" type="submit">Subscribe</button> </div> </form> Show more
CSS CSS Copy Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); /** Variables **/ :root { --color-background: #e7e7e7; --color-background-alt: #ba5ed7; --color-border-active: #a94bc3; --color-border-default: #d1d1d1; --color-highlight: #e2b6f1; --color-primary: #86319a; --color-primary-active: #5e2768; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Figtree", system-ui, sans-serif; --font-family-display: "Poppins", system-ui, sans-serif; } /** Base **/ *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } /** Components **/ .fs-form { display: grid; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; } fieldset { display: grid; margin: 1.5rem 0; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) fieldset { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; } .fs-fieldset-title { color: var(--color-text-default); font-family: var(--font-family-display); font-size: 1.25rem; 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 HTML/Tailwind Copy Copy
<form action="https://formspree.io/f/{FORM_ID}" class="grid gap-y-6" target="_top" method="POST" > <div class="flex flex-col gap-y-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="email-consent-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="email-consent" name="email-consent" required type="checkbox" value="yes" /> </div> <div> <label class="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" for="email-consent" > Consent to Receive Emails </label> <p class="mt-1 block leading-5 text-[--color-text-muted]" id="email-consent-description" > I agree to receive communications from [Company Name]. </p> </div> </div> <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 more
CSS CSS Copy Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-background: #e7e7e7; --color-background-alt: #ba5ed7; --color-border-active: #a94bc3; --color-border-default: #d1d1d1; --color-highlight: #e2b6f1; --color-primary: #86319a; --color-primary-active: #5e2768; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Figtree", system-ui, sans-serif; --font-family-display: "Poppins", system-ui, sans-serif; } *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } } @layer components { .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .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
        
HTML React Copy Copy
// Make sure to run npm install @formspree/react // For more help visit https://formspr.ee/react-help import React from "react"; import { useForm, ValidationError } from "@formspree/react"; export function ExampleForm() { const [state, handleSubmit] = useForm("FORM_ID"); if (state.succeeded) { return <p>Thanks for joining!</p>; } return ( <form className="fs-form" onSubmit={handleSubmit}> <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="email-consent-description" className="fs-checkbox" id="email-consent" name="email-consent" required type="checkbox" value="yes" /> </div> <div> <label className="fs-label" htmlFor="email-consent"> Consent to Receive Emails </label> <p className="fs-description" id="email-consent-description"> I agree to receive communications from [Company Name]. </p> </div> </div> <div class="fs-button-group"> <button className="fs-button" type="submit"> Subscribe </button> </div> </form> ); } Show more
CSS CSS Copy Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); /** Variables **/ :root { --color-background: #e7e7e7; --color-background-alt: #ba5ed7; --color-border-active: #a94bc3; --color-border-default: #d1d1d1; --color-highlight: #e2b6f1; --color-primary: #86319a; --color-primary-active: #5e2768; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Figtree", system-ui, sans-serif; --font-family-display: "Poppins", system-ui, sans-serif; } /** Base **/ *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } /** Components **/ .fs-form { display: grid; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; } fieldset { display: grid; margin: 1.5rem 0; row-gap: 1.5rem; } .fs-form:where(.fs-layout__2-column) fieldset { column-gap: 1.5rem; grid-template-columns: 1fr 1fr; grid-column: 1 / -1; } .fs-fieldset-title { color: var(--color-text-default); font-family: var(--font-family-display); font-size: 1.25rem; 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 React/Tailwind Copy Copy
// Make sure to run npm install @formspree/react // For more help visit https://formspr.ee/react-help import React from "react"; import { useForm, ValidationError } from "@formspree/react"; export function ExampleForm() { const [state, handleSubmit] = useForm("FORM_ID"); if (state.succeeded) { return <p>Thanks for joining!</p>; } return ( <form className="grid 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="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="email-consent-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="email-consent" name="email-consent" required type="checkbox" value="yes" /> </div> <div> <label className="block font-[family-name:--font-family-display] leading-5 text-[--color-text-default]" htmlFor="email-consent" > Consent to Receive Emails </label> <p className="mt-1 block leading-5 text-[--color-text-muted]" id="email-consent-description" > I agree to receive communications from [Company Name]. </p> </div> </div> <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 more
CSS CSS Copy Copy
@import url("https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap"); @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --color-background: #e7e7e7; --color-background-alt: #ba5ed7; --color-border-active: #a94bc3; --color-border-default: #d1d1d1; --color-highlight: #e2b6f1; --color-primary: #86319a; --color-primary-active: #5e2768; --color-text-default: #262626; --color-text-muted: #4f4f4f; --font-family-body: "Figtree", system-ui, sans-serif; --font-family-display: "Poppins", system-ui, sans-serif; } *, ::before, ::after { box-sizing: border-box; } * { border: 0; margin: 0; padding: 0; } body { -webkit-font-smoothing: antialiased; font-family: var(--font-family-body); font-optical-sizing: auto; font-style: normal; } button, input, optgroup, select, textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0; } [type="checkbox"], [type="radio"], [type="range"] { appearance: none; flex-shrink: 0; padding: 0; user-select: none; } [type="checkbox"]:focus, [type="radio"]:focus, [type="range"]:focus { outline: none; } } @layer components { .fs-slider { background: transparent; cursor: pointer; height: 1.25rem; width: 100%; } .fs-slider::-moz-range-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-webkit-slider-runnable-track { background-color: var(--color-background); border-radius: 0.5rem; height: 0.5rem; } .fs-slider::-moz-range-thumb { background-color: var(--color-primary); border: none; /* Removes extra border that FF applies */ border-radius: 50%; height: 1.25rem; width: 1.25rem; } .fs-slider::-webkit-slider-thumb { appearance: none; background-color: var(--color-primary); border-radius: 50%; height: 1.25rem; margin-top: -0.375rem; /* Centers thumb on the track */ width: 1.25rem; } .fs-slider:focus-visible::-moz-range-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .fs-slider:focus-visible::-webkit-slider-thumb { outline: 2px solid var(--color-primary); outline-offset: 2px; } .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

How to use this form

Get started in just a few steps.

  1. Create a form on Formspree

    Create a free account and choose New Form.

  2. Add actions and validation rules

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

  3. Update your form's action

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

  4. Tweak your form's code

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

  5. Deploy your form to your hosting platform

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

How to Use This Form in Your Shopify Store

Follow these steps to copy and paste this form into your Shopify theme and get it working in minutes.

  1. Create a Form on Formspree

    Sign up for a free Formspree account and create a new form. Once created, you’ll get a unique form endpoint like https://formspree.io/f/your-form-id.

  2. Copy the HTML from this Library Page

    Scroll up and copy the full HTML form code shown above. Don’t forget to replace the FORM_ID in the action attribute with your actual form ID.

  3. Paste the Form into a Shopify Page

    Go to your Shopify Admin and navigate to Online Store > Themes > Customize. Select the page where you want the form to appear, then add a new Custom Liquid section. Paste the copied HTML into the Custom Liquid field and save.

  4. Copy the CSS Styles

    Scroll up and copy the CSS snippet provided on this page. These styles are optimized for the form layout and appearance.

  5. Paste the CSS into Your Shopify Theme

    In your Shopify Admin, go to Online Store > Themes > Actions > Edit Code. Open the assets/base.css file (or your theme’s main CSS file) and paste the copied CSS at the very end. Save the file.

  6. Preview and Publish

    Return to the page where you added the form. You should now see your styled Formspree form live in your Shopify store. Test it out and then hit “Publish” to make it live for customers.

Integration Guides

Contact forms that work out of the box with top website platforms.

Astro

Astro

Adding a Form to Astro

Angular

Angular

Forms in Angular

Webflow

Webflow

Adding a Form to Webflow

Wordpress

Wordpress

Adding a Form to Wordpress

GitBook

GitBook

Adding a form to GitBook

Shopify

Shopify

Adding a form to Shopify

Gatsby

Gatsby

React Forms with Gatsby

Eleventy

Eleventy

HTML Forms with Eleventy

Jekyll

Jekyll

HTML Forms with Jekyll

NextJS

NextJS

React Forms with NextJS

What is a Klaviyo Signup Form?

Klaviyo is a marketing automation platform built for ecommerce businesses, offering powerful tools for email and SMS campaigns. One of the most essential components of a successful email marketing strategy is a signup form, used to collect email addresses from customers and visitors who opt in to receive updates, promotions, or newsletters.

Klaviyo signup forms help marketers grow their subscriber lists and personalize engagement based on customer behavior. These forms can be added to any website and are designed to integrate directly with Klaviyo’s list management and automation flows.

Formspree makes this integration easy with a customizable HTML form that sends submissions directly to your inbox or via webhook/Zapier into your Klaviyo list. This allows you to fully control the frontend, styling it with your own brand or framework (like Tailwind or React), while Formspree handles backend processing, spam protection, and optional autoresponders. You get the benefits of a lean, styled form and Klaviyo’s powerful marketing features without having to embed third-party scripts or lose control of your layout.

Why Double Opt-In Matters

Double opt-in is a best practice for building high-quality subscriber lists. It adds an extra confirmation step to the signup process: after a user submits their email address, they receive a confirmation email with a link they must click to complete their subscription.

This additional step serves multiple purposes:

  • Reduces fake or mistyped emails by confirming intent
  • Improves deliverability by ensuring that only valid, engaged recipients are added
  • Protects your sender reputation by minimizing spam complaints and bounce rates

In Klaviyo, double opt-in is enabled by default when you create a new list. That means new subscribers will be sent a confirmation email automatically before they’re added to your list.

If you want to check or change this setting:

  • Navigate to Audience > Lists & Segments in Klaviyo and select the list.
  • Click the Settings tab.
  • Under Consent > Opt-in process, confirm whether double opt-in is enabled or disable it if needed (not recommended for most use cases).

Checking if opt-in is enabled

By keeping double opt-in active, you ensure your subscriber list stays clean, engaged, and compliant.

Alternatives to Klaviyo’s Built-in Forms

While Klaviyo offers its own form builder with pop-ups, embedded forms, and targeting controls, many developers prefer using custom HTML forms or frontend frameworks for greater design flexibility and integration with existing sites.

This is where Formspree comes in. Formspree is a form backend that lets you collect and forward form submissions to services like Klaviyo, without needing to build a server or manage APIs directly.

Using Formspree, you can:

  • Design your form however you like using plain HTML, React, or any frontend framework
  • Send the data securely to Klaviyo via Webhooks
  • Easily integrate double opt-in workflows by using Klaviyo’s list-level settings

Integrating Klaviyo Signup Forms with Formspree

Formspree makes it easy to connect a custom HTML form to your Klaviyo account using a plugin. 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 Klaviyo’s list management and automation tools.

To set up a form that adds subscribers to a Klaviyo list, follow the Formspree help guide on Klaviyo.

An important detail to note here is that your form must have either a field named email or a field named phone. You can also include both if you want, but at least one must be present in the form.

Formspree also allows you to customize the subscriber record by supplying the following optional information via the form:

  • name: Sets the first and last names of the list subscriber that will be added.
  • address: Sets the first address of the list subscriber that will be added.
  • company: Sets the organization information of the list subscriber.
  • zip: Sets the zip number of the contact.
  • city: Sets the city name of the contact.

Every submission collected from this Formspree-Klaviyo integration also adds the form name under the profile Custom Properties. If you choose to include any other fields in the form, they will get added to the contact as custom properties.

You can use the HTML form on this page to get started quickly. It has the email and name fields configured correctly.

Conclusion

Klaviyo signup forms are an essential tool for collecting and managing email subscribers. While Klaviyo’s built-in forms work well for many users, using a custom form with Formspree gives you greater design flexibility and a seamless way to connect to your Klaviyo lists.

Double opt-in is enabled by default in Klaviyo to help ensure high-quality, permission-based email lists. With Formspree, you can easily forward form submissions to Klaviyo and continue using that confirmation flow with no extra backend code.

Ready to get started? Set up your Formspree + Klaviyo integration.

FAQ

  • What is a signup form?

    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.

  • How do you create a register form?

    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.

  • What is a signing form?

    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.

  • What are joining forms?

    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.

More signup Forms