Mailchimp

Mailchimp

Mailchimp is a mailing service for professional working businesses.

Mailchimp allows you to create custom forms for subscribers and place them on your website. We have created some customization options for subscribers form.

Pro tip
Mailchimp has some extra ordinary features like A/B testing for subject lines and automation for mailing, not everybody knows about that.

How to use the Mailchimp block of The Plus Addons For Gutenberg

The Mailchimp block comes with multiple functions. Let’s understand how to use this block in the tutorial below.

Configuration for Mailchimp

We have created a subscription form and added major design and UX customization options. Drag one down here in the playground and start with it.

Table Of Contents

Setting up

Gutenberg gives multiple ways to add Mailchimp into the content building area or we say playground. Check for the “+” icon in the top toolbar or click the “+” icon in the content area or start typing Mailchimp after “/” sign, eg.“/Mailchimp”, in the content area. Gutenberg also provides drag & drop after opening the list of blocks panel.

After placing the block you’ll see three tabs on the right editing panel containing “Layout”, “Style” and “Advanced”. Go and start with the Layout tab.

1. Layout

Content

Style

Select your preferred layout for Mailchimp here. We provide three different styles for subscription forms.

Content Alignment

Align quote content text in left, center, right manner from here.

Name Field

First Name

Do you want to have a first name field?

Last Name

Do you want to have the last name field?

Placeholder

Placeholder text for first/ last name input box.

Width

Width input for first/last name input box.

Birth Field

Birth Field

Do you want to have a birth field?

Month Placeholder

Placeholder text for the month input box.

Day Placeholder

Placeholder text for the day input box.

Width

Width input for the birth field input box.

Phone Field

Birth Field

Do you want to have a phone field?

Placeholder

Placeholder text for the phone input box.

Width

Width input for phone field input box.

Email Field

Placeholder

Placeholder text for the email input box.

Width

Width input for email field input box.

Subscribe Button

Button Title

Input for the button’s title text.

Icon Type

Icon type is a selection of whether you want an icon or not.

Select Icon

On selection of Icon in the previous dropdown, you’ll be displayed a whole list of icons provided by the FontAwesome icon library. If you have purchased licence for the pro plan and activation has been done you’ll be able to use pro icons.

Icon Position

Place icon before or after the button text.

Icon Spacing

Manage space between icon and button text.

Icon Size

Manage icon size from here.

Width

Manage button’s width from here.

Alignment

Align button in left, center or right direction from here.

Extra Options

Groups/ Categories

A collection of contacts, categorized by their interests or preferences. A group consists of a group category and group names. Provided by Mailchimp.

Enter Group ID

An input for adding group ID/s here.

Tags

A collection of contacts, categorized by their tags. Provided by Mailchimp.

Enter Tags

An input for adding tag/s here.

Double Opt-in

Double opt-in provided security by verifying the email which was added by the user in the input. An email is sent to that address for verification.

Double Opt-in Message

Double opt-in message after for fill up.

Redirect To Thank You Page

Redirect To Thank You Page

Enable this and the user will be redirected to your desired page after the form fills up.

Link

Thank you page URL.

Response Message

Loading Subscribe Message

Message to display while the form has filled up and the subscription process is going on.

Incorrect E-mail Field

Problem with email added by the user.

Success Message

Message to display after the subscription is done.

2. Style

The Style tab is used for customizing the appearance of all the Mailchimp components. All these styling options include customizing the fonts, colors, background, margins and padding which are common across all the blocks. So, we have created a single detailed article explaining these Styling Options.

View The Style Tab Article

Prefix Icon

Icon Size

Manage icon size from here.

Icon Color

A color picker to assign a suitable color to the icon.

Icon Adjust

Adjust the icon’s position from here.

Fields

Typography

Assign a size, weight, spacing and much more to fonts.

Placeholder Color

A color picker to assign a suitable color to the placeholder text.

Padding

Put in some inner space to an element.

Margin

Put in some outer space to an element.

Text Color

A color picker to assign a suitable color to the input text.

Background

Apply suitable background like color/ gradient to an input.

Border

Draw a border around the input field and give width and color to it.

Border Radius

Set the radius curve of the input field’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to an element.

Subscribe Button

Typography

Assign a size, weight, spacing and much more to fonts.

Padding

Put in some inner space to an element.

Margin

Put in some outer space to an element.

Text Color

A color picker to assign a suitable color to the button text.

Background

Apply suitable background like color/ gradient to the button.

Border

Draw a border around the button and give width and color to it.

Border Radius

Set the radius curve of the button’s corner.

Box Shadow

Give Box/Text/Drop shadow effect and color to the button.

Response Message

Typography

Assign a size, weight, spacing and much more to fonts.

Text Color

A color picker to assign a suitable color to the message text.

Loading Background

A color picker to assign a suitable color to the loading background.

Success Background

A color picker to assign a suitable color to the success background.

Responsive

Maximum Width

A maximum horizontal expansion or normal width can be set from here.

3. Advanced

Advanced Tab Options are common across all the blocks. So, we have written a detailed tutorial explaining how to use these options.

View The Advanced Tab Tutorial

Was this article helpful?
0 out of 5 stars
5 Stars 0%
4 Stars 0%
3 Stars 0%
2 Stars 0%
1 Stars 0%
How can we improve this article?
Please submit the reason for your vote so that we can improve the article.