Login

Courses

Courses

Omnichannel

Security and Compliance

Integration

Website Integration

How to Set Up Subscription Form for Your Website

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 → Widgets, click the Get script button and specify your site's domain. Install the script on the website before the closing body tag The script must be installed on every website page.

Get script

Follow the steps below to create a widget for your website.

1. Form Type and Fields

1. Go to Site → Widgets and click the New subscription form button.

Creating a new widget

2. Select the form type you need: Inline, Pop Up, Floating box or Floating bar. We’ll create an inline form as an example.

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

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

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

Form settings

2. Form Style

In the Style tab, you can

  • set the colors of the main button, main title, and background. Click on the element's color to change it. You can select a color with a color picker or enter its code. If needed, adjust the transparency and choose a color model.
  • select a template that matches your website style: Classic, Minimalist, Smooth, Decorative, or Modern.

Form design

3. Form Appearance

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

Option #1

Option #1

Option #2

Option #2 

Option #3

Option #3

Option #4

Option #4

Click on the Select button under the option you like. The form editor will open automatically.

4. Form Content

Here you can edit the content for all form states:

  • Signup is a state that a new user sees;
  • Success is a state seen by a user who has successfully submitted a request;
  • Already subscribed is a state seen by an existing contact who has resubmitted the request;
  • Error is a state that a user sees when the request fails.

Left settings panel

On the left, there are placed form structure elements to drag and drop to the form.

Form structure elements

In the top left corner placed buttons for copying, duplicating and cutting form elements, and tools for text editing.

Top editing panel

Right settings panel

On the right, there are 3 tabs with settings – Layout, Content and General.

Right settings panel

Layout tab

This tab is for editing the font and breakpoint value (the screen width for switching to the mobile version).

Text style

Set the font family for titles and text.

By default, the form will use the font set as the main one on the website. To use a different font, please specify its exact name. It must also be installed on the site.

Text style

Breakpoint

Select the screen width, starting from which the display of the form switches to the mobile version. By default, this is less than 576 pixels.

To change the display of elements on the mobile, click on the element and go to Content → Mobile.

Content tab

Edit the particular structural parts of the form.

The structure of a form can consist of the following levels:

  • state,
  • container (for some types of forms),
  • element.

Form structure

To make changes, click on the state, container, or element you want to edit. After that, you’ll see the settings for the selected item on desktop and mobile devices.

Display settings

Note! Settings marked with a lock icon apply to all elements in the level you edit. You can change the synchronization setting by clicking the icon and selecting the needed option.

Lock icon

Input field parameters such as Background, Shadow, and Stroke are set to For all by default. This means they remain unchanged on error. If you want them to change on error, in the drop-down list, select Do not sync.

You can change the arrangement of elements by dragging and dropping them. Edit the margins, padding, and round corners on the right.

Drag and drop elements

At the state and container level, you can change the layout of the fields: from vertical to horizontal and vice versa.

Fields settings

To show the parent element, click on it or use the arrow in the form settings panel.

Arrow to a parent element

In the form editor, you can change the default country code for the phone field. By default, the country code is set according to the country specified in your account settings.

Default country code

Our forms have built-in validation. If the format of the entered data is incorrect, the error text will be automatically displayed. You can select the required fields. Trying to submit a form with an empty required field, the user will see the error text.

All errors are displayed in one of the languages: English, Russian, Ukrainian. The contact's browser determines the text language.

Validation

You can set an image as the background of a structure, containers, or elements (for example, buttons).

Picture as the background

General tab

In the General tab, select the action on click.

Action on click

Upper settings panel

Top settings panel

1. The Back and Forward arrows allow you to undo or redo the changes made to the form.

2. Multilanguage settings.

  • widget appearance settings are performed only for the main language, from where they are automatically copied to all other language versions;
  • in language versions, only the text can be changed;
  • the widget is displayed in the language of the site, which is determined by the value of the lang attribute in the HTML tag; if it's not there, by browser language.

3. The background color of the launcher helps you to check how the button will appear on the real background.

4. Buttons for switching to the mobile or desktop version of the widget.

5. Widget preview.

6. Close without saving.

7. Save.

5. Form Placement

1. Enter the CSS selector of the element you want to add placement to.

CSS selector input

2. Specify where to place the form relative to the found element:

  • Before the element.
  • After the element.
  • Inside the element, first.
  • Inside the element, last.
  • Replace element.

Placement

If you are not ready to specify the form placement, activate the Add placement later switcher.

3. Click Done.

6. Form Parameters

You’ll be redirected to the settings automatically after saving the form appearance. Later you can find it in Site → Widgets → Particular form → Parameters.

Parameters tab

In the Parameters tab you can:

  • Change the form name.
  • Edit the appearance.
  • Edit the display conditions.
  • Edit the placement.
  • Set actions after subscription:
    • select segments for saving contacts;
    • enable or disable DOI;
    • edit or replace confirmation email;
    • select where to direct the contact after clicking the confirmation link;
    • enable or disable onboarding.

By default, a confirmation email previously created in the account is automatically linked to the form. If your account doesn’t have a confirmation email, a basic template will be automatically linked. If necessary, you can edit or create another email. The main thing is that it should contain a button with the Subscription confirmation link.

Confirmation link

The button will automatically be assigned the SysConactConfirmed event type that launches the system workflow.

Event type

Then select where to direct the user after they click the button. You can redirect users to the default thank-you page or a custom page on your site.

Redirect page

Send onboarding emails to engage subscribers and educate them about your product. You can create a series of emails or complex multichannel series in our workflow builder.

Onboarding options

By default, the form will be visible only to you. Check its appearance on the web page before publishing the form. To do this, click the View on page button, enter the page URL and click Open.

After testing the form, click the Visible to website visitors button and save the settings.

Publishing the form

To set up form start and end dates, use schedule button, which is placed on the created widget page.

Schedule

7. Form Analytics

To see the analytics, go to Site → Widgets → Particular form → Analytics to see the statistics on your form:

  • Views;
  • Subscriptions;
  • Conversion.

Statistics are updated once a minute. The following Activity dynamics visualize the same indicators on the chart for a certain period.

Analytics

Any Questions?
We’re always happy to help!
Discount services
Schedule a Call
Fill in the form, and our specialists will call you back as soon as possible.
Discount services
Chat Support
We’re waiting for your questions!
Discount services
Email
Contact the support team