Understanding form blocks and fields

You will learn

Learn how to use various content blocks and input fields in your forms to customize their appearance and the type of information you collect from subscribers. 

In the sign-up form editor, click on the Add Blocks tab to see the different blocks that you can add to your form. When you drag and drop 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, as well as which devices the block will show on if you want to use dynamic blocks.

There are two different block categories:

1. Form elements
2. Input fields

Form elements

Sign-up form elements add content to your form, including text, buttons, images, and coupons. These blocks inform the visitor of the purpose of your sign-up form and allow them to interact with it. 

Text block

Text blocks allow you to insert text content on your form, such as 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 allow the viewer to close or submit the form, direct them to a different page on your website, or subscribe them to SMS messaging.

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). 
• Redirect to a different page
  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).
  
• Subscribe via SMS
  You can configure this option on mobile-only forms, or on the mobile view of the SMS Opt-in step for forms that target all devices. It 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.

If you operate in multiple regions and have more than 1 sending number, you have the option to choose the appropriate number under Sending Region.

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. 

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 the Styles tab of the form editor. 

Coupon block

If you use Shopify as your ecommerce platform, you can add a coupon block to incentivize your site visitors to submit the form and use the coupon to make a purchase on your site.

You can add static or unique coupon codes to a form. Klaviyo best practices recommend showing these codes in the Success step, so shoppers don't have to leave your website to get the code. Read our guide on adding coupon codes to sign-up forms for more details on set up.

Input fields

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

All input fields 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”. 

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

Email input field

Email input fields allow visitors to input their email addresses and subscribe to the list connected to the form. A form can only have 1 email input, and it must appear in one of the form’s steps, not the success message.

Phone number field

If you add a phone number field, 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. 

You can also use dynamic blocks when collecting SMS consent to ensure shoppers see the best method for opting in.

Text input field

Text input fields 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 field types if you plan to use this data for segmentation or filtering. 

A common use case for text input fields 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. 

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. 

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 field, your multi checkbox field requires a profile property, a set of labels, and a set of values. 

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 field

Date fields 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 field are stored using the date data type. 

Dropdown field

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 field requires a profile property, a set of labels, and a set of values. 

Use dynamic blocks to create distinct desktop and mobile views

If your form is set to show on all devices in the Targeting and Behaviors tab, you can use dynamic blocks to configure which blocks display on each device so shoppers see a beautifully designed form that has been tailored to their device type. 

To show what blocks display on each device, simply click on the block and set the device to show on desktop, mobile, or all devices. Any of the blocks or input fields in an existing form, or that you add from the Add Blocks tab can be configured to show on some devices, but not others. Use the view selector in the top right corner to switch between the desktop and mobile view as you customize each one.

Example

Let's say we want our form's headline text to differ when it displays on desktop compared to when it displays on mobile. To set this up:

1. In the editor, select the desktop icon from the view selector in the top right corner. 
2. In the preview, click on the text you want to edit and make your desired changes.
3. Set the text block to show on Desktop devices only.
   
   

   Note that when you set a block to show only on desktop devices, it will not be visible on the mobile view. The mobile view will only show mobile-only and all-device blocks, while the desktop will show desktop-only and all-device blocks.

4. Click on the mobile icon in the view selector to switch to the mobile view.
5. Drag and drop a new text blocks into the mobile preview.
6. Edit the default text.
7. Set the text block to show on Mobile devices only.
8. Optional: Repeat this process for any other blocks or input fields that you wish to specify which device they show on. Toggle between the views as you make these changes to see how they look on each view.
9. 1. 1. 1.  

Next steps

Once you’ve added blocks and fields to your sign-up 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

• Troubleshooting sign-up forms
• Profile properties reference
• Getting started with sign-up forms
• Course: Creating an effective acquisition strategy using sign-up forms