Mailchimp Subscribe Form Shortcode

Last Updated on

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.

In this article


Displaying the Mailchimp Subscribe Form Shortcode

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

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

Mailchimp Subscribe Form Shortcode - visual composer screen

3
In 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

4
When 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.
5
Click on Save Changes and publish or update the page to check the result.
x
Note: First add your Mailchimp API Key to Theme Options > Global Settings > API Integrations > MailChimp API Key. Learn more in this link.

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.

x
Note: To open the pop-up again, mouseover the shortcode and click on the Pen button.

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.

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.

Was this helpful?

Related Forum Topics

There is no related forum topic

Previous Article:
Next Article:

Can't find what you're looking for?

Open New Ticket