The Signup Form Builder

read

Overview

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 can configure the appearance, content, and behavior of your form.

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.

This video gives you a full walkthrough of the signup form builder.

Forms and Success Views

When using the Signup Form Builder, you can toggle between two main views: Subscribe Form and Success Message. 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.

  1. 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.
  2. 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 be displayed.

Manage Form Blocks

The Form Builder uses a drag-and-drop layout similar to the Email Template Builder's.

Add or Move a Block

To add an element to your form, simply select it on the lefthand sidebar and drag it onto the form. You can add elements vertically (stacked) or horizontally (side-by-side).

To move a block, click on it and drag it where you would like. 

2018-05-04_13-04-59.gif

Delete a Block

To delete a block, click or hover over it and select the trash can icon. Deleting a block cannot be undone.

2018-04-03_10-35-55.gif

Edit 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 lefthand sidebar. Here, you can configure the details of the block, including text and styling. There are several different types of blocks that you can add to a form:

  • Elements
    • Text Block
    • Button Block
    • Image Block
  • Input Fields
    • Email Input Block
    • Text Input Block
    • Radio Buttons
    • Multi Checkboxes
    • Date Block
    • Dropdown Block

Within each of these blocks, within the Block Styles area, you can set the left, right, top, and bottom padding.

Text Block

This is 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.

2018-04-03_10-55-56.gif

To add an image to a text block:

  1. Upload the image to your Image Library.
  2. Click the thumbnail of the image you would like to include in the text block. This will open the image in a new tab or window.
  3. Copy the URL from the navigation bar.
  4. Return to the Signup Form Builder and click the image icon in the text block. A modal will appear prompting you to input the image URL. You can also add alt text and adjust the dimensions if you would like.

2018-05-04_12-59-44.png

When editing a text block, there are several elements you can change outside of the Styles tab. This includes:

  • Font
    Specify font color, text alignment, font family, and font size if you'd like to override the overall form styles established in your form's Styles tab.
  • Font weight
    Choose whether your text is bold, italic, underlined, or all three.
  • Lists
    Choose whether or not you'd like to include a bulleted or numbered list.
  • Text links
    Include a link as a text link rather than a button.
  • Images
    Include an image on your form using the steps outlined above.

Button Block

2018-08-13_11-28-40.png

Buttons have many customization options, which include:

  • Button Action
    Choose whether you would like the button to close or submit the form, or go to a specific URL.
    • Submit Form
      Submitting a form stores the new email address and associated values in your Klaviyo account and adds new subscribers to the list you specify. Once a subscriber submits a form, you can choose whether they are redirected to the form's Success Message or a specific URL. Alternatively, you can simply close the form once they've submitted their information. 
    • Close Form
      Closing a form allows browsers to close the form without submitting any information -- similar to closing out of the form in the upper right corner. If an embedded form has a Close Form button on it, it will be closed, however, this will only take effect until the page is reloaded.
    • Go to URL
      A Go to URL button will bring browsers who click the button to a specific URL. This will count as submitting a form in terms of the behavior that you outline in the Behaviors tab. For example, if you choose never to show a form to someone after they submit it, this same behavior will apply to a Go to URL button.
  • Submit Hidden Fields
    Hidden fields are additional properties that will be added to a subscriber's profile in Klaviyo. By default, all new signups must have a $source property -- this is what identifies where they came from in the List Growth Report. You can configure this property name (i.e. Popup 1). Like text inputs, if you add additional hidden fields that correspond to properties that already exist on someone's profile, they will be overwritten by the new value when someone submits the form. This option is only available for Submit Form buttons.
  • Text
    Configure what you would like the button to say.
  • Background Color
    Configure the color of the button. Here, you can also set the opacity of the button -- if you would like, you can set the opacity to 0% to have the button background be transparent by dragging the opacity slider to the far left.
  • Hover Color
    Optionally, configure the color the button will turn when someone mouses over it. If you don't specify a hover color, it will default to the color of the button itself. You can also select the opacity for a button background's hover color.
  • Border Radius
    Configure whether you would like your button to be rectangular, round, or somewhere in between.
  • Border Thickness
    If a button has a border, this is the number of pixels it will span.
  • Border Style
    Choose if you would like your button to have a border and, if so, whether you would like it to be solid, dashed, or dotted. This is also where you can select the color of a button's border.
  • Width
    When you select Stretch Width, the button will stretch to take up all the available space in the row. If you select Fit Width, the button will shrink to the minimum space necessary.
  • Text Color
    Configure the color of the text displayed on the button.
  • Font
    Select the font family and size displayed on the button.
  • Font Weight
    Select whether you would like the text to be in bold, italics, or underlined.
  • Letter Spacing
    Choose how far apart the letters are displayed in the button text.

Image Block

This is where you can add an image to your form for your logo or any other type of image you would like to use. You can drag an image block above, below, or next to any other element on the form.

2018-09-11_14-41-48.png

You can add an existing image from your library, upload a new one, or import one from a URL. Once you select your image, you will be able to choose:

  • Alt Text
    The text that will display in place of the image in the unlikely even the image doesn't load.
  • Width
    The max width of image.
  • Alignment
    Whether the image displays left, right, or centered on the form.
  • Image Click Action
    Specify what behavior you would like to happen when someone clicks on the image. Here, you can choose:
    • Do Nothing
    • Close Form
    • Submit Form
    • Go to URL

Email Input Block

Klaviyo.png

This is where contacts input their email address to sign up for the list that your form is connected to. A form can only have one email input, and it can only be on the Subscribe Form. When editing an email input block, you can specify:

  • Label
    Optionally, you can include a label above your email input block. This text will be displayed in bold.
  • Placeholder Text
    This will be the text that autopopulates in the email input before someone enters their email address. This should give browsers an idea of what to enter into the input block.
    • Autofill with email if already tracked option will autopopulate a browser's email address in the placeholder text if they are a known browser. For example, this could allow you to capture a subscriber who has previously abandoned a cart, but isn't on your newsletter list.
  • Profile Property
    For email input blocks, this is not configurable. This is a hidden property that maps the email input to the subscriber's email address on their Klaviyo profile.
  • Required
    Optionally, require subscribers to input their email address before they are able to successfully submit the form.

To edit the look and feel of your email input block, go to the Styles tab. Changes made in the Text Input Field Styles section will be applied to your email input block.

Text Input Block

2018-07-24_14-19-37.png

Text input blocks are used to collect additional information about your subscribers. This can include custom properties, such as gender, or profile properties that Klaviyo can detect automatically, like first name. Here, you can specify:

  • Label
    Optionally, include a label for your text input. This should give subscribers an idea of what information you're looking to collect.
  • Label Text
    What the text input label will read.
  • Placeholder Text
    This will autopopulate in the text field before a subscriber enters their information. This should give them an idea of the format you're looking for.
  • Profile Property
    This is the property that the text input will be mapped to on a subscriber's Klaviyo profile. This can be either a custom or a Klaviyo property. If the property does not already exist in your account, you may create an entirely new property that will be added to subscribers' profiles once they sign up. If someone submitting the form already has a value for the property on their profile, when they submit the form, the existing value will be overwritten by the new value.
  • Required
    Optionally, require subscribers to input a value before they are able to successfully submit the form.

To edit the look and feel of your email input block, go to the Styles tab. Changes made in the Text Input Field Styles section will be applied to your text input block.

Radio Buttons

2018-07-24_14-19-03.png

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. These values are assigned to subscribers' profiles as custom properties or as profile properties that Klaviyo can detect automatically, like first name. Here, you can specify:

  • Show Label
    Optionally, include a label for your text input. This should give subscribers an idea of what information you're looking to collect.
  • Label Text
    What the text input label will read.
  • Required
    Choose if you would like this value to be mandatory in order to submit the form.
  • Arrangement
    Choose if you would like options to stack (Vertical) or display side-by-side (Horizontal).
  • Profile Property
    Choose the custom or Klaviyo profile property that you would like the selection to be mapped to. This can be either a custom or a Klaviyo property. If the property does not already exist in your account, you may create an entirely new property that will be added to subscribers' profiles once they sign up. If someone submitting the form already has a value for the property on their profile, when they submit the form, the existing value will be overwritten by the new value.
  • Label
    Choose the display text for an option.
  • Value
    Choose the value for the Klaviyo or custom property that you would like their submission to be mapped to.

Multi Checkboxes

2018-07-24_14-18-28.png

Multi checkboxes are also 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. These are useful for collecting information like content interest. These values are assigned to subscribers' profiles as custom properties or as profile properties that Klaviyo can detect automatically, like first name. Here, you can specify:

  • Show Label
    Optionally, include a label for your text input. This should give subscribers an idea of what information you're looking to collect.
  • Label Text
    What the text input label will read.
  • Required
    Choose if you would like this value to be mandatory in order to submit the form.
  • Arrangement
    Choose if you would like options to stack (Vertical) or display side-by-side (Horizontal).
  • Profile Property
    Choose the custom or Klaviyo profile property that you would like the selection(s) to be mapped to. This can be either a custom or a Klaviyo property. If the property does not already exist in your account, you may create an entirely new property that will be added to subscribers' profiles once they sign up. If someone submitting the form already has a value for the property on their profile, when they submit the form, the existing value will be overwritten by the new value. If a subscriber selects multiple values, these will be stored as a list of values for a given property.
  • Label
    Choose the display text for an option.
  • Value
    Choose the value for the Klaviyo or custom property that you would like their submission to be mapped to.

Date Block

The date block allows subscribers to 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. 

2018-07-24_14-17-51.png

Here, you can edit the following:

  • Label
    Optionally, include a label for your text input. This should give subscribers an idea of what information you're looking to collect.
  • Label Text
    What the text input label will read.
  • Placeholder Text
    This will autopopulate in the text field before a subscriber enters their information. This should give them an idea of the format you're looking for.
  • Profile Property
    Choose the custom or Klaviyo profile property that you would like their input to be mapped to. This can be either a custom or a Klaviyo property. If the property does not already exist in your account, you may create an entirely new property that will be added to subscribers' profiles once they sign up. If someone submitting the form already has a value for the property on their profile, when they submit the form, the existing value will be overwritten by the new value.
  • Date Format
    Choose how you would like subscribers to input a particular date value. All submissions will be recorded as a date data type. If you do not prompt subscribers to choose a particular year, the year value will default to 2016. You have several options for how subscribers can input dates:
    • MM DD
    • DD MM
    • MM DD YYYY
    • DD MM YYYY
    • YYYY MM DD
    • Additionally, you can choose which character is used to divide the values 
  • Required
    Choose if you would like this value to be mandatory in order to submit the form.

Dropdown Block

Dropdowns are a great way to conserve space on a form by allowing subscribers to select a value from a dropdown rather than a list of radio buttons. These work particularly well if you have more than 3-4 options that subscribers can choose from.

2018-07-24_14-16-51.png

Here, you can edit the following:

  • Label
    Optionally, include a label for your text input. This should give subscribers an idea of what information you're looking to collect.
  • Label Text
    What the text input label will read.
  • Required
    Choose if you would like this value to be mandatory in order to submit the form.
  • Placeholder Text
    This will autopopulate in the text field before a subscriber selects an option.
  • Profile Property
    Choose the custom or Klaviyo profile property that you would like their input to be mapped to. This can be either a custom or a Klaviyo property. If the property does not already exist in your account, you may create an entirely new property that will be added to subscribers' profiles once they sign up. If someone submitting the form already has a value for the property on their profile, when they submit the form, the existing value will be overwritten by the new value.
  • Label
    These are all the options that will be displayed when a subscriber clicks the dropdown menu. 
  • Value
    This is the value that each selection will be mapped to. For example, if someone selects "An Internet search" in the example above, their custom property for Referral Source will be "Internet."

Edit Form Styles

The Styles tab is where you can change the general look and feel of your form. These styles apply universally to the Subscribe Form and Success Message. You can edit the following:

  • Type
    Choose the format you would like to use for your form:
    • Popups will appear in the middle of the browser's window
    • Flyouts will slide into the browser's window from any direction you select
    • Embedded forms will appear where you paste the provided code snippet on your site
  • Flyout Position (specific to flyout forms)
    Choose where you would like the flyout to slide in from:
    • Top right, middle, or left
    • Middle left or right
    • Bottom right, middle, or left
  • Form Size
    Choose whether you would like your form to be small, medium, large, a custom dimension, or 100% (embeds). If you choose a custom dimension, you will be able to alter the width in pixels. The height of a form will grow/shrink as you add/remove content.
    • Small = 300 pixels, which is best for mobile
    • Medium = 450 pixels
    • Large = 600 pixels
    • 100% = if you would like your embedded form to scale to the full width of its container, select 100%. 
  • Form Background
    • Background color = When selecting a background color, you will also have the ability to choose the opacity of the form background. If you would like to have the background be transparent, drag the opacity slider to the far left.
    • Background image = Alternatively, you can use an image as the background of the form. If you select an image that doesn't fit the dimensions of the form, you may still see the form background color displayed unless you choose to use a transparent background. If you use an image format that supports transparency -- a PNG file, for example -- in addition, you can use the image as the background of your form instead of the default.

      When using an image background, you can either select an image from your library, upload a new image, or import an image from a URL. If you do choose to use a background image for your form, you will be able to edit:
      • Image Position: 
        • Cover = The image is scaled until it fills the entire background of the form
        • Contain = The image is scaled until it fits entirely within the background of the form.
        • Custom = You may specify a custom width for the image.
        • Alignment: Whether the image is aligned left, right, or center.
    • Overlay color = For popups, choose the color of the background overlay. If you would like your form to appear as though it spans the entire screen, you can change the overlay color to the same color as the background.
  • Form Styles
    Here, you can edit the padding and border of the form.
  • Text Input Field
    These parameters also apply to Email Input blocks. You can change the font color, placeholder font color, font, font size, font weight, and letter spacing. You can also change the height of the input field. 

2018-11-29_17-10-05.png

Edit Form Behavior

The Behaviors tab is where you can change the behavior of your form. The behaviors you configure here apply universally to the Subscribe Form and Success Message. You can edit the following:

Display Timing (popups and flyouts only)
Adjust when the form will appear on the webpage. 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.

  • 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 0 seconds, the form will display immediately. 
  • 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.

Display Frequency (popups and flyouts only)
Choose how often you would like a form to appear after someone has already closed out of it. For example, you may not want a form to appear to the same person until 120 days after they originally closed it out. By default, browsers will not be shown the same form until 90 days later.

Checking this box will ensure that no one who has ever submitted or gone to the form action URL will ever 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 (embeds only)
This is the div code that you will need to paste on your site to ensure that the embedded form displays. You should paste this code exactly where you would like the form to appear on your site. 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
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

  • 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 Klaviyo 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 only need to be in one of the groups to be shown the form. For example, if Person A is in Segment X and you target to Segment X and Segment Y, Person A will be shown the form. Additionally, any untracked persons 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 would not see the form. All untracked visitors would still be shown the form because there is no way of knowing whether or not they are in the chosen a 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 help article to find more information about how frequently your dynamic segments update.

  • 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. 
  • By Location: Only show forms to browsers in certain locations. Klaviyo uses IP address to determine whether or not to show a form to people in certain locations. This may be useful if, for example, you would like to exclude browsers in the EU from seeing a particular form.

2018-10-02_09-40-59.png

Form Statuses

Forms save automatically, and there are three main statuses a form can have: Draft, Live, and Editing.

  1. Draft: A form is not displaying anywhere on your site. To set the form live, you need to publish it.
    2018-04-05_16-37-00.png
  2. Live: 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.
    2018-04-05_16-37-00.png
  3. Editing: 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.
    2018-04-05_16-37-00.png
Was this article helpful?
22 out of 33 found this helpful