Popup Signup Form

Learn how to build Popup forms using New Form Builder in Omnisend

Ira avatar
Written by Ira
Updated over a week ago

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

Contents

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 (range 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.

You can also change your Form position here:

Colors settings allow you to change:

  • Form overlay color;

  • Form 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.

Close settings allow you to adjust settings to customize the close button style and enable the option to close the form by clicking outside of it.

Behavior settings

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

Audience management settings allow you to assign a tag to all contacts who submit the form, which can help in further segmentation. You can add an existing tag to the form or create a new one directly in the form builder to segment your contacts afterward. Read more about contact tags here.

You can also enable double opt-in here; If enabled, at first, your potential subscriber fills out the signup form, and as a second step, a follow-up email is sent to their inbox for subscription confirmation. Read more in the dedicated guide.

Scheduling allows you to schedule your popup to be visible in defined timeframes. Here you can choose a start date, and your form will start working automatically on this day only, in case you are preparing a form for a campaign that has not started yet.

If you are running a sale with a strict end date, choose an end date for your form, which will be turned off automatically.

If you already know when your marketing campaign starts and ends, just choose start and end dates, and the form will be available only between those dates.

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 appear when the visitor is about to leave the page. This setting will work on desktops, tablets, and phones. It is based on scroll speed, so when users are quickly scrolling up the page, forms with exit intent display enabled will be shown.

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 to specific customer groups or/and on a specific URL of your website or/and not to display the form of a particular URL.

Visitor targeting options include:

  • All Visitors. Show your form to everyone who lands on your website.

  • Don't Show to Existing Contacts. Exclusively target new visitors and potential leads, leaving your existing subscribers untouched.

  • Show to Existing Contacts. Provide exclusive offers and updates to your loyal subscribers.

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;

  • Appears on pages for out-of-stock products.

  • 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๐Ÿ“š

Visibility settings define the devices the form should be shown on. You can choose to show it on all devices, mobile or desktop only.

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.

If this option is left unchecked, the form will appear only 1 time for the visitor and will not appear again.

A/B test is a powerful feature that allows you to experiment with different variations of your popup forms to optimize their performance.

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 to select and drag&drop specific content items right to your form content.

You will be able to add the Email field, Phone number field, Text, Button, Image, Legal text, Input field, Date, Dropdown, Line/Space, Wheel of Fortune, and more blocks to perfect your popup form.

We'll walk you through basic popup items in this guide. If you want to learn more about other items, please follow the link below.

Read more about all Form Items in the dedicated guide.

Email field

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").

Phone number field

With this block, you can add a phone number input field anywhere you want in the form. Once the block is dragged and dropped, you can change the input placeholder text, make the field required, add or remove the label for the field, and change the text for the required message (the default one is "This field is required"). As well you can edit the error message for the unsuccessful phone number submission (the default one is "Must be valid phone number").

With the New Form Builder, you can now select a default country for the form submission, and the field will be always pre-filled with the selected country. The country selected will be reflected in the field as a flag sign + country code + the beginning of the country's phone number. Please note that the full country name won't be shown.

Please be aware that the phone number field requires a legal block to be added to the form (the US requires TCPA, EU requires GDPR). Moreover, you can adjust the legal block according to your country's requirements. Read further to learn more about Legal block.

Text

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

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

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 or TCPA compliance template prepared directly to your form. In the New Form Builder, the legal 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 and phone numbers 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. Read more about TCPA compliance here.

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

Input field

Add an additional input to your form to collect the contact's first name, last name, or city. Like with other field blocks, you can make this field required, label it and change the required message. This type of field can be styled in the Theme settings -> Fields, along with email and phone number fields.

Date

Add an additional date input field to your form to collect the contact's birthday data. Like with other field blocks, you can make this field required, label it and change the required message. This type of field can be styled in the Theme settings -> Fields, along with email and phone number fields. Read more about birthday emails in the dedicated guide.

Dropdown

With the Dropdown item, you can start collecting your customers' gender and country data or create your own property with Custom property. Just drag&drop the block to your form and choose to which profile field it should be mapped: Country, Gender, or Custom property. Manage placeholders, choices, and labels and decide if you want to make this field required.

If you select Custom Property type, you will be able to select existing custom properties or create a new one by simply typing its name. The basic properties that come with Omnisend allow you to gather information like Email, Name, Phone Number, etc., while the custom properties allow you to collect information that isn't included by default. You may be more specific with your contact info using the custom property. Add the choices you need by clicking Add choice. Learn more about custom properties in the dedicated guide.

Line/space

Add a line to separate content or make more Space using the Line/space. 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 ๐Ÿš€

Learn about building Multi-step forms in the dedicated guide.

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 items 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 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.

Subscribed message

Notify your customers if they are already subscribed to the contact list by using the Subscribed message. This message will be shown to all customers who are trying to subscribe using this form, but they are already present in your Omnisend Audience.

The Subscribed section can be found under the Success step so that you can manage the message for already subscribed customers.

Here you can manage the text and add other blocks to the message to correctly manage the expectations of your customers. You can also add a promotional discount for your subscribed contacts for their loyalty.

Teaser

You can also enable Teaser form your Popup. Teaser forms stand out because they appear around the page's edge and create a seamless experience for the users.

Please note if a contact has subscribed using the popup or teaser form - we will no longer show the Teaser to them.

The Teaser is a part of the Popup form. Any Popup form can have the Teaser. You can either add a Teaser to any popup form or create it with a Teaser template in Forms Library.

Teasers also combine with our other features like Mobile only/Dekstop only visibility settings that you select for your popup form. This means you can decide to only show the popup and teaser forms on the Desktop or Mobile or both.

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

Did this answer your question?