How to use dynamic blocks in forms

Learn about dynamic blocks, and how you can use them in sign-up forms to create distinct views and experiences for shoppers on desktop and mobile devices. Use a block's visibility settings to choose which devices display it.

About dynamic blocks

Dynamic blocks allow you to control which blocks appear based on the device. You can configure blocks to appear differently in your form based on the device, or to appear on 1 device but not the other.

Use cases for dynamic blocks:

• Customize form displays for different device types (e.g., mobile and desktop) so shoppers see a design tailored to their screen.
• Create a single form with different SMS opt-in methods shown to either device type to optimize conversions (i.e., show a tap-to-text option on mobile devices and a phone number input field on desktop devices).

Before you begin

Open your form in the editor and select Targeting & behavior > Display. Under Devices, select All devices so you can configure desktop and mobile views.

This setting will allow you to configure separate displays for desktop and mobile.

Use dynamic blocks to create distinct desktop and mobile views

Some blocks have fixed visibility. For example, age gate and verification code inputs appear on all devices, while tap-to-text buttons appear only on mobile. You also cannot change visibility for the last visible block in a step.

Blocks and input fields with editable Visibility settings can be made dynamic, whether they already exist or you add them from the Add blocks panel. To open this panel, select Add content. To adjust which devices display a block, follow these steps:

1. Click on the block in the form preview panel (e.g., a text block).
2. In the block's settings menu along the left, scroll down to Visibility.
3. Choose whether to show the block on Desktop, Mobile, or All Devices.
4. Repeat this process for any blocks that you want to be dynamic.

To preview how your form looks on each device, use the view selector in the top-right corner of the form editor. You can toggle back and forth between the desktop icon and the mobile device icon to see each view.

• The desktop view shows how your form will appear to shoppers browsing your site on a desktop. Only blocks configured to Desktop and All Devices will be visible in this view.
• The mobile view previews what shoppers will see when browsing on a mobile device. It displays blocks configured for Mobile and All Devices.

Example

Let's say you want your form's headline text to appear differently on desktop versus a mobile device. To configure this:

1. In the view selector in the top right corner, select the desktop icon.
2. Select the text you want to edit in the form preview and make your changes.
3. In the text block's settings menu, scroll to Visibility and set the text block to show on Desktop only.

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. To adjust the mobile view, switch to the mobile preview by selecting the mobile icon in the view selector.
5. Select Add content to open the Add blocks panel, then drag and drop a new text element into the mobile preview.
6. Customize the default headline text for mobile shoppers. This text should be different than what you used on the desktop version.
7. In the text block's settings menu, scroll down to Visibility and set this text block to show on Mobile.

This content requires Functional cookies to be enabled.

Update Cookie Settings

8. Optional: Repeat this process for other elements or input fields that you want to display differently based on the device type (e.g., show an image to desktop shoppers but hide it on mobile).
   • If you want to make images in your form dynamic, you could:
     • Add a side image to both the mobile and desktop views, or just 1 view.
     • Use a side image in the desktop view and place an image above the headline text on mobile, or vice versa.

Use dynamic blocks to optimize SMS consent collection

If you have a sign-up form that collects SMS consent, you can use dynamic blocks to optimize the SMS opt-in method for each device (e.g., show mobile shoppers a tap-to-text button, while desktop shoppers see a phone number input field).

Use the steps below for a form with traditional SMS opt-in. Before you begin, set up SMS in your account and make sure you have a sending number that can receive text messages in the region you want to target. If your form uses Smart Opt-in, follow the guide above instead.

1. Open your existing form in the editor and select the step that collects SMS consent in the menu bar.
   • If your form does not already collect phone numbers, add a step:
     1. Click + Step, select Mobile opt-in, then click Next.
     2. Choose Text messaging, then click Next.
     3. Select the list that new subscribers should join and choose Traditional text messaging double opt-in.
     4. Click Add step.

2. In the view selector at the top right, select the desktop icon to customize the desktop view of your form.
3. Select the phone number input field in the preview and, under Visibility, set it to show on Desktop. Do the same for the submit button. Keep the SMS disclosure language visible on both devices.

This content requires Functional cookies to be enabled.

Update Cookie Settings

1. Switch to the mobile view of your form by selecting the mobile icon in the top right corner.
2. Select an existing tap-to-text button, or select Add content to open the Add blocks panel and drag a new button into the mobile preview.
3. Set the button's Action to Subscribe via text messaging. This action automatically makes the button mobile-only.

This content requires Functional cookies to be enabled.

Update Cookie Settings

4. Choose a Text messaging keyword and customize the Message for your tap-to-text button. Mobile subscribers join the list associated with that keyword, so check that it matches your intended list for SMS subscribers.
5. Under Sending Region, choose the region you want to target. Klaviyo uses the sending number associated with that region.
6. Toggle back and forth between the desktop and mobile views to make sure the blocks appear as you intended on each device.

Your dynamic blocks are now configured to show a phone number field on desktop and a tap-to-text button on mobile. Mobile shoppers must send the prefilled text to request an SMS subscription.

Next steps

Before you publish your sign-up form, select Edit styles to change the layout, fonts, and colors to match your brand. Also, be sure to add and customize your SMS disclosure language.

To make the form or your changes live:

1. Click Publish or schedule.
2. Choose Publish now and resolve any blocking alerts.
3. Click Publish now to publish.

Additional Resources