Overview of the Signup Form Builder

read
Last updated at:

Overview

Signup forms are a crucial part of your on site acquisition. You can use forms to collect information like email addresses from your browsers, let your almost VIPs know about the benefits of being a VIP, or direct browsers to a sale, and more. Signup forms personalize the on site experience for your browsers, making your marketing more targeted and human. This guide will walk you through the signup form builder to ensure you're set up for success.

When you click on a form in the Signup Forms tab in your account, you will be brought to the signup form builder. This is where you configure the appearance, content, and behavior of your form.

Looking to create, manage, or delete signup forms? Head to our article, Create and Manage Signup Forms. If you're interested in measuring the performance of your signup forms, check out our article on Reviewing Signup Form Analytics.

Please note that 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.

Before You Get Started

When designing your signup form, start with the goal of your form. Is your form gathering email addresses and birthday information? Are you directing browsers to a sale? Are you letting VIPs know about an exclusive offer? Once you have your goal in mind, you'll next want to keep your branding in mind. Head to our Guide to Optimizing Your Signup Form Experience to perfect your form experience for your browsers.

After you have a clear vision for your form, you'll be able to more quickly design your signup form.

Form Blocks

 

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.

2020-04-14_19-09-43.png

  • 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 image to a text block by using the image URL input option. Head to our article on Customizing Text Blocks in a Signup Form for more information.
  • 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. For more information on how to optimize your button blocks, head to our article on Customizing Button Blocks in a Signup Form.
  • 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. For more information, head to our article on Customizing Image Blocks in Signup Forms.

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.

2020-04-14_19-09-43_2.png

  • 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 Using Signup Forms to Gather Information about Your Customers.

Form Styles

After you have chosen the blocks you want in your signup form, the Styles tab 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 tab, you can choose to have your form as a popup, flyout, or embed.

2020-04-14_19-08-10.png

  • 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. 

After you've decided on the type of form, you can customize the size, background, font, and other elements of design to ensure your form perfectly compliments your brand. Head to our article on Guide to Optimizing Your Signup Form Experience for more information.

Form Behavior

Lastly, the Behaviors tab is where you can change the behavior of your form. The behaviors you configure here apply universally to both the Subscribe Form and Success Message. Here is where you want to have the purpose and audience of your form front of mind.

Display Timing

First, you'll need to answer the question of when you want your popup or signup form to display.

2020-06-25_14-15-24.png

  • Time Delay
    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.

  • Scroll Delay
    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 browser needs to complete all the actions in order for the form to appear.

Display Frequency

The display frequency answers the question of how often do you want people to see this popup or fly out 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. By default, browsers will not see the same form until 90 days later.

2020-06-25_14-15-24_2.png

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.

Embed Code

2020-06-25_14-17-23_2.png

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.

Devices

2020-06-25_14-15-24_3.png

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.

Targeting

2020-06-25_14-19-51.png

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 Dynamic 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.
  • By Location
    Only show forms to browsers in certain locations. Klaviyo uses IP addresses to determine whether or not to show a form to people in certain locations. 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.

Success Views

When using the Signup Form Builder, you can toggle between two main views:

2020-04-14_18-58-29.gif

  • Subscribe Form
    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 submits their email address to a form. 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.

Form Statuses

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.

  • Draft
    2018-04-05_16-37-00.png
    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.
  • Live
    2018-04-05_16-37-00.png
    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.
    Even if an embed form is in live mode, your form will not display until the code has been added to your website. For more information on where to paste your form code, head to our article on Where to Paste a Form's Embed Code.
  • Editing
    2018-04-05_16-37-00.png
    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.
    If you're uncertain if your form is published or to gather information about publishing forms, head to our article on Signup Form Troubleshooting.

Additional Resources

x
Was this article helpful?
350 out of 567 found this helpful