MailChimp Integration

Overview

The easiest email subscription setup. Enfold comes integrated with Mailchimp subscription and it can be added to the page as a builder element or a widget.

To activate the Mailchimp element, link your Mailchimp account from Enfold > Newsletter > Enter a valid Mailchimp API Key to use all newsletter related theme functions.

Please note Mailchimp is a Newsletter Service, available for free for the first 2000 Subscribers!

MailChimp Settings

Mailchimp settings allow you to make changes to the way the form appears and behaves as mentioned in the list below. However, to add more fields or edit form labels you have to update them in your Mailchimp account.

List Selection
Edit Contact Form Elements
Double opt-in?
What should happen once the form gets sent?
Message Sent label
Form Color Scheme
Hide Form Labels

MailChimp Integration

Enfold 3.4 introduced built-in MailChimp integration, in this tutorial you’ll learn how to connect your MailChimp account with Enfold so you can have a newsletter box for your visitors to sign-up.

Finding and entering your API Key.

Assuming you already have your MailChimp account and Lists set-up, head over API Keys and copy your API Key:

Then go to your site’s Enfold Theme Options > Newsletter and paste the key in the field you’ll find there, finally click the “Check API Key” button to fetch your Lists:

If everything went OK you should see something like this:

MailChimp Newsletter Widget/Element

Now to add MailChimp Sign up to your site you have a range of options depending on where and how you want to include it:

As a Widget (Appearance > Widgets > Enfold Mailchimp Newsletter Signup): minimal settings, ideal for a Sidebar newsletter box.
As an ALB element (Content Elements > Mailchimp Signup): more styling options, if you are already familiar with the Contact Form element you’ll find this a piece of cake.
As a Shortcode (Magic Wand tool > Mailchimp Signup): this will generate a [shortcode] that can be used in conjunction with do_shortcode if you need to include it on a custom PHP template or hook.

Code Snippets

How to use the snippets?

Add the CSS Snippets to Enfold child theme styles.
Add the JS and PHP scripts to your child theme functions.php file.
Shortcodes can be used in a text area in pages, posts, sliders and widget areas. Enable debug mode to view the page shortcode.
Enable custom CSS class name support to add your class names to the theme elements.
Disable script merging and clear the cache to view the changes on the frontend.

NOTE: If the code snippets produce a different result on your site, it may be because the settings on your site are different or due to any customization already added to achieve a similar result. Please try removing your customization if any and feel free to change the values in the example codes to suit your design.

Shortcode

[av_mailchimp list='' double_opt_in='aviaTBdouble_opt_in' on_send='' sent='Thank you for subscribing to our newsletter!' link='manually,http://' color='av-custom-form-color av-light-form' hide_labels='aviaTBhide_labels' custom_class='' av_uid='av-9x3o8k']
[av_mailchimp_field id='0' type='text' check='is_email' options='' label='Email Address' width='element_half' av_uid='av-9m7vas']
[av_mailchimp_field id='av-button' type='button' check='' options='' label='Subscribe' width='element_half' av_uid='av-9hku6k']
[/av_mailchimp]

Customization

Label

To change the label color or font style from the default style which is inherited from the theme options. Please use the CSS snippet:

 /*----------------------------------------
// CSS -  Newsletter label
//--------------------------------------*/

.avia_ajax_form.avia-mailchimp-form label {
  color:#8e43e7;
}

Add icons to newsletter labels

To add icons to Mailchimp labels we make use of the pseudo elements:

/*----------------------------------------
// CSS -  Newsletter Icons
//--------------------------------------*/

#top .avia_ajax_form.avia-mailchimp-form label{
  padding-left: 20px;
}
#top .avia_ajax_form.avia-mailchimp-form label:nth-child(1)::before {
  position: absolute;
  left: 0px;
  content:"e805";
  font-family: 'entypo-fontello'; 
}

Input Field

Form field color is inherited from the theme options settings. However, if you like adding custom styling please use the below CSS.

/*----------------------------------------
// CSS -  Newsletter Input fields
//--------------------------------------*/

#top .avia_ajax_form.avia-mailchimp-form input[type='text'] {
  background: #c4dff6;
  color: #00334e;
}

Submit Button

The text and width of the submit button can be edited from the Mailchimp element options. To add custom styles to the submit button please use the below CSS.

/*----------------------------------------
// CSS -  Newsletter Submit button
//--------------------------------------*/

#top .avia_ajax_form.avia-mailchimp-form input[type='submit'] {
  background: #1769ff;
  color: #fff200;
  border: none;
}

Remove placeholder text on-focus

To remove placeholder text on focus:

[placeholder]:focus::-webkit-input-placeholder {
  transition: opacity 0.15s 0.15s ease; 
  opacity: 0;
}

Remove astrex from Mailchimp form field

To remove the asterisk from the newsletter form, add the below CSS to your quick CSS or to child theme styles.

/*----------------------------------------
// CSS -  Newsletter remove astrix
//--------------------------------------*/

#top .avia_ajax_form.avia-mailchimp-form .required{
  display: none;
}

Add mailchimp to all page/post

To add Mailchimp newsletter box to all posts and pages after the content.

Enable debug mode.
Add Mailchimp element on a blank page ( It will be easy to copy the shortcode).
Select the newsletter list and style the form as required.
Copy the shortcode and replace it with the shortcode on both the line that has “return $content” in the below code.
Finally, add the modified code to your functions.php

//------------------------------
// php -  Mailchimp After Page/Post
//------------------------------

function my_shortcode_to_a_post( $content ) {
  global $post;
  if( ! $post instanceof WP_Post ) return $content;

  switch( $post->post_type ) {
    case 'post':
      return $content . "[av_mailchimp list='0000000' double_opt_in='aviaTBdouble_opt_in' on_send='' sent='Thank you for subscribing to our newsletter!' link='manually,http://' color='' custom_class='' av_uid='av-11vqd0']
[av_mailchimp_field id='0' label='Email Address' type='text' value='' disabled='' check='is_email' av_uid='av-xnolg'][/av_mailchimp_field]
[av_mailchimp_field id='av-button' label='Subscribe' type='button' value='' check='' av_uid='av-p79ho'][/av_mailchimp_field]
[/av_mailchimp]";
    case 'page':
      return $content . "[av_mailchimp list='0000000' double_opt_in='aviaTBdouble_opt_in' on_send='' sent='Thank you for subscribing to our newsletter!' link='manually,http://' color='' custom_class='' av_uid='av-lcugs']
[av_mailchimp_field id='0' label='Email Address' type='text' value='' disabled='' check='is_email' av_uid='av-hf65o'][/av_mailchimp_field]
[av_mailchimp_field id='av-button' label='Subscribe' type='button' value='' check='' av_uid='av-6l1ek'][/av_mailchimp_field]
[/av_mailchimp]

";
    default:
      return $content;
  }
}

add_filter( 'the_content', 'my_shortcode_to_a_post' );

Change confirmation message, error message color and font family.

To change the background and the text color of the success and error message please use the below CSS.

/*----------------------------------------
// CSS -  Newsletter Success message
//--------------------------------------*/

.avia-form-success.avia-mailchimp-success {
  background:#2baf2b ;
  color:#fff;
}

/*----------------------------------------
// CSS -  Newsletter Error message
//--------------------------------------*/

.avia-mailchimp-ajax-error.av-form-error-container {
  background:#ee4f4f ;
  color:#fff;
}

Resource

MailChimp 4 WordPress Plugin Integration

In this tutorial, you’ll learn how to integrate MailChimp For WordPress plugin. I’m assuming you already have a MailChimp List set-up and your API Key inserted in the plugin options.

Creating a basic Form

Once you got the plugin installed and configured go to MailChimp for WordPress > Forms and replace the default Form markup with the following (modify according to your MailChimp List structure):

<p>
<label>Your Name:</label>
<input type="text" name="FNAME" placeholder="Your name" required />
</p>
<p>
<label>Email address: </label>
<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p>
<input type="submit" value="Sign up" class="button" />
</p>

Note: make sure the Load form styles (CSS)? the setting is set to No.

Form styling

In order to get the MailChimp form to inherit the Enfold form styles you’ll need to add the following code to Quick CSS or child theme style.css (recommended):

.mc4wp-form form{margin:0!important;clear:both}
.mc4wp-form p br{display:none}
.mc4wp-form label{display:block;visibility:visible;position:relative;margin-bottom:7px;font-weight:600}
.mc4wp-form p{position:relative;clear:both;float:left;width:100%}
.mc4wp-form p.hidden{position:absolute;width:0;left:0;top:0}
.mc4wp-form .form_element_half{width:49.5%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_third{width:32.6%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_two_third{width:66.4%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_fourth{width:24.2%;float:left;margin-left:1%;clear:none}
.mc4wp-form .form_element_three_fourth{width:74.8%;float:left;margin-left:1%;clear:none}
.mc4wp-form .first_form{clear:both;margin-left:0}
@media only screen and (max-width: 479px) { .responsive .mc4wp-form .form_element{width:100%;clear:both;margin-right:0;margin-left:0;float:none} }
#top .mc4wp-form input[type='text'],#top .mc4wp-form input[type='email'],#top .mc4wp-form select,#top .mc4wp-form textarea{width:100%;margin-bottom:0;display:inline;min-width:50px;padding:13px;border-radius:2px}
#top .mc4wp-form select{-webkit-appearance:none;border-radius:0;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAANCAYAAAC+ct6XAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjBBRUQ1QTQ1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjBBRUQ1QTU1QzkxMTFFMDlDNDdEQzgyNUE1RjI4MTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGMEFFRDVBMjVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGMEFFRDVBMzVDOTExMUUwOUM0N0RDODI1QTVGMjgxMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pk5mU4QAAACUSURBVHjaYmRgYJD6////MwY6AyaGAQIspCieM2cOjKkIxCFA3A0TSElJoZ3FUCANxAeAWA6IOYG4iR5BjWwpCDQCcSnNgxoIVJCDFwnwA/FHWlp8EIpHSKoGgiggLkITewrEcbQO6mVAbAbE+VD+a3IsJTc7FQAxDxD7AbEzEF+jR1DDywtoCr9DbhwzDlRZDRBgACYqHJO9bkklAAAAAElFTkSuQmCC);background-position:center right;background-repeat:no-repeat;border-radius:2px}
.mc4wp-form .button{margin:0;padding:16px 20px;border-radius:2px;border-bottom-width:1px;border-bottom-style:solid;font-weight:400;font-size:12px;min-width:142px;outline:none}
.mc4wp-form .modified_width .button{width:100%;padding:13px 10px 14px;min-width:0}
.mc4wp-form p input,.mc4wp-form p textarea,.mc4wp-form p select{-webkit-transition:all .3s ease-in-out;-moz-transition:all .3s ease-in-out;transition:all .3s ease-in-out}

Using the Form

Now wherever (Text Block, Widget, etc) you place the plugin shortcode [mc4wp_form] it will automatically pick up the Enfold form styles:

Playing with columns

If you want to make use of the Enfold form columns you’ll need to modify the Form mark-up accordingly, for example for a one-line form (note the classes added to the paragraphs):

<div class="av-form-labels-visible">
<p class="first_form form_element form_element_third">
<label>Your Name:</label>
<input type="text" name="FNAME" placeholder="Your name" required />
</p>
<p class="form_element form_element_third">
<label>Email address: </label>
<input type="email" name="EMAIL" placeholder="Your email address" required />
</p>
<p class="form_element form_element_third modified_width">
<input type="submit" value="Sign up" class="button" />
</p>
</div>

Result:

Using only placeholders

Remove the “av-form-labels-visible” class if you are planning to not use a placeholder for the form fields.

Extra: Opt-in box at the end of each Post

Add the following to your theme/child theme functions.php:

function add_mc_after_post_content() {
if (is_singular("post")){
?>
<div class="av-sub-box">
<h5 class='av-sub-box-title'>Suscribe to our Blog</h5>
<?php echo do_shortcode("[mc4wp_form]"); ?>
</div>
<?php
}
}
add_action('ava_after_content', 'add_mc_after_post_content');

And the following to Quick CSS / style.css:

/* av-sub-box */
.av-sub-box{ 
  padding: 20px; 
  background: #F4F4F4; 
  width:100%; 
  clear:both; 
  float:left; 
  margin-top: 80px; 
  border: 1px solid #e1e1e1;
  margin-bottom: -40px; 
  border-radius: 3px;
}

Result:

Contributed video:

MailChimp Element Tutorial