MailChimp Form Module

Integrate your MailChimp lists with your forms to easily gather and store the data from your website that is updated in your MailChimp list automatically. It is possible to find the MailChimp Form Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference.

 

Edit Form Module

To open the editing menu, double-click on top of map you wish to modify or hover the mouse on top of it to find the blue module and click on the Edit option. 

 

1. Content

1.1. Edit & Add Elements

By default, the MailChimp Form Module initiates with a single element with the email type. You are free to add more elements from different types by clicking on the + Add Element button on the top and bottom of the existing elements. You can then choose to edit elements by clicking the settings icon that appears on the right side once you hover on the element. To delete them, click on the trash icon next to it. To move them, hover your mouse on the vertical dots on the left side of each element and drag them to your preferred position.

 

1.1.1. Types

You can choose the type of element you wish to add - text, email, text area, select, checkbox, radio, location and datepicker. You can learn more about each type of question here.

 

1.1.2. Label

In the label field you should write the question you want to see answered. 


1.1.3. Field Width

This section allows you to define exactly how the form should be split across multiple columns. To do so, always consider the column where the module is added to as 100% width. The field width set at this stage will determine the extent to which that element will cover the full width, e.g. if you set it as 50%, the element will cover half of the column.


1.1.3.1. 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%. Please refer to the image below for a quick visual representation.


1.1.3.2. 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.

 


1.1.4. Text Inside Field

The text inside field is the text displayed in the answer box. It can be a tip, indication or another helpful direction for your visitor to answer the question.

 

1.1.5. MailChimp Tag 

Insert a MailChimp merge tag to personalize or specify content easily. The merge tags correspond to field data in your MailChimp lists and are used to include personalized or dynamic content in your campaigns. Read more about how to use MailChimp tags here

 

1.1.6. Required

When this option is enabled, this means that when submitting the form, that question can't be left blank and must be answered.

 

1.2. Add Opt-In Option

As a website owner, you might be legally obliged to get consent from a visitor when collecting their data from a form. The Opt-In Option allows you to ask for this consent and easily display or refer visitors to your privacy policy. 

  

1.2.1. Label

This text will appear next to the tick box.


1.2.2. Target

When users click the label, they will be directed to either an external URL, a page on your website, or view an overlay directly on the form.


1.2.3. Required

When this option is enabled it means that when submitting the form, the opt-in box must be ticked. 


 

 


1.3. MailChimp API Key

Insert your MailChimp API key in this field. Do you need help to locate your MailChimp API key? Click here!

 

1.4. MailChimp List ID

Insert the MailChimp List ID for the particular MailChimp list you want the data to be stored. Do you need help to find your mailChimp List ID? Click here!

 

1.5. Submit Button Label

In this field you can choose what the submit button will display.

 

1.6. Email Recipient

In this field you should add the email to which you want the answers to be sent to. If the email recipient is not added the form data will only be added to the Mailchimp mailing list.

 

1.7. Thank you Message

You should write a small thank you message thanking those who have submitted a form for their time and attention; you can do it freely in this section.

 

1.8. 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 in order to verify that the visitor is human.


1.8.1. Use invisible spam protection

Instead of having the reCAPTCHA box appear visibly on your MailChimp Form module, you can enable '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. 

The reCAPTCHA is, however, not entirely invisible on your website. With spam protection enabled, Google - the owner of the reCAPTCHA technology - captures visitor information from your website and are therefore legally obliged to display their privacy policy and terms and conditions. There 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. 

 

1.9. Go to Page on Submission

After submitting the form you can redirect the visitors either to an external website or another page in your website.


2. Styling

2.1. Background

In this section it is possible to choose a solid color for the module background as well as adjust the height and width of the map. Finally you can select the style of the map - default, black and white, and blue water.

 

2.2. Border

Define the map's border color, width, style and radius. 

 

2.3. Spacing

Adjust the spacing of the map, both in terms of margin and padding.

 

3. Settings

3.1. Margin Between Fields

Choose how big the margin between the form elements should be. Write it down in the box or use the slider moving it to the left or right to decrease or increase the margin size, respectively.


3.2. Note Field

In this section you can write a note that will be displayed in small letters before the submit button.


3.3. CRM Data Collecting 

In this section it is possible to define whether you wish to colect data from this form or not. If you want to collect data from the form, simply toggle on in front of the option and give a name to the data collection. You will be able to see the form submissions under the CRM tab, on the Forms menu. Read all about CRM and Forms here!


4. MailChimp Forms Global Styling

Instead of individually styling each Form module it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Forms menu. These menu applies to both regular forms and MailChimp forms. Here you will be able to globally define most of the characteristics of your forms, including spacing, fonts and many other design options.Click here to read more about Forms Global Styling.


5. Email when MailChimp form has been filled out

When a MailChimp 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 (see section 1.5. above). 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 and whether this was required or not. It will also tell you from which URL the form was submitted from and at what date and time.  

 

Anything we’ve not covered?

Contact Us