You will learn
Learn about dismissal settings for your sign-up forms, including how to style close icons and the close options available for popup and flyout forms.
It might seem counterintuitive to make it easy for visitors to close your forms, but a visitor who gets frustrated by a form they can’t dismiss is unlikely to keep browsing on your site. Providing a positive experience, even when someone is closing a form, can build goodwill and make a visitor more likely to subscribe at a later time.
Styling a form’s close icon
To customize the style of your form’s close icon (the X button), click the icon in the form editor. On the left, the Close Icon settings will appear, including the size, color, thickness, background color, border color, and block padding of the close icon. To create a simple X with no background or border, set the background color and border color to transparent.
The settings you select apply to both desktop and mobile versions of your form (if your form is set to display on both device types). Use the desktop/mobile view selector in the top right corner to preview the form’s close icon on mobile.
Popup dismissal settings
The popup dismissal setting allows you to choose whether site visitors can close your popup by clicking outside of the form area.
- When this setting is toggled on (which is the default), any click outside of the form will close the form, and the visitor won’t be able to return to it.
- When toggled off, visitors must click the form’s close icon in order to close it; clicks outside the form area will be ignored.
In both cases, the form can appear again based on the setting in Targeting & Behavior > Display Frequency > Show again X days after closing.
The dismissal setting is device-specific. You can choose whether clicks outside the form area should close the form on desktop, mobile, both, or neither. Access this setting in the Targeting & Behaviors section within the Dismissal section.
Swipe to dismiss on mobile
To make it easy for visitors to close your form on a mobile device, use a flyout with its Mobile Flyout Position set to one of the following options:
- Dock to top to allow visitors to swipe down to close the form.
- Dock to bottom to allow visitors swipe up to close the form.
Next steps
In addition to making it easy to close your forms, consider using a form teaser so visitors can open your form when they’re ready.
Additional resources