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:
| Setting | Descripiton |
|---|---|
| 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. |
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
| Setting | Description |
|---|---|
| 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
| Setting | Description |
|---|---|
| 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
| Setting | Description |
|---|---|
| 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
| Setting | Description |
|---|---|
| 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
| Setting | Description |
|---|---|
| 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.
