How to add a form teaser

You will learn

Learn how to add a teaser to your popup or flyout sign-up form, which is a small widget that a visitor can click on to close and reopen open a form as they please.

Add a teaser to a popup or flyout, or full page sign-up form 

To add a teaser to a form, navigate to the Sign-up forms tab and open an existing form or create a new one. Click (+) Teaser in the form editor. 

Choose a teaser style

Under Styles, choose one of 3 teaser shapes: 

• Rectangle
  Use the rectangle shape for a tab-style teaser
• Circle
  Use the circle shape for a bubble-style teaser
• Corner
  Use the corner shape for a teaser tucked into a corner of your site

Position your teaser on any of the sides or corners of your site. The teaser’s size is optimized for a variety of devices. Be sure to view the desktop and mobile previews to ensure the teaser’s placement doesn’t conflict with other popup or teaser-style elements on your site. 

Here you can also choose a Size for your form teaser (i.e., Small, Medium, Large, Custom) using the dropdown.

Edit the teaser's content

Under Content, add or edit text and text styles in your teaser. At a minimum, your teaser should hint at your form’s offer. Keep the teaser short for maximum impact. Use these examples of teaser text for inspiration: 

• 15% off 
• Redeem gift 
• 🎁
• Enter giveaway
• Free shipping ➡️

If your teaser text mentions a specific offer, make sure to deliver that offer to subscribers either in your form’s success message or using a welcome series. 

Here you can also edit your teasers design (i.e., Background Color, Color Radius, Drop Shadow, Background Image, and Block Styles).

Set teaser behaviors

Choose 1 of the following options to determine when your teaser will appear: 

• After form is closed
  A teaser set to show after a form is closed will allow a visitor to reopen the form if they dismiss it, but will not appear before the form pops up. The teaser will continue to display on all pages until the visitor completes the form’s primary conversion action. 
• Before displaying form
  A teaser set to show before displaying a form will appear 2 seconds after the page loads. It will display until a visitor clicks it, or until the form's display conditions are met (e.g., time delay or scroll percentage). 
  
  Note that if your form is set to display immediately on page load, or after less than a 2 second wait, the teaser will be skipped. 
• Before displaying form and after form is closed
  A teaser with this setting will appear 2 seconds after the page loads, and will continue displaying unless the form is currently open or the visitor has completed its primary conversion action.

In addition to the rules above, a teaser will only show to visitors who meet the form’s targeting settings found in the Behaviors & Targeting section of your form. For example, a teaser set to show before displaying a form will only appear to visitors who meet the form’s targeting settings (i.e., list/segment membership, location, and URL). Once that form’s remaining triggers are satisfied (e.g., exit intent, scroll length, or time delay), the teaser will close and the form will appear. 

Add a close button to your teaser

You can add a close button to your form teaser (the X button) to allow your shoppers to close the teaser if they are not interested in the form's content.

By default, your teaser will not include a close icon. Under Behavior, toggle the Show close button switch on to add one. 

Form teasers and primary conversion actions

If a teaser is added to a multi-step form and is set to display after the form is closed, it will appear until the visitor completes the form’s primary conversion action. 

• For forms with email or SMS subscription actions, submitting an email or phone number counts as a primary conversion action.
• For forms containing both email and SMS fields across multiple steps, submitting whichever appears first in the form counts as a primary conversion action.
  

  Note that if the primary conversion step (i.e., the email step in a multi-step form) is submitted, the teaser will not go away automatically when declining the second step (i.e., the SMS step). Rather, you will need to refresh the page or navigate to a new page to no longer see the form teaser.

• For forms without an email or SMS subscription action (e.g., a flash sale popup with a “Go to URL” action), clicking the “Go to URL” button counts as a primary conversion action.

If a multi-step form’s primary conversion action has not been completed, clicking the form’s teaser within the same browsing session will reopen the form on the last incomplete step. 

Delete a teaser

To delete a form’s teaser, click the 3 dots on the Teaser button, then click Delete. This will remove all teaser settings. If you later re-add a teaser to the same form, it will be reset to the teaser defaults. 

Additional resources 

• How to A/B test a sign-up form
• Understanding sign-up form analytics
• How to optimize popup and flyout forms for mobile