1. Home
  2. Docs
  3. Form Elements
  4. Mailchimp

Mailchimp EA Element

EA MailChimp widget can help you to design your MailChimp form easily with lots of customization options. With the help of this element, you can easily get the attention of your visitors and make them subscribe to your newsletter. Here in this tutorial, you’re going to learn how to use the Mailchimp element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Mailchimp Element

»Content

 

Mailchimp Account Settings

⇒Mailchimp List: Choose your Mailchimp list here. First set your MailChimp API Key in the Integrations Settings. Under Elementor Addons > Addons > Mailchimp Settings

 

Field Settings

⇒Email Label: Add the label text for the Email field.

⇒Enable the First Name: Enable/disable the first name field in the form and add the label after enabling it.

⇒Enable the Last Name: Enable/disable the last name field in the form and add the label after enabling it.

 

Button Settings

⇒Button Text: Add the button text of the submit button on the form.

⇒Loading Text: Add the loading text of the submit button on the form that will be shown after you click on the loading button.

 

Message Settings

⇒Success Text: Add the success text here which will be shown after the completion of the submitting process.

⇒Validation Errors: Show/hide the validation error messages on the Mailchimp form.

 

Unable To Use or Found Bugs?

⇒Need Support: Are you in need of a feature that’s not available in our plugin or got some bugs? Feel free to do a Support request.

 


»Style

 

General Style

⇒Layout: Set the layout of the Mailchimp form either inline or stacked.

⇒Background Type: Select a background type for the Mailchimp form. You can select a solid background color or a gradient, or select or upload an image via the WordPress Media Library.

⇒Padding: Set the padding value for the top, right, bottom and left around the form for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value of the form for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the form for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the form container for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Form Fields Styles

⇒Input Field Background: Add a custom background color to the input form fields.

⇒Input Width: Set the input field width manually for different dimensions.

⇒Input Height: Set the input field height manually for different dimensions.

⇒Fields Padding: Padding is the space between the edge of the form field and the content inside it. Adjust the padding using pixels, em or %.

⇒Fields Margin: Set the margin value of the form fields for different dimensions. You can link the values together or customize them individually.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the form fields for different dimensions.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the form field for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Color & Typography

⇒Label Color: Select text color and opacity for the form labels.

⇒Field Font Color: Customize the color and opacity for the field font.

⇒Placeholder Font Color: Customize the color and opacity for the form’s placeholder font.

⇒Label Typography: Set the typography options for the label texts.

⇒Input Fields Typography: Set the typography options for the input field’s texts.

 

Subscribe Button Style

⇒Button Display: Set the subscribe button display either inline or block.

⇒Button Max Width: Manually set the button max-width for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the subscribe button for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value of the subscribe button for different dimensions. You can link the values together or customize them individually.

⇒Typography: Set the typography options for the subscribe button texts.

⇒Text Color: Add a custom text color to the subscribe button for both normal and hover view.

⇒Background Color: Add a custom background color to the subscribe button for both normal and hover view.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the subscribe button for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border for both normal and hover view.

⇒Border Radius: Increasing the border-radius will add circular corners to the border around the button. You can adjust the border-radius in pixels, % or em.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Message Style

⇒Background: Add a custom background color to the success message text.

⇒Font Color: Add a custom color to the success message font.

⇒Text Alignment: Customize the font alignment of the message text for different dimensions.

⇒Typography: Set the typography options for the success message texts.

⇒Padding: Set the padding value for the top, right, bottom and left around the success message box for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value of the success message box for different dimensions. You can link the values together or customize them individually.

⇒Border Radius: Increasing the border-radius will add circular corners to the border around the message box. You can adjust the border-radius in pixels, % or em.

⇒Border Type: Select a border type from the list according to your preference. And then set the border width for the top, right, bottom and left of the success message box for different dimensions. You can link the values together or customize them individually.

⇒Border Color: Add a custom color to the border.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of the Mailchimp Element.


 

Was this article helpful to you? Yes No

How can we help?