Customer engagement modules

Customer engagement modules help you get feedback from website visitors and are good starting points for converting visitors into customers. Find these modules under the category Customer engagement in the Add module overlay.

0_-Customer-engagement-modules.jpg

 

Form

Use the Form module to enable visitors to submit contact forms to you. You can set up the module to send new form submissions directly to your email. All form data can also be collected in Customers within the Editor to help you get an easy overview of form submissions.

1_-Form.jpg

  What is the difference between Form and Form 2?

Distinguishing between Form and Form 2 makes it possible for you to have two different pre-defined layouts for your forms - for example one in light and one in dark colors. This is useful in case you are using different color backgrounds on your pages and one form design may not look good on all of them. By having two form designs to choose from, you won't need to style any of your forms locally.

Hover the module and click on ContentDesign, or Settings on the dropdown to edit your Form module.

 

Content

On the module, you can add more elements to your contact form. An element is information you want visitors to fill in on the form, for example name, email, phone number, etc.


Add element

Click on Add element to add more elements to your form. You move an element by hovering the vertical dots on the left of each element and dragging it to your preferred position.

In the dropdown menu Type, you can choose which kind of element you want to add to your form:

  • Text: a field where the visitor can write in an answer.
  • Email: use this element to collect emails from your visitors. The email element will automatically recognize whether the email address that has been typed in is in the correct format or not.
  • Textarea: very similar to the text type except it allows a longer answer by displaying a larger text area.
  • Select: allows the visitors to answer the question with one option out of a dropdown menu which has been predefined by you. 
  • Checkbox: very similar to the select type, the main difference being that in this type it is possible to have more than one answer and all answers are visible straightaway.
  • Radio: The radio type is the same as the checkbox type except it only allows the visitor to answer with one single option out of a set of answers predefined by you.
  • Location: ideal for collecting addresses from your visitors.
  • Datepicker: ideal if you wish to collect stated dates from your visitors. As the visitor clicks on the box to answer, a calendar will show up where they can pick a date.
  • Phone: use this element to collect your visitor's phone number.
  • Subtitle: allows you to add a static text to the contact form, for example if you wish to divide up a long form into sections with dedicated headlines.
  • File: use this type in case you want the visitors to attach a file to their form submission. Please note that visitors can upload any file type but the file size limit is 25 MB per file. The total attachment limit to a form is 125 MB (5 attachments of 25 MB each). Once a form has been submitted with a file, a URL will be sent to the website owner with a download link; the file will be available for download for 30 days.

2__Content.gif

Field width: on each form element you can select the desired width of the input field, ranging from 20-100%.

Text inside field: any text added here will show in the field on your published website. Use this to provide input examples or write instructions to help visitors fill in the field correctly.

Required field: toggling this option makes a question mandatory - the question must be answered before the form can be submitted.

  Allow multiple fields

Multiple elements: ≤100%: You must be aware that elements will always float to the left and that they will be added to the same row until their widths together surpass 100%.

Multiple elements: >100%: As soon as the sum of all the elements in a row surpasses 100%, the last element added will be moved to a row below.

Read more about the styling of input fields here.

Opt-in: read more about the opt-in option here.

Submission: decide what happens when a visitor submits a form. Here you can customize the submit button text and the thank you message that will appear after the visitor has submitted. You can also add a small note at the bottom of the form to provide additional instructions to visitors.

 

Design

The Design section is where you change the background, border, and spacing on your Form module. For more specific styling options, click More local design options or edit the Global Design of the Form module. For a more thorough introduction to styling, see our dedicated styling guide.

 

Settings

  • Enable spam protection: you have the option to enable spam protection for your form module. Read more about the spam protection options here.
  • Custom tracking name: add a custom tracking name to the form to be able to track form submissions from your visitors on the dashboard of the Editor. Read more about visitor statistics here
  • Email recipient: in this field you should add the email address to which you want new form submissions to be sent to. Add multiple email addresses by comma-separating them. 
  • Email subject: add the subject for the email you'll receive with form submission information.
  • Redirection: after submitting the form you can redirect visitors to an external website or another page on your website.
  • Collect data from this form: enable this option if you want to collect all submissions from the form in Customers. Give the form an appropriate data collection name so you can easily recognize it later on when browsing form data in Customers.


Email notification when a form has been filled out

When a form has been filled out on your website, an email will be sent to the email address you have specified when setting up the Form module. The email contains all the answers and inputs provided by the visitor who submitted it. It will explicitly indicate whether the visitor has consented to privacy terms. It will also tell you from which URL the form was submitted.

Email example:

3_-Email-notification-when-a-form-has-been-filled-out.jpg

  Changing email notification language

The language of the texts in the email is determined by the language your website is in. If you have set the language code/abbreviation to "en" in Language Settings, the email will be in English; if you have set it to "de", it will be in German, and so on. Read this article to learn more about setting up your language(s).

 

  

Mailchimp form

Use the Mailchimp form module to collect form data on your website and send it to your Mailchimp account. Hover the module and click on ContentDesign, or Settingon the dropdown to edit your Mailchimp form module.

 

Content


Add element

Click on Add element to add more elements to your form. You move an element by hovering the vertical dots on the left of each element and dragging it to your preferred position.

On the dropdown Type, you can choose what kind of element you want to add to your form:

Types: find a detailed description of the different element types in the article about the Form module above.

Required field: toggling this option makes a question mandatory - the question must be answered before the form can be submitted.

Add opt-in option: read about the opt-in option here.

 

Design

The Design section is where you change the background, border, and spacing on your Mailchimp form module. For more specific styling options, click More local design options or edit the Global Design of the Mailchimp form module. For a more thorough introduction to styling, see our dedicated styling guide.

 

Settings

The Mailchimp form module settings are very similar to those in the Form module outlined above. The only difference is the following two options that connects the module to your Mailchimp account:

  • Mailchimp API key: insert your Mailchimp API key in this field. Locate your Mailchimp API key here.

  • Mailchimp list ID: insert the Mailchimp list ID for the particular Mailchimp list where you want the data to be stored. Find your Mailchimp list ID here.

 

Email signup form

Use the Email signup form module to collect newsletter signups from your visitors. Collecting and grouping newsletter signups is the first step in interacting and communicating with your visitors and is a good way of potentially converting a visitor into becoming a customer.

4_-Email-signup-form.jpg

Hover the module and click on ContentDesign, or Setting on the dropdown to edit your Email signup form module.

 

Content

By default, the Form module initiates with two elements, email and first name. Edit the elements by clicking the arrow icon that appears on the right side.


Add element

Click on Add element to add more elements to your form. You move an element by hovering the vertical dots on the left of each element and dragging it to your preferred position.

On the dropdown Type, you can choose what kind of element you want to add to your form:

  • Email (required)
  • First name (required)
  • Last name
  • Addressline 1 and 2
  • Postal code
  • Country code
  • Locality (city)
  • Dependent locality (city district)
  • Organization (company)
  • Phone
  • Title (e.g. Mr., Mrs., Dr.)
  • Administrative area (state)

  Storing data

Most of the element types look similar and have the same behavior on your website. The main difference is where they are stored on the Customer profile page. First name goes into the first name field of the customer, address goes into the address field, etc.

 

Field width: on each form element you can select the desired width of the input field, ranging from 20-100%.

Text inside field: any text added here will show in the field on your published website. Use this to provide input examples or write instructions to help visitors fill in the field correctly.

Required field: toggling this option makes a question mandatory - the question must be answered before the form can be submitted.

  Allow multiple fields

Multiple elements: ≤100%: You must be aware that elements will always float to the left and that they will be added to the same row until their widths together surpass 100%.

Multiple elements: >100%: As soon as the sum of all the elements in a row surpasses 100%, the last element added will be moved to a row below.


Submission:
 decide what happens when a visitor submits a form. Here you can customize the submit button text and the thank you message that will appear after the visitor has submitted. You can also add a small note at the bottom of the form to provide additional instructions to visitors.

 

Design

The Design section is where you change the background, border, and spacing on your Email signup form module. For more specific styling options, click More local design options or edit the Global Design of the module. For a more thorough introduction to styling, see our dedicated styling guide.

 

Settings

  • Enable spam protection: You have the option to enable spam protection for your Email signup form module. Read more about the spam protection options here.
  • Enable two-step opt-in: you have to option to enable a two-step opt-in for the Email signup form module. Read more about the two-step option here.
  • Redirection: after submitting the form you can redirect visitors to an external website or another page on your website.

 

User login

The User login module makes it possible for visitors to access password protected pages and their Profile page. In order for logged-in users to access any of your pages, you need to have enabled password protection in your page settings.

  This is a header and footer-only module

The User login module can only be inserted in the header or footer of your website and you will therefore not be able to select it from the Add module menu anywhere else on your website.

 

Design

The Design section is where you change the alignment, background, border, and spacing on your User login module. For more specific styling options, click More local design options or edit the Global Design of the module. In the Design section, you can also change the appearance of the various types of links within the module. For a more thorough introduction to styling, see our dedicated styling guide.

 

Settings

In Settings you can configure the following:

  • Enable redirect on login: with this option enabled, a user logging in through the User login module will land on an internal page or external URL of your choice. You can also choose to link to an email address or file. If you disable this option, users logging in will remain on the page from where they clicked the Loginbutton.
  • Add a link to your privacy policy: when a visitor clicks the Request accessbutton on the User login module, they are asked to fill in their email, name and desired password. As you will be storing this personally identifiable data (email and name), you may want to clearly display your data privacy policy to visitors before they submit their access request. You can link out to an internal page containing your data privacy policy or an external URL. Furthermore, you can input the text you want to appear on the link. The styling of the link inherits from Global Design > Global texts > General text > Link.

    5__Settings.gif

 

Managing access requests

When a visitors requests access, the request will show up in Customers in the Editor where a new user with access status "pending" appears. To approve or reject the access request, click on the pencil icon to the far right to edit the user.

6_-Managing-access-requests-p1.jpg

 

On the user profile, click the Access and groups tab, select which groups you wish to add the customer to (if any), and click the Approve button.

7_-Managing-access-requests-p2.jpg

The customer will get an automated email telling them that their access request has been approved. They can now log in and view password-protected content.

Once a user is logged in, the text on the User login module button changes from "Login" to "My account". From there, users can update their contact details, opt in and out of receiving emails, and log out.

If you wish, you can add a small note just above the area on the user profile page where the user can opt in and out of receiving emails. This can be added in Customers > Settings > Email sign-up note.

6_-Managing-access-requests-p3.jpg

 

9__emailupdates.png

  Styling the user login overlay and user profile page

You can change the design of both the user login overlay and user profile page from Global Design -> Customer engagement.

10__Global_design.png

 

Add opt-in

As a website owner, you might be legally obliged to obtain consent from a visitor when collecting their data through a form module. The Opt-in option available on all types of form modules allows you to ask for this consent and easily display or refer visitors to your privacy policy. Both the Form module, Mailchimp form module, and the Email signup form module include a consent opt-in option, whereas the Email signup form module additionally includes a signup opt-in option.

  Difference between consent and sign-up

The difference between the two opt-in types is that the Consent type links out to the privacy policy on either an external URL or to a page on your website, or shows it in an overlay directly in the signup form. The Sign-up type enables you to enter a message to the visitor directly below the tick box (in other words, it doesn't point out to an external source).


Provide consent 

You have the following options for your consent opt-in:

Link type: provide a link to your data privacy policy. You can select between an external link, internal page, or a pop-up overlay. If you choose to show an overlay, you can either input your privacy policy directly in the module or use a Global Data tag to fetch a legal text from your Global Data.

Required field: toggling this option makes opt-in mandatory - consent must be provided before the form can be submitted.

 

11_-Provide-consent.jpg

Sign up

You have the following options for your sign-up opt-in:

Label and description: the label text will appear next to the tick box and the description text will appear below the label.

Groups: select to which group(s) in Customers you want to add visitors who sign up. Visitors will not see this information displayed anywhere on the signup form.

 

Add two-step opt-in

For legal reasons, you may be obliged to enable two-step opt-in (also known as double opt-in) for your visitors to subscribe to your newsletters email campaigns. By enabling this option, after they fill in the Email signup form, visitors will receive an email where they will be asked to confirm whether they wish to subscribe to your newsletter/campaigns or not. Below you find a visual explanation of the process when the two-step opt-in is enabled and disabled, respectively.

12__twostepoptin.png

 

Spam protection 

  • Enable spam protection: this option prevents you from receiving spam from bots on the internet. It activates a small reCAPTCHA "I'm not a robot" checkmark box on forms in order to verify that the visitor is human.
  • Use invisible spam protection: you can select this option once you have ticked Enable spam protection. Instead of having the reCAPTCHA box appear visibly on your contact form, you can enable Use invisible spam protection which means that visitors won't see a reCAPTCHA at all, not even the "I'm not a robot" checkbox. If a visitor is flagged as "suspicious" by the system, then it will display the usual human validation check when the visitor submits the form.

  ReCAPTCHA visibility

The invisible reCAPTCHA is, despite the name, not entirely invisible on your website. With spam protection enabled, Google - the owner of the reCAPTCHA technology - captures visitor information from your website and is therefore legally obliged to display their privacy policy and terms and conditions. These links are displayed through a small sticker on your website, as shown below. In the Editor, you can decide if you want the sticker to appear in the bottom right or bottom left corner of your website. The appearance of the sticker cannot be modified or styled further as it is not a native element of the Editor.

13__captcha.png

Was this article helpful?
0 out of 0 found this helpful