This guide will walk you through Klaviyo's signup form block types, styling options, and behavior settings to ensure you're set up for success. You can use forms to collect information like email addresses from your browsers, direct browsers to a sale, and more. Signup forms personalize your site experience for your browsers, making your marketing more targeted and human.
New signup forms will not render for browsers using Internet Explorer. Legacy signup forms will continue to render for those using any type of web browser.
Form Editing Tools
The signup form editor holds tools for editing the content, appearance, and behavior of your form. When you first open the signup form editor, you’ll see three sections:
Set the form type (i.e., popup, flyout, or embed), add images, set fonts and colors, etc.
- Targeting & Behaviors
Determine when the form should appear and which visitors should see it
- Add Blocks
Add content to your form, like text blocks or form fields
The Styles section is where you can change the general look and feel of both your form and the success message of your form.
To optimize your form, you'll want to keep a few things in mind. First, you want your form to be clear, without clutter, and have one main point. Additionally, you'll want to make it easy to read and follow. Head to our article on Building Accessible Emails and Forms in Klaviyo to ensure that your form is accessible to all.
Type of Form
At the top of the styles section, you can choose to have your form as a popup, flyout, or embed.
- Popups appear in the middle of the browser's window. A popup is used primarily to interrupt someone's browsing to get them to accomplish a task (e.g., sign up for a newsletter) or to direct them to another part of your website (e.g., new product or sale page).
- Flyouts slide into the browser's window from any direction you select. These, like popups, can be used to get someone to accomplish something or redirect them, but because this is a less intrusive option, you can use it to gather information about your browsers in a passive way.
- Embedded forms appear where you paste the provided code snippet on your site. Embedded forms are the least intrusive signup form and are typically used in the footer of a site to collect email addresses.
If a site visitor sees a popup and clicks outside of the form body, it will disappear. If you’d like your form to display until the visitor fills it out or clicks the form’s exit button, use a flyout.
Background and Side Images
To add custom imagery to your signup form, use a side image or background image. Side images appear to the left or right of your form content, while background images are displayed behind the form fields.
To learn how to add a side image, head to our article How to Add Side Images in Signup Forms.
To add a background image, toggle Background Image on under Form Background, upload your image using the Browse button, and adjust the display settings to your liking.
If you add a side or background image to your form, preview all form steps, including the success message. By default, your form’s height adjusts based on the content and form fields on each step, so some steps may be taller or shorter than others. When your form includes an image, some image content can be cut off on smaller-sized steps. To avoid this, set a minimum height in the Form Type section of the Styles section.
Make sure to use a reasonably high-quality image for best results. As with all images viewed on the web, larger file sizes lead to slower load times. Aim for a file size of 50-100 KB for side images and less than 200 KB for background images to ensure your image looks high-quality without slowing down your site.
After you've decided on the type of form and added a background or side image if desired, review the Styles section to customize the size, font, and other design elements to match your brand style.
Targeting & Behavior
The Targeting & Behavior section is where you can change when the form appears and who should see it. As you set your form behaviors, keep the purpose and audience of your form front of mind.
First, you'll need to answer the question of when you want your signup form to display.
If you select a time delay, you can input the number of seconds someone must be on the page before the form loads. For example, if you input one second, the form will display after someone has been on a site for one second. As a general rule, a customer usually does not spend more than a few seconds on each page. If your message is crucial, make sure to display the message immediately or after 1 second.
If you choose a scroll delay, someone must scroll to a certain point on the page for the form to load; 0% is the top of the webpage, whereas 100% is the bottom.
- Exit Intent
This allows you to target a browser when they are about to navigate away from the page. Exit intent forms are triggered when someone mouses above the top of the viewport on desktop, and if someone scrolls quickly to the top of the page on mobile.
If you choose multiple delays, all must be satisfied in order for the form to appear. For example, if you select exit intent and set the form to display after someone scrolls midway through the page, a visitor needs to complete both actions (scrolling halfway down the page, then showing exit intent) in order for the form to appear.
The display frequency answers the question of how often do you want people to see this popup or flyout after they have already seen this message. For example, if you're asking for birthday information, you may not want a form to appear to the same person until 120 days (or four months) after they originally closed it out.
If you don't want someone to see the form again, select the Don't show again after submit form or go to URL action checkbox. Checking this box will ensure that no one who has ever submitted or done to the form action URL will see the form again, as long as they don't clear the cookies on their web browser. This is useful if you would like to prevent a subscriber from seeing a form if they've already used it to sign up.
This option will only display if your form is an embedded form. This code enables your embed form to display on your site. Paste this code on your site where you would like the form to display. If you're unsure of where to paste the form, head to our article on Where to Paste a Form's Embed Code.
Accordingly, this code is unique to each embedded form. If you would like to add the same embedded form in multiple places on your site, simply paste the code wherever you would like it to appear.
In this section, you have the ability to target your forms based on the device a browser is using. You can choose to target mobile, desktop, or both. This allows you to only display forms on one device or another.
If your form is a popup, choose whether your form should close when a site visitor clicks the area outside the form. If this setting is toggled off for a certain device (i.e., desktop or mobile), the form will only close if the visitor clicks the close icon or fills it out.
Embedded forms cannot be dismissed, and flyout forms can only be dismissed by clicking the X button or filling out the form.
Lastly, you can further target your forms to give browsers a personalized on site experience based on their data within Klaviyo. You can target your form to display only to certain people using the below criteria.
- By Visitor
You can choose to show or not show forms based on the following.
- Show a form to users that do not already have a profile in Klaviyo (i.e., completely new browsers): you may wish to do this if you don't want to target people who have already signed up with another Klaviyo form. For your signup form to correctly identify existing profiles in your account, you need to have Klaviyo web tracking installed on your site. Learn more about Klaviyo web tracking in this guide, or check your site's specific integration documentation for instructions on installing web tracking.
- Show a form to users on specific or multiple lists or segments: if someone is part of a particular list or segment, you can choose to show a form to them. Should you choose multiple lists or segments, a person would need to be in at least one of the groups to be shown the form. For example, if Person A is in Segment X, and you target Segment X and Segment Y, Person A will be shown the form. Additionally, any anonymous browsers will not be shown a form because there is no way of knowing whether or not they are in the chosen list or segment.
- Do not show a form to users on specific or multiple lists or segments: if you select multiple segments or lists, a customer only needs to be in one of the groups to not be shown the form. For instance, if Person B is in List X, and you do not want to show a form to List X and List Y, Person B will not see the form. All untracked visitors will still be shown the form because there is no way of knowing whether or not they are in the chosen list or segment.
Whenever the segment and list membership updates in Klaviyo, any changes will be reflected on your website signup form. Head to our article on How Segments Update for more information.
- By URL
Additionally, you can configure which URLs the form does and does not appear on. You can toggle between "Containing" and "Exactly Matching."
- Containing includes any URL with part of the value you input. For example, if you input "Containing www.klaviyo.com/," this will include www.klaviyo.com/blog, www.klaviyo.com/features, and so on.
- Exactly Matching means that you can target one specific URL. For example, "help.klaviyo.com/The-Signup-Form-Builder" will include only that exact URL, and will not include "https://help.klaviyo.com/The-Signup-Form-Builder".
- By Location
Only show forms to browsers in certain locations. Klaviyo uses each site visitor's IP address to determine whether or not to show a form. This may be useful if, for example, you want to include specific data protection language for people in the EU, but do not want browsers in another region to see the same information.
There are a number of blocks you can drag and drop onto your form to customize its appearance and the type of information you collect from your subscribers. When you select a block, editing options will appear in the left-hand sidebar. Here, you can configure the details of the block, including text and styling. There are two different categories for the several different blocks that you can add to a form.
The first are blocks where you can give your customers information. These blocks inform the viewer of the purpose of your signup form.
- Text Block
Text blocks are where you can configure text content for your form, including a headline, instructions, or other display text. Additionally, you can add an emoji using the emoji picker, or an image by using the image URL input option.
- Button Block
Button blocks allow you to gather information about the user interacting with the form and send that information back to Klaviyo. It can then direct the viewer to a different page on your website, subscribe them to SMS messaging, or close the form altogether.
- Image Block
Image blocks allow you to add an image to your form for your logo or any other type of image you would like to use. You can use the styling tool to add images to match the look and feel of your brand.
While these forms allow you to personalize the on site experience for your customers, you can also choose to use signup forms to gather more information about your customers. Both by themselves and in combination, these additional blocks allow you to pull more information about your customers into Klaviyo.
- Email Input Block
Email input blocks are where users can input their email addresses to sign up for the list connected to the form. A form can only have one email input, and it can only be in the subscribe form, not the success message.
- Phone Number Block
If you add a phone number block, the Collect SMS consent option will automatically be checked, and a block with language to be compliant with TCPA guidelines will be added to your form so your subscribers understand what they are agreeing to. Enable SMS if you are collecting SMS consent and have double opt-in enabled.
- Text Input Block
Text input blocks are used to collect additional information about your subscribers that are then stored in the form of profile properties. This can include answers to a question that will be stored as custom properties, or profile properties that Klaviyo can detect automatically, like first name. You don't want to use text input blocks to gather information that needs to be formatted in a certain way, like email, dates, or preferences you want to use to segment off of later.
- Radio Buttons
Radio buttons are also used to collect additional information about your subscribers. Within a list of pre-defined radio buttons, subscribers can only select one option. These are useful for collecting information like gender or age range.
- Multi Checkboxes
Multi Checkboxes are used to collect additional information about your subscribers. Within a list of pre-defined checkboxes, subscribers can select as many options as they would like. Multi Checkboxes are useful for gathering all types of preference information, including interest areas, communication frequency, demographic information, and much more.
- Date Block
Date blocks are the best way subscribers can input date values, which can then, in turn, be used for segmentation or to trigger date-based flows. For example, you may want to collect subscribers' birthdays so that you can send them a coupon code via a flow on their birthday. If you are interested in collecting important date information about a customer, use a date block rather than any other block to ensure the dates are formatted correctly to use for segmentation or flows in your account.
- Dropdown Block
Similar to radio buttons, dropdowns are a great way to gather information about your subscribers while conserving space on a form. Use a dropdown instead of radio buttons when you have greater than four options for your subscribers to choose from.
Within each of these blocks, there are additional settings and styling options. For more information on settings and styling for each block, head to our article on Understanding Signup Form Input Blocks.
Desktop and Mobile Views
Toggle between desktop and mobile view when building your form to see how it will look across devices. If your form is set to display on just one device type (i.e., desktop-only or mobile-only), you won’t be able to switch between views.
Add up to four steps to your signup forms to present potential subscribers with just a few questions at a time, and capture as much information as they are willing to provide. Learn how to add multiple steps to your signup forms.
When using the Signup Form Builder, you can toggle from the main step(s) of your form to the success message:
- Form Step(s)
This is the form that will appear on your site. This includes the fields, content, and anything else you would like to include.
- Success Message
This is the content that will display when someone successfully completes a form. For some forms, you can include the option to subscribe to SMS using a click-to-text button in the success message.
If you create a form with only text and no submit button, no Success Message will display.
You can edit the content of these separately, but certain elements— specifically styling and behavior— will be applied universally to both the subscribe form and success message. This ensures continuity in the look and feel of your forms.
After you've finished designing or editing your form, it's crucial to check your form status to ensure your browsers are seeing the most up to date content. While forms save automatically, your form will not update automatically. There are three main statuses a form can have: Draft, Live, and Editing.
When you first create a form, it will be in draft mode. If your form is in draft mode, it is not displaying anywhere on your site. To set the form live, you need to publish it.
Once a draft form has been published, it is considered live. This means that the form is active and displaying on your website. Edits made to a live form will not be displayed until they are published.
If an embed form is in live mode, the form's embed code must also be added to your website, or your form will not display.
When a live form is edited, the edits are saved, but not published until you click Publish Changes. This means you can leave your form and come back to it later, and your edits will remain, but won't be live on your site. You will see your form in editing mode before you publish the new changes, even though they are saved automatically.