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.

Note

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

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:

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

Note

For more information on the customizing each type of block, click here.

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
  • 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, or a custom dimension. 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
  • Form Background
    Choose the background color and/or image background for the form. 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.

    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.
  • Form Styles
    Here, you can edit the padding and border radius 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-06-06_14-41-34.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
    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
    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.

  • 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
    Choose to show a form to only those who don't already have a profile in Klaviyo (i.e. are 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.

    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. 

Klaviyo.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?
10 out of 13 found this helpful