Blocks within the Signup Form Builder

read

Overview

Within the Signup Form Builder, 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

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

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-05-09_13-28-58.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. 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.
  • 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-06-06_14-53-40.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.

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

Radio Buttons

2018-05-04_13-23-56.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:

  • 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-05-04_13-28-11.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:

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

Klaviyo.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-05-29_09-36-47.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."
Was this article helpful?
1 out of 2 found this helpful