Guide to Form Blocks and Fields

read
Last updated at:

Overview

Learn about content blocks and input fields in signup forms, including how to use each block type. 

There are a number of blocks that you can drag and drop into your form to customize its appearance and the type of information you collect from subscribers. When you select a block, editing options will appear in the left-hand sidebar. Here, you can configure the details of that block, including any text and styling. There are two different block categories: elements and input fields. 

Form Elements

Signup form elements add content to your form, including text, buttons, and images. These blocks inform the visitor of the purpose of your signup form and allow them to interact with it. 

form_elements.jpeg

Text Block

Use text blocks to configure text content for your form, including a headline, instructions, or other display text. Additionally, you can add an emoji using the emoji picker, or an inline image using the image URL input option. 

Button Block

Button blocks allow you to gather and save information in Klaviyo about those who submit your form. A button can then direct the viewer to a different page on your website, subscribe them to SMS messaging, or close the form altogether. 

Choose one of the following actions for your button: 

  • Close Form
    The form will close and data won’t be submitted to Klaviyo. If an embedded form has a close form button on it, it will close when clicked, but will reopen the next time the page is reloaded. 
  • Submit Form
    Any form fields that the visitor completed will be sent to Klaviyo, and the form will progress based on the option you select for the After submit field (either Show Next Step, Go to URL, or Close Form). 
  • Go to URL
    The visitor will be redirected to the URL you provide, and data from any form fields won’t be submitted to Klaviyo. When inputting your Destination URL, use the full URL, including https:// (e.g., use https://help.klaviyo.com/hc/en-us rather than help.klaviyo.com/hc/en-us). The Go to URL action will not work with an incomplete URL.
    You can also use the Go to URL action to create a click-to-call form. To do so, set the form’s visibility to Mobile Only and use tel:+[your phone number] as the Destination URL. Don’t forget to include the country code (1 in the US).
    button_action_call.jpeg
  • Subscribe via SMS
    This option is available for mobile-only forms and allows visitors to subscribe to SMS in just a few taps. When a visitor clicks a Subscribe via SMS button, their text messaging app will appear with a message they can send to subscribe. 
    Select a keyword from the Subscribe Keyword dropdown. This is the word that someone must text to your destination number in order to be added to your account’s SMS subscription list, and is configured at the account level.
    Then, set an opt-in message, which will populate in their messaging app. By default, this reads “Send this text to subscribe to <organization_name>!”, but you can customize the message content. This field allows up to 160 GSM-7 characters (1 message) only. Special characters, including emojis, are not valid.

Change the List a Form Submits To

If your form already has a button, you can change the list your form submits to in the button’s settings. To change a form’s submit list: 

  1. Click the button in the form editor 
  2. Select a new list next to List to Submit
  3. Click Done in the editing sidebar 
  4. Click Publish Changes

Submit Hidden Fields

Hidden fields are additional properties that will be added to a subscriber's profile in Klaviyo. This allows you to track visitors who interact with your form. By default, all forms have a $source property as a hidden field, which identifies how they were added to your list. 

This option is only available for buttons that submit the form, not close form, go to URL, etc.

You can customize the $source property and other property names. Like other inputs on forms, if you add hidden fields for properties that already exist in someone's profile, they will be overwritten by the new value when they submit the form. For example, let’s say your form gathers collection preferences, and a customer has previously selected that they are interested in your men’s collection. If this form has a hidden field for interest in your women’s collection, then the preferences property will be overwritten when the button is clicked (i.e., from men’s to women’s). 

Image Block

Image blocks allow you to add an image to your form (e.g., your logo). You can use this block to add images to match the look and feel of your brand. 

JPEG, PNG, and GIF files are all accepted. As with all images viewed on the web, larger file sizes lead to slower load times. Aim for a file size of 50-100 KB for optimal performance.

You can also add a background image or a side image in your form’s Styles section. 

Input Blocks

Input blocks enable you to collect information about site visitors, like their email address or name. 

Input_fields.jpeg

All input blocks should be connected to a profile property, which is used to store the data each subscriber submits. Select an existing property from the Profile Properties dropdown, or create a new one by typing in a new property name and clicking Create “Option”

Create_option.jpg

Unless otherwise specified, inputs from these fields will be stored as strings. 

Email Input Block

Email input blocks allow visitors to input their email addresses and subscribe to the list connected to the form. A form can only have one email input, and it must appear in one of the form’s steps, 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. This block validates submitted phone numbers to ensure they're stored in an acceptable phone number format. 

Text Input Block

Text input blocks are used to collect information that doesn’t need to follow a specific format (like dates or email addresses), and when it doesn’t make sense to offer a preset list of options. Note that segmentation and flow filtering are case- and spelling-sensitive. Consider other block types if you plan to use this data for segmentation or filtering. 

A common use case for text input blocks is collecting subscribers’ names. To add a first name field, use “First name” as the label or placeholder text, and select First Name as the profile property. 

first_name_block.jpg

Radio Buttons

Radio buttons offer a preset list of options, of which subscribers can only select one. These are useful for collecting information like gender or age range.

The Profile Property field should contain the name you’d like to use for this property. For example, if your form asks visitors if they prefer coffee or tea, use a custom profile property like “Beverage Choice”. 

Use the Labels column of the Property Options section to add the options your subscribers can choose from. Then, add corresponding values in the Values column. These values will be stored in the profile of anyone who fills out the form, so consider using a shorthand version of the answer that’s easy to reference. 

If your option labels are “I’m a tea drinker” and “I prefer coffee”, the values could be “tea” and “coffee”, respectively. 

radio_buttons.jpg

When a subscriber answers a radio button question, their response will be stored as a string data type

Multi Checkboxes

Multi Checkboxes offer a list of options, and subscribers can select as many options as they would like. Multi Checkboxes are useful for gathering preference information, interest areas, demographic information, and any questions where a subscriber should be able to select more than one option.

Like a radio button block, your multi checkbox block requires a profile property, a set of labels, and a set of values. 

multi_check.jpg

When a subscriber answers a multi checkbox question, their answer will be stored as a list data type, regardless of how many options they select. 

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 date information about a customer, use a date block to ensure the dates are formatted correctly.

If you select an option from the Date Format menu that doesn’t include a year (e.g., MM DD), a default year will automatically be included in each subscriber’s profile. Dates submitted through a date block are stored using the date data type. 

Dropdown Block

Dropdowns are similar to radio buttons, in that subscribers can select one option from a preset list. This option also helps conserve space on your form. Consider using a dropdown instead of radio buttons when you have more than four options. Like radio buttons and multi checkboxes, your dropdown block requires a profile property, a set of labels, and a set of values. 

Next Steps

Once you’ve added blocks and fields to your signup form, learn how to style it to match your brand. When you’re ready to publish a popup or flyout form, just click Publish to set it live on your site, or add the form’s embed code to your site if you’ve chosen an embedded form. Once your form is live, learn how to view responses to your form or message your subscribers.

Additional Resources

x
Was this article helpful?
28 out of 52 found this helpful