How to Set Up a Web Form for Your Website

Place subscription forms anywhere on your site without code changing.

Note!

To publish the form, install the eSputnik 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

Script must be installed on every website page.

‘Get script’ button

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

1. Form Type and Fields

1. Go to Site → Forms.

Forms

2. On the Native forms tab, click on the New native form button.

Creating a new form

3. Select the form type you need: Inline, Modal, or Floating. We’ll create an inline form.

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

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

6. 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:

1. Horizontal:

Horizontal

2. Vertical:

Vertical:

3. Vertical with image:

Vertical with image

4. Horizontal with text:

Horizontal with text

5. Vertical with text:

Vertical with text

6. Vertical with text and image:

Vertical with text and image:

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:

  • Subscription 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 2 tabs with settings – Layout and Content.

Left 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

In this section, you can 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.

Title font

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 desired element and go to Content → Mobile.

Content tab

In the Content tab, you can 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. You can edit its display on the left or in the pop-up settings panel above it.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 width, height, and padding on the left.

Drag and drop

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

Fields settings

To edit a higher-level element, click on it or use the arrow in the pop-up 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 choose 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 text language is determined by the contact's browser.

Validation

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

Picture as the background

Also, in the Content tab, you can add an image to your form and set its display parameters.

Image settings

 

Upper settings panel

Upper settings panel

1. Multilanguage settings:

  • Form appearance is set up only in the version with the default language. Then it's automatically applied to other language versions.
  • 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.

2. Color picker to pick the page background color and see how the form will look.

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

4. Preview of the form and its states.

5. Close without saving.

6. Next.

5. Form Placement

1. Enter the CSS selector of the element you want to add a 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, last.
  • Inside the element, first.
  • 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 → Forms → Particular form → Parameters.

In the Parameters tab you can:

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. Be sure to check how it looks on the web page before publishing the form. To do this, click the View on page button, enter the page URL and click View on page again.

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

Publishing the form

7. Form Analytics

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

  • Views;
  • Subscriptions;
  • Conversions.
     

Analytics

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

Activity dynamics

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