Mailchimp Subscribe Form Shortcode

Updated on June 4, 2018

The Mailchimp subscribe form shortcode allows you to display a subscription form to get user’s email and transfer the to Mailchimp with a single click.

In this article, we’ll explain how to display Mailchimp subscribe form shortcode and configure the style.


Displaying the Mailchimp Subscribe Form Shortcode

To add the Mailchimp subscribe form shortcode to a page or post follow the steps below:

1Add or edit an existing page.
2In the Visual Composer section, Click on the + button.

Mailchimp Subscribe Form Shortcode - visual composer screen

3In the Add Element pop-up screen, search for Mailchimp Subscribe Form and click on it to be added to the page.

Mailchimp Subscribe Form Shortcode - add element

4When the shortcode is added, a new pop-up screen called Mailchimp Subscribe Form will open. Configure the settings as required. More settings are explained in the next sections.

Mailchimp Subscribe Form Shortcode - Mailchimp Subscribe Form Settings

SettingDescripiton

List ID You can go to your Mailchimp list > Settings > List name > List ID and then copy the ID to this field. Learn more in this link.
5Click on Save Changes and publish or update the page to check the result.

Configuring the Mailchimp Subscribe Form Settings

There are more settings in the Mailchimp Subscribe Form Settings pop-up that allow you to configure the style of the Mailchimp Subscribe Form.

Configure the General Settings

SettingDescription

Placeholder Text Text to display in the form input holder.
Button Text Text of the form’s submit button.
Send Opt-In Mails Sends a ‘click to subscribe’ mail if the YES option is enabled.
GDPR Consent Check? Displays a consent checkbox in the form.
GDPR Consent Checkbox Text Adds a custom text next to the consent checbox.

Configure the Layout Settings

SettingDescription

Corner Radius This option will adjust the corner radius of the input and button border (min: 0px – max: 100px).
Space Between Button And Input Adjusts the space between the button and the input (min: 0px – max: 20px).
Size There are two options Large and Medium to control the input and button sizes.

Configure the Style and Color Settings

SettingDescription

Button Background Color Controls the background color of the button.
Button Text Color Controls the text color of the button.
Button Border Style There are four styles: Solid, Dotted, Dashed and None.
Button Border Width Controls the width of the button border.
Button Border Color Controls the color of the button border.
Text Input Background Color Controls the background color of the text input.
Placeholder Color Controls the color of the text input placeholder.
Text Input Border Style There are four styles: Solid, Dotted, Dashed and None.
Text Input Border Width Controls the width of the text input border.
Text Input Border Color Controls the color of the text input border.

Configure the Hover Settings

SettingDescription

Button Background Color Controls the background color of the button in Hover state.
Button Text Color Controls the text color of the button in Hover state.
Button Border Color Controls the color of the button border in Hover state.

Configure the Focus Settings

SettingDescription

Text Input Background Color Controls the background color of the text input in Focus state.
Placeholder Color Controls the color of the placeholder in Focus state.

Adding a Viewport Animation

To make the Mailchimp subscribe form shortcode visible on the scroll with animation, there is a setting in the Mailchimp subscribe form settings pop-up called Viewport Animation. Using this setting is easy and straightforward but if you need a step-by-step tutorial, read the Configuring a shortcode’s entrance animation article.

Adding an Extra Class Name

The Extra Class Name field in the settings pop-up allows you to add an extra class name to the shortcode. It’s useful when you need to target the shortcode in a stylesheet or JavaScript file.

You can read the Adding a custom CSS class to a shortcode article for further explanation.

Did this answer your question?