ElementsKit now supports Mailchimp integration. With it, you can personalize your sign-up form with attractive and multiple styles.

ElemntsKit MailChimp #

Prerequisites:

Upgrade to ElementsKit Pro to unlock the Mailchimp integration.

Step 1: Open any page or post where you want to use Mailchimp #

Go to Elementor editor and search for Mailchimp

Now, you have to set the API key

Step 2: Generate Mailchimp API Key #

Go to ElementsKit → USER SETTINGS → MAILCHIMP DATA

Step 3: Get Mailchimp API Key #

To get the API key Create a Mailchimp account and Log In with your Username and Password.

1. Go to your account photo
2. Click on your Account & Billing

Expand the Extras menu and click on API keys.

Click on the button “Create A Key”.

• Set an API Key Name
• Click on the button “Generate Key”

Your key is ready.

• Copy it by clicking on the “Copy To Clipboard”
• Click on the “Done” button

Step 4: Insert the MailChimp API #

Now go back to your dashboard.

1. Go to USER SETTINGS
2. Insert MailChimp API Key
3. Save the changes

Step 5: Customizing the MailChimp Widget #

• Go to your page where you’ve draged and dropped Maillchimp Widget
• Select List from the Drop-Down

Create a Campaign: Check how to create a campaign list from your Mailchimp account.

Double Opt-in: It means when someone submits their email, they get a confirmation email first. They must click the link in that email to actually join your list. Without clicking, they won’t be added.

NOTE: As the warning says — if you turn this On here, you must also enable it inside your Mailchimp audience settings, otherwise it won’t work.

Here, you add extra input fields to your signup form beyond the default ones.

When you click on a field (e.g. Email Address) to expand it, you get these options:

• Type: What kind of input the field accepts — Email, Text, Number, etc.
• Label: Heading text shown above the input box.
• Placeholder: Faded hint text inside the empty input box, disappears when user types.
• Name: Internal field ID — must match your Mailchimp MERGE tag exactly (e.g. email, FNAME).
• Required: If Yes, user cannot submit the form without filling this field.
• Show Icon: Shows or hides the small icon inside the field.
• Icon: Choose which icon appears inside the field.
• Icon Position: Sets icon placement — Before (left) or After (right) of the placeholder text.

Customize MailChimp’s form button.

• Submit Button Text: The label shown on the button. Currently set to “Sign Up.”
• Show Icon: Toggles the icon on the button visible or hidden.
• Button Icons: Choose which icon appears on the button. Currently an arrow (→).
• Icon Position: Sets where the icon sits on the button. Before means left side, After means right side.
• Form Style: Controls the button layout. Full Width stretches the button across the entire form.
• Success Message: Text the user sees after successfully submitting the form. Currently “Successfully listed this email.”

To style the form, click the Style tab in the Edit MailChimp panel. Here are the available sections:

• Label: You can change the color, typography and margin of the labels.
• Input Wrapper: It lets you change the column gap, row gap, icon gap, border type, color, box shadow, etc.
• Input: For inputs, you can show or hide the width, change typography, border radius, padding, etc.
• Button: Customize the submit button by changing its position, color, background type, padding, and so on.
• Input Icon: Controls the icon inside input fields with your chosen color, size, background type etc.
• Success & Error Message: You can style the messages shown after form submission by changing its width, padding, margin, text color, background type and others.

After finishing your customization, view the form, fill up the form and submit it.

Step 6: Do the Final Check #

• After submitting the form, go to Mailchimp → Audience → All Contacts
• Check your contact list. Here you can verify that the submitted details like email, first name, and last name are correctly saved.