A popup is a window that appears on a website while browsing it. This form pops up on specific website pages based on the timing you set: after a particular amount of time on your site, after scrolling, on exit, etc. It allows you to collect customer emails, offer a discount, and start Welcome automation by collecting email opt-ins.

Contents

Setup process

Form settings

Theme settings

Behavior settings

Layouts

Items (Blocks)

Success/Error messages

Setup process

To create a popup form, navigate to Forms → Create form → Style → Popup→ Pick the template. A variety of popup form templates are available in the Forms library to suit your needs.

This will take you to the next step, where you can edit the contents of your form and adjust it to fit your website and brand style.

The main features of Form builder are Items (otherwise called Blocks), Layouts, Behavior, and Theme settings.

Form settings

Theme settings

This tab allows you to customize the form's design and pick the default design settings you want to use for form layout, colors, buttons, and fields.

Form layout allows you to:

  • change the width of the form to fit any screen (rage of 300 to 1000px);

  • change background image placement that allows rendering an image next to your form. Options include Image left, Image Right, Image Top, Background Image, and without Image.

If you use a background image, you'll be prompted to select the image file and choose the Image's width to either fill the Space or fit the form's size.

Colors settings allow you to change:

  • Form overlay color;

  • Form color;

  • Close button color;

  • Link color.

Button settings allow you to define and style your form's buttons:

Field settings allow you to customize the input fields of your popup form in one go.

  • You can define border-style by selecting Border/Line;

  • Change font and font size of the input field text;

  • Change the text colors, placeholder text, label (if you decide to label your field, described further), field background, border, and error colors.

Behavior settings

This tab will help you set up your form's behavior, basically when and where the form should appear.

Display settings will help you decide when you want to show this form to a visitor. You can base it on:

  • Page visits - set the number of pages the visitor has to view for the form to appear;

  • Time on page - set the amount of time (in seconds) that the visitor needs to spend on your website for the form to appear;

  • Scroll depth - set the percentage of how far the visitor needs to scroll on the page for the form to appear;

  • Exit intent - set the form as exit intent if you want the form to occur when the visitor is about to leave the page.

Note! You can use all display options at once, but we advise keeping it simple. All of the rules are connected by "OR" logic, meaning if you choose a few display options - users need to visit a number of pages or spend some time on the page or scroll % of the page to see the formπŸ“š

Targeting settings allow you to display the form only on a specific URL of your website or/and not to display the form of a particular URL. Page targeting options therefore include:

  • It appears on the URL, which displays the form on a specific page;

  • It does not appear on a URL that doesn't display on a specific page;

  • Additionally, you can add or remove multiple URLs on the page.

Note! All of the rules are connected by "AND" logic, meaning that form will appear/will not appear on the all URLs mentionedπŸ“š

Frequency settings define the time form will appear again if the visitor didn't subscribe after the form was displayed. You can decide to not show the form again after interacting with it for:

  • A number of days limit;

  • A number of hours limit.

Layouts

Choose from all the different types of layouts β†’ drag&drop them to the place to form content. Once you add a specific layout, you can start adding blocks right to it.

Items (Blocks)

On the left sidebar, you will be able select and drag&drop specific content items right to your form content.

You will be able to add the Email field, Text, Button, Image, Legal text, and Line/Space blocks to perfect your popup form.

Email field block

This block allows you to add an email input field anywhere you want in the form - just drag and drop the block to the needed position. Once added, you can change the input placeholder text, make the email field required, and change the text for the required message (the default one is "This field is required"). Add the label for the field by naming it "Email" or something like "Leave your email here," etc. Alongside, you will be able to edit the error message for the unsuccessful email submission (the default one is "The email address must contain @ and a valid domain").

Text block

Add any text you'd like to your form's content. To edit the style formatting of your text in a specific block, select the part you want to update. A menu with multiple options to transform your text will appear right below your chosen text β€” navigating to the right-side menu to edit the text style, font, size, line height, and font color.

Button block

An essential feature is to add a button to collect an email submission. At the same time, you can add a button with a link to a specific page of your website. You can switch button action between submitting the form and linking to a particular page. You can adjust the text, link, button style, and alignment. Don't forget that you can define button styles in Theme settings.

Image block

Select the image you want to add to your form content; remember that you can use JPG, PNG, and GIF formats under 2000px in dimensions. You can also add the URL to which your Image will link once the user clicks on this Image. To resize the added Image, hover to the corner of the Image and resize it the way you want.

Legal block

Add a legal block with a GDPR compliance template prepared directly to your form. In the New form builder, GDPR text is more concise, however, you need to add the privacy policy link. As a best practice, we would recommend providing the info on how customers' emails are used (for what marketing purposes) in your privacy policy.

For this sake, you will be able to adjust the text and add your privacy policy link to be fully compliant. You can also edit the error indicating that this checkbox is required. Read more about GDPR in the dedicated guide.

As a result, your customers will need to check the legal box before submitting the form.

Line/space block

Add a line to separate content or make more Space using the Line/space block. You can switch between Line and Space types on the right-side menu. You'll get to pick the line's border and width, style, alignment, and color. For Space, you get to choose space height in px.

Undo and redo buttons

You can redo/undo the changes you made to the form using the buttons in the top right corner. There are unlimited undo steps, so you can get to the beginning of designing with the possibility of starting from scratch.

Note! Reloading the page restarts the feature, so undo history will be lost.

Once you finalize editing your form, click Enable to make it live or Save and Close to save it as a draft πŸš€

Success/Error messages

A success message is shown for your customers once they successfully submit the form. You can fully customize your success message: change the design, add buttons and adjust it to suit your needs. To edit the success message, switch to Success at the bottom menu of the form builder.

Once switched, you can edit the success message the same way as the actual form. Click to edit the text, drag and drop any layout you want, and add any blocks you wish to - be creative and promote your brand πŸš€

Default error messages are written next to each field. We give the best recommendation on an error text, but you are free to customize them according to your needs. For example, the default Required message error for the Legal text block is "This field is required."

This is how the error could look on the website if the box is not checked. Don't forget that the error text color can be edited under Theme settings β†’ Fields β†’ Error color.

Still, have any questions? Feel free to contact our support team at [email protected].

Did this answer your question?