Перейти к содержимому

Forms

Forms are a versatile and effective marketing tool, hence their great popularity in the e-commerce industry.

How using forms can benefit your business?

  • It is a great way to acquire potential customers, a.k.a. you will generate more leads. A newsletter subscription form placed on your website will help you turn anonymous users into potential customers and, with further actions, into loyal customers.
  • Collecting information about customer preferences will be much easier. You can use such details to tailor your offer and marketing communications to cuntomers’ needs.
  • You will also gather customers’ opinions about your products, services and purchasing experiences. Implementing suggested changes will give you an advantage – they will notice that you listen to them.

Requirements

Before you start creating forms, make sure that:

  • The Web Tracking channel is correctly configured. This step requires installation of the
    tracking code on your store’s website.
  • You have marketing consents configured in the platform. By filling out the form,
    the customer will have to consent to being contacted. You can configure the following consents for use in forms: for email messages, for SMS messages, or a general consent.
  • You have implemented the data layer on your store’s website. It is a layer in the website code that stores and organizes information about your online store users’ behavior (clicks, interactions with forms and placed orders). We send the information collected in the data layer to ExpertSender using the above-mentioned tracking code.

Forms – dashboard

In the side menu, select Automation > Forms. There you can find a table with the forms you have created, sorted by status:

  • All – Contains all created forms, including deleted ones.
  • Status – Displays the current status of the form: active, inactive, draft or deleted.
  • Campaign ID – Campaign identification number.
  • Name – A unique name of the campaign that will facilitate its identification.
  • Date of creation of the campaign.
  • First activity – Date and time of the first recorded action performed by the campaign recipient.
  • Last activity – Date and time of the last recorded action related to the campaign.
  • Revenue – Revenue generated by the campaign, given in the default currency of your ExpertSender account.
  • Options – Details, editing, deleting the form.

Types of forms

Using ExpertSender CDP you can create two types of forms:

  1. A pop-up form with fields to be filled in by your customers.
  2. A form embedded in your website, matching the appearance of your e-store.

You can create both forms in the editor. Content design looks identical for both types of forms – the main differences lay in the settings.

Click Create form > Pop-up and go to the editor. In the next steps, adjust its settings:

  1. Give the form a name. It will be visible in the table and will make it easier for you to find the form.
  2. Select the page on which the form should be displayed.
  3. Set the time range in which the form should be displayed to your website’s visitors.
  4. Select how often the form will be displayed: once per session or on your own schedule.
  5. Select the metrics you want to track for this form.
  1. Select the event that will trigger a pop-up form.
  2. Decide what will happen after submitting the form.
  3. Select Confirmation if you want to send users an automatic confirmation message after submitting the form:
    • Basic confirmation is available in Settings > Consents > Confirmations > Default message.
    • Custom confirmation can be designed specifically for this form.
  4. Set additional conditions for displaying the form: page type and address, session duration, number of pages visited or opting out of re-displaying the form to customers who have already submitted it.
  5. Decide who will be the recipient, what consents are necessary to be able to see the form and where the customers to whom you will display the form should come from.

Placement on the page

In this section you can decide how the form will be displayed on the computer, phone or tablet screen.

In the left panel, set:

  • Position of the form on the screen – central, left, right, top, bottom.
  • Fixed position – if you want the form to be displayed in the same place on the screen.
  • Form size – enter the window width and height in pixels or percentages. The Fit to content option activates additional fields in which you can set:
    • Margin – distance of the form from the edge of the store window.
    • Padding – distance between the form content and its edges.
  • Rounded corners – this option allows you to round the corners of the pop-up form.
  • Close button – this option allows you to close the window after clicking the button.
  • Modal mode – adds a gray, semi-transparent blend, against which the window with the form is better visible. This mode also allows you to interact with an area outside the form.
  • Close pop-up by clicking on the background – allows the user to quickly close the window with the form and enter your online store.

In the window below, enter the target address of the page where the form should appear and check how it is displayed on your website.

Embedded form settings

Click Create form > Embedded on page. In the next steps adjust the form settings:

Basic settings

  1. Enter a name for the form. It will allow you to find the form in the table.
  2. Select the page where you want to add the form.
  3. Set the time range in which the form should be displayed to your website’s visitors.
  4. Select the metrics you want to track for this form – UTM powered by Google Analytics or your own custom parameters.

Conditions and audience

In the After form submition section:

  1. Decide whether you want to display a thank you page to the user who submitted the form. You can design it in the Content step.
  2. Select the Hide form option if you want it to be unavailable to a users who have already submitted it.
  3. You can also redirect users to another page.
  4. Select the Confirmation option if, immediately after submitting the form, you want to send users an automatic message confirming that, e.g., the subscription to the newsletter has been successful. In this step you can decide whether you want to send:
  5. Basic confirmation, selected in Settings > Consents > Confirmations > Default message.
  6. Custom confirmation designed specifically for this form.

In the Conditions section, set:

  1. Page type on which the form will be displayed: product page, cart page, payment confirmation page, other.
  2. Page address – enter the keywords, phrases or elements of the domain name that the website URL should contain for the form to be displayed on it:
    • Select the Condition that the value entered below should meet.
    • In the Value field, enter the keyword that must be contained in the URL, or enter part of the URL.
    • In the Test value field, enter the address of the page or subpage on which you want to test the form. Then click Test and check if the form displays on the page.
  3. Session duration – select the minimum and maximum time or set the time range during which the form should be displayed.
  4. Number of pages visited – set the number of pages after visiting which the form should be displayed. Also indicate the type of page the user must have visited for the form to be displayed.
  5. Select the Do not show form if already submitted option if you want to prevent the form from being displayed to users who have already submitted it.

In the Audience section, select who you will display the form to:

  1. New/returning customers.
  2. Customer / non-customer – whether the form should be displayed to current customers of your store or only to people who are not yet your customers.
  3. Consents – decide how many and what consents recipients must provide in order to see the form.
  4. Session source – specify where the customers who will see the form should come from, e.g., social media, direct entry to the website.

Placement on the page

Select a place in your e-store where the form will be displayed. CSS selectors will help you with this – you can find a short explanation of what they are in the What is a CSS selector section.

  1. In the CSS Selector section, enter the name, ID, or class of the selector that will be the landmark for the form. According to this selector, we will place the form on your store’s website. How do you find a CSS selector on any page?
  2. In a separate tab, open the page where you want to place the form.
  3. Hover over the element on the page that you want to place the form relative to (above, below, or inside the element).
  4. Right-click on the element and select Inspect from the context menu.
  5. A window with the website code will open on the right-hand side of the browser.
  6. You will see the page element you selected highlighted in blue.
  7. Hover over it, right-click and select Copy > Copy selector from the menu.
  8. Go to the form editor and paste the copied text in the CSS Selector section.
  9. Make sure that the id selector is preceded by a hash and the class selector by a dot.

In the Form position relative to the selector section, select its position on your page in relation to the previously selected selector:

  • First inside the element – The form will be displayed as the first item in a group of other items. It may be a permanent module visible on the store’s website, containing, e.g., text, photos and buttons. The form will be displayed inside such a module, before the elements contained in it.
  • Last inside the element – The form will be displayed as the last item within a group of other items.
  • Before the element – The form will be displayed before a single element, e.g., a block of text or a product photo.
  • After the element – The form will be displayed just below a single element, e.g., a block of text or a product photo.

Live test your form – insert the address of the subpage where you want to display the form and click Test. Check whether the form you designed is displayed correctly. The preview will work only on pages where our tracking code is placed.

What is a CSS selector?

A CSS selector indicates a specific element on a website, e.g., text or a photo, but also entire modules composed of many elements, e.g., menu bar, page footer, module with blog articles, etc. 

In forms, the CSS selector is used as a landmark. It indicates in relation to which element on the webpage you place your form , e.g., in relation to the menu bar or a photo of a given product. 

The following selectors can used to embed form on a webpage: 

  • name – e.g., ‘p’ is an element called ‘paragraph’, ‘h’ is ‘heading’: h1 
  • id – element identifier, e.g., footer; this selector is always preceded by the hash: #footer 
  • class – always preceded by a dot: .yellow

Design the form

In the Content section of the editor you can design the content and appearance of the form. Here you will find a ready-to-edit template, but you can also design your own form from scratch.

Designing a form as a pop-up or as an embedded form on a website is done in the same way:

  1. On the left, in the editor panel, click the Content section, and then expand the Structures bar.
  2. Drag the structure with the selected number of containers to the gray workspace visible in the center. Design a form frame that you will later fill with content blocks.
  3. Return to the editor panel and expand the Blocks bar.
  4. Select the Form block and drag it to the selected structure.
  5. Click on the block to launch the edit menu on the left.
  6. In the Data section, select:
    • Attributes, i.e., characteristics (data) of customers that you want to collect using the form. Each feature, system and custom has a specific type, e.g., number, text, date, picklist. We have assigned a field type to each type of feature. For a ‘date’ feature it will be a calendar, for a ‘yes/no’ feature (e.g., loyalty card) it will be a switch or a checkbox.
    • Consents that the customer must provide by submitting the form.
    • Label of the button used to submit the form. A simple call-to-action is enough, e.g., ‘Send’
  7. For each of the selected fields you can:
    • Give your own field label, e.g., email address, name.
    • Add supporting text that will appear in the form field and will disappear when the user starts entering data.
    • Decide whether the field is mandatory.
  8. After adding all the fields, go to the Appearance section where you can design:
    • Appearance of the entire form block (in General Settings section).
    • The appearance of selected fields and the controls assigned to them: switch, checkbox, option button.
    • Button appearance.
  9. If in the Triggers section the option Show a thank you page after submitting the form is selected, a toggle will appear in the content editor allowing you to design a thank you page.

Design a thank you page

In the same section, you can design a thank you page, i.e., the view that will be displayed to the user after submitting the form.

Use the thank you page to confirm your customer has submitted their information and provide additional tips or product information.

Using the «thank you» message and additional graphics or content you can create a positive customer experience.

A thank you page will also help you track conversions and campaign performance through traffic analysis.

You can set the thank you page display options in the section:

  • Terms and audiences – if you are creating an embedded form on a page.
  • Triggers – if you are designing a pop-up form.

After selecting this option, go to the Content section. Above the working area you will find a switch.Set it to After submitting. The thank you page is now ready for editing.

If you are using the content editor on our platform for the first time, this article will help you familiarize yourself with its capabilities:

Summary

In the Summary you will find a preview of the form and a list of entered settings. Click Activate to launch the form.

Privacy policy