How to Set Up a Modal Window for Your Website

A modal window is a form for collecting contact information that pops up on top of the site window.

Place subscription forms anywhere on your site without code changing.

Note!

To publish the form, install our script on the website. To get a script, go to Site → Forms, click the Get script button and specify your site's domain. Install the script on the website before .

The script must be installed on every website page.

‘Get script’ button

Creating a pop-up form for a website

Form type

  1. To choose the form type, go to Site → Forms.

Site → Forms

  1. In the Native forms tab, click on the New native form button.

Creating a pop-up form

  1. Select the Modal type of form.

  2. Enter the name of the form. Please note that the form name is used to search within the system; visitors won't see it on your website.

  3. Set the input fields to collect data via the form: email, phone number, and/or name.

Type and fields

  1. After completing the settings in this tab, click the Next button.

Form appearance

  1. To set the colors of the main title, background, and button, click on the desired element and select the color.

Colors of the website elements

  1. To select the style of the modal form, click on the template you like. A total of five styles are available: Classic, Minimalist, Smooth, Decorative and Modern. Then click Next.

Website styles

  1. Select the most appropriate form appearance. You’ll be able to edit it as needed:

  • Vertical with image;

Vertical with picture

  • Horizontal with image;

Horizontal with picture

  • Vertical without image;

Vertical without picture

  • Horizontal without image.

Horizontal without picture

Then click Next.

Layout and content of the form

Layout tab

  1. In the Layout tab, you can edit the text style. The default font is Arial, but you can select any other. It must be uploaded to the website.

Text style

  1. In the Breakpoint section, specify the screen width, starting from which the display of the form switches to the mobile version. By default, this is less than 576 pixels.

Breakpoint

Content tab

The settings for basic components and contact fields depend on the chosen form type. To add a component or field to the form, drag and drop the element to the desired area.

Content tab

  1. By clicking on the main title, you’ll see the settings on the left. In the editor, you can set the size of the container, text style, padding, and margins.

Editor with settings

  1. Clicking on the image will open its settings. Here you can upload the picture or find it in internal sources. Also, select its size and positioning.

Image editor

  1. Go to the structure with fields. Set the options you want. In addition to size and margins, you can choose the alignment of inner elements.

Aligning elements

If you want to highlight the field group, change the background of the structure, add a shadow or stroke, round the corners.

Effects for fields

  1. For inputs, you can also adjust all the settings: size, line height, background, text, etc. If the field is designed for a phone number, select the default country code.

Default country code

Specify which fields should be required (name, phone number, email, or all).

Validation

  1. Repeat the above actions to customize the Subscribe button. You can also enable hover effects.

Hover effects

  1. General form settings are the same: set a background, size, shadow, etc. Click on the form body to open the editor.

General form settings

  1. After submitting, the user will see one of the next form states: Success, Already subscribed, or Error. Sсroll down the first screen and set the necessary parameters for each of them.

Form states

  1. In the Content tab → Mobile, you can see how the form will look on mobile devices and adjust its appearance.

Mobile settings

Top panel with settings

Top settings panel

  1. Arrows Back and Forward allow you to cancel or redo the changes made to the form.

  2.  Multilanguage settings:

  • In other language versions, you can only change the text.

  • The form is displayed in the site language, which is determined by the value of the lang attribute in the html tag. If the page code doesn't contain it, then by the browser language.

  1. Buttons for switching to the mobile and desktop versions of the form.

  2. Form preview.

  3. Close without saving.

  4. Next.

Display conditions

To configure the conditions for displaying your modal window, click the Edit button in the Display conditions section. You’ll be redirected to these settings automatically after saving the form appearance. Later you can find it in Site → Forms → Particular form → Parameters.

Display conditions

Here you can choose:

  • Display frequency;

Display frequency

  • When to display;

Form display triggers

  • To whom;

Targeting by activity and devices

  • On pages;

Condition cards for pages

Similar to dynamic segments builder, here you can choose pages to display the form.

  • You can manage the form display using the API: by clicking on a page element or via JavaScript. If you want to use a custom launcher for your form, insert a CSS selector of the call element. To show form on some extra condition, copy the JS function below.

Conditions for displaying the form

Actions after subscription

  1. Select the segments to add contacts to.

Saving contacts to segments

You can add either only new or all contacts.

Adding only new contacts

  1. Set up a subscription confirmation via email. More on Double Opt-In>> 

DOI toggle

  1. Select confirmation email.

Email confirmation

If you haven't a ready message, you can use a default email. If you already have one, click the Replace button to choose it.

  1. Select where to send the user after clicking the confirmation link.

Redirect page

You can redirect users to the default thank-you page or a custom page on your site.

  1. Enable onboarding.

Onboarding options

You can select a welcome email or set up a welcome series through the workflow to engage subscribers. Activate the toggle Only to new contacts to avoid sending a welcome campaign to existing contacts.

Posting the form on the website

Having saved all the settings, check how visitors will see the form on the site. To do this, click on the View on page button.

Form preview

Enter the link to your website and click View on page.

Entering the page URL

If all steps are successful, the pop-up will be displayed on your website according to the specified conditions.

Displaying the form on the website

After testing the form, publish it by clicking on the Visible to website visitors button, then click Save.

Form visibility status

To stop displaying the form, click on the Visible only to you button, then save changes.

Analyzing form performance

Go to Site → Forms → Particular form → Analytics to see the statistics on your form:

  • Views;
  • Subscriptions;
  • Conversions.

The following Activity dynamics visualize the same indicators on the chart.

Analytics

If needed, you can filter report data by date.

Any Questions?
We’re always happy to help!
Request a Callback
Fill in the form, and our specialists will call you back as soon as possible.
Request a Callback
Chat Support
We’re waiting for your questions!
Send a Chat Message
Email
Contact the eSputnik support team
Send an Email