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.

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-04-03_10-33-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
  • Button Block

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-04-03_11-00-05.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.

Email Input Block

2018-04-03_11-22-20.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.
  • 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-04-03_11-48-51.png

Text input blocks are used to collect additional information about your subscribers. This can include custom properties, such as birthday or 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.

Button Block

There are two actions a button can perform: Submit Form or Close Form. Submitting a form stores the new email address and associated values in your Klaviyo account. Once a subscriber submits a form, they will be redirected to the form's Success Message.

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.

2018-04-06_09-59-39.png

Buttons have many customization options, which include:

  • Button Action
    Choose whether you would like the button to close or submit the form. If you choose to submit the form, you will be prompted to choose the list that you want new signups to be added to.
  • 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.
  • Hover Color
    Configure the color the button will turn when someone mouses over it.
  • Border Radius
    Configure whether you would like your button to be rectangular, round, or somewhere in between.
  • 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.

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 Styles
    Here, you can edit the background color of the form, along with the padding and border radius.
  • 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-04-05_14-29-18.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.
  • 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.

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

2018-04-20_13-46-56.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?
2 out of 2 found this helpful