Solved: MailChimp Popup Code Not Working In WordPress

Saco Media LLC, IT Consulting and Digital Production Services Saco Media, Simplifying IT for You - We offer IT consulting, network administration, brand consulting, web management services, website design, graphic and logo design, photography and post-production, English and Spanish voice-over narration. smc@sacomedia.com Nikki Saco, English and Spanish Voice-Over Simplifying IT for You SacoMedia.com IT Consulting and Web Design logo
Web Design ,

MailChimp T Shirt imageMailChimp is a platform that helps you collect emails and send notices and newsletters to your site visitors. It’s a useful tool and mostly free to use with sufficient features for the average website owner. One of those features is MailChimp’s popup form builder which is easy to use and pretty elegant from a design standoint. So I was surprised to receive an email today from a client asking me to help add the MailChimp popup script to his website. I thought this was going to be a simple matter of grabbing the code from his MailChimp account and popping it into the page he wanted to use to trigger the popup. Unfortunately, there is a conflict with the way MailChimp calls up jquery and the way WordPress manages it in its core scripting.

After a couple searches on Google, I found out that a popular solution is to place a copy of jquery.js in the root domain for the website. This “fix” didn’t work for my cient’s website. Also I was concerned that putting jquery.js in the root domain would unnecessarily clutter the root and, worse, locally store a jquery file that would not receive potentially necessary updates, unlike the version on MailChimp’s own servers.

What did work was easier and safer. Basically, I helped WordPress find MailChimp’s javascript by adding a link to the script in my client’s header.php file above the ending head tag so that it looks like this:

 <script type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" ></script>
 <?php wp_head(); ?>
</head>

This option allows you to use and manage the popup form right from your MailChimp account. It also lets you embed MailChimp’s script just on the pages or posts you want to use to trigger the opt-in popup. If you’re having a similar issue trying to get MailChimp’s popup to work on your WordPress site, try embedding the link above your ending head tag, clear your browser’s cookies, and refresh the page. Your popup form should now work on your WordPress site.

*Updated 6/5/2017: I changed the location of the javascript from http to https to avoid issues with unsecured content on sites using SSL/TLS.

MailChimp T Shirt imageMailChimp is a platform that helps you collect emails and send notices and newsletters to your site visitors. It’s a useful tool and mostly free to use with sufficient features for the average website owner. One of those features is MailChimp’s popup form builder which is easy to use and pretty elegant from a design standoint. So I was surprised to receive an email today from a client asking me to help add the MailChimp popup script to his website. I thought this was going to be a simple matter of grabbing the code from his MailChimp account and popping it into the page he wanted to use to trigger the popup. Unfortunately, there is a conflict with the way MailChimp calls up jquery and the way WordPress manages it in its core scripting.

After a couple searches on Google, I found out that a popular solution is to place a copy of jquery.js in the root domain for the website. This “fix” didn’t work for my cient’s website. Also I was concerned that putting jquery.js in the root domain would unnecessarily clutter the root and, worse, locally store a jquery file that would not receive potentially necessary updates, unlike the version on MailChimp’s own servers.

What did work was easier and safer. Basically, I helped WordPress find MailChimp’s javascript by adding a link to the script in my client’s header.php file above the ending head tag so that it looks like this:

 <script type="text/javascript" src="https://s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js" ></script>
 <?php wp_head(); ?>
</head>

This option allows you to use and manage the popup form right from your MailChimp account. It also lets you embed MailChimp’s script just on the pages or posts you want to use to trigger the opt-in popup. If you’re having a similar issue trying to get MailChimp’s popup to work on your WordPress site, try embedding the link above your ending head tag, clear your browser’s cookies, and refresh the page. Your popup form should now work on your WordPress site.

*Updated 6/5/2017: I changed the location of the javascript from http to https to avoid issues with unsecured content on sites using SSL/TLS.

Spread the word. Share this post!

33 comments

  1. Reply

    Hi Nikki,

    Firstly great article. I had a question though.

    Is the link or is it the whole of the code you’ve placed above?

    Thanks in advance

  2. Reply
    Alvin

    Hi,

    Thanks for this method. I agree that adding a js script is not the best solution.

    However, after implementing your method, my popup box isn’t able to close.

    Any advice?

    Alvin

    • Reply
      Nikki

      Sometimes buttons that don’t work may be a z-index issue. Something in your site may be loading “above” the MailChimp popup, which means your mouse can’t get to the close button. If you use the Google Chrome browser, see if you can right-click and inspect the MailChimp close button and try adding a high z-index to your style sheet for the MailChimp button close button. Unfortunately, I can’t find a website right now that has a MailChimp popup so that I can grab the css element for it as an example.

  3. Reply

    I think this might solve my problem but could you be more specific as to where to add the above script? I am a newbie and really could use some help. Thanks

  4. Reply
    Marty

    Thanks for your guide, how to run Mailchimp popup on WordPress! You’re man!
    This guide worked for me, not like jquery.js in root.

  5. Reply
    Serban

    For me it didn’t work. After adding the script as described the page gets stuck loading.

    • Reply
      Nikki

      You may want to try disabling your plugins and adding them back one by one. If you determine a particular plugin conflicts with MailChimp, you can then disable it permanently if you don’t need it, or try to replace it with another plugin that performs the same function. If that doesn’t work, there may also be a conflict with something in your theme. The default themes that ship with WordPress are pretty stable.

  6. Reply
    Alan

    Thanks for the help on this. Could you expand a bit more on where I would add this script? Would it simply be added in the same place as the mail Chimp script, in the header html for example or what exactly do I do with this?

    Thanks,

    Alan

    • Reply
      Nikki

      Hi Alan. No. The link to the javascript needs to be added to header.php. You can access header.php through WordPress by going to Appearance > Editor and selecting the file “header.php.” Then look for the ending head tag and pop the script code snippet above it. Be careful when you edit the header.php file. It’s always bettter to create a child theme before customizing header.php, otherwise you may overwriter header.php the next time you update your WordPress theme, if you do. WPMUDev has a pretty good blog on creating child themes in WordPress if you need more details.

  7. Reply
    Deja

    I’m using Genesis and a genesis child theme. Unfortunately this isn’t working for me, neither did the jquery.js fix. Any suggestions?

    • Reply
      Nikki

      I’m sorry. I don’t use the Genesis framework. I currently prefer to build child themes using WordPress default themes.

  8. Reply
    Trey

    Hey Niiki, after placing the script in the header.php file, where in the wordpress home page should i place the code generated by the mailchimp popup form builder?

    thanks in advance?

  9. Reply
    Michelle

    So, what you’re saying is just copying and pasting the mailchimp popup code in there? Just wanna make sure before I make any changes to the header.php file. It’s nerve wracking!

    • Reply
      Michelle

      I did it, it worked! But now there is another problem, the popup won’t close if I tap on the close option so if someone decides not to suscribe to my email list, there is no way for them to go back to my site 🙁 Any idea why this is happening?

  10. Reply
    May

    The form pop up but it doesn’t close even if click on the close button or subscribed. I deactivated all other plugin but the problem persist. Do you have any tips to solve it ?

    Thanks.
    May

    • Reply
      Nikki

      If your button code looks accurate, it may be a z-index issue for the button. Our website designs don’t just depend on width (x-axis) and height (y-axis) but also depth (z-axis). With popups, dropdown menus and image sliders, designers have to style the site so that certain elements load “above” other elements. In Chrome (or Firefox) you can right-click and inspect the MailChimp button element that won’t close. Try adding “z-index:9999” or even “99999” to see if the button works. If it does, add it to your style.css file.

  11. Reply
    Jomany

    Hi,

    WordPress beginner here. Firstly, and I apologize for the perhaps very stupid question, however am I supposed to change the url in your script to match my page or?

    I tried adding your script on my Divi Elegant Themes page, but it did not seem to work. I presume the generated code from the Mailchimp popup should be placed there as well? I placed it above your script. I also tried adding it to the integration editor in Divi, where there is a field for adding code to header and footer. Did not work.

    Only outcome was that it caused my product pictures to dissapear on one of the pages on the site, however they are back now that I deleted the script again… So now I am back to square one – any ideas on what to do/try?

    Thanks /Jomany

    • Reply
      Nikki

      You can’t access the header.php file from the Divi page creator area. You can access it by going to your WordPress dashboard > Appearance > Editor and selecting the header.php file. BEFORE YOU MAKE ANY CHANGES to header.php, copy all the code in the editor window for header.php, paste the code into a text editor on your computer and save it. That way, if you input the code in this blog incorrectly and break something, you can get back to where you were. Be very cautious whenever you use the Editor feature to directly edit your theme’s core files.

      Please note that every time you access Appearance > Editor, it defaults to the style.css file for your theme. Take a good look and make sure you’ve selected the correct file before attempting a revision.

  12. Reply

    I have been trying to find a solution for this popup, do i still include the js script from mail chimp in the page somewhere also how does this work to call your pop that you customized

    • Reply
      Nikki

      You still have to add the rest of the MailChimp embed code in your content somewhere on your site. But since you’ve already told your website where the javascript is located by adding the CDN URL in your site’s head, you can leave that portion of the embed code out.

  13. Reply

    Hi, everytime I add the code you supplied or the code MailChimp supplies in the header.php above … the images go missing and the popup box doesn’t work. Do you have any suggestions… I have tried everything from the jquery.js file to adding a header and footer plugin. I’m panicing the site needs to go live in a couple of days.

    I have now taken the script down.

    • Reply
      Nikki

      You may want to try disabling all plugins but MailChimp and see if it works. If it doesn’t, there may be a conflict with the WordPress theme or framework you’re using. If it does work, activate one plugin at a time to see if you can identify if a particular plugin is conflicting with MailChimp’s script. Also check your code for the popup. If you determine that a plugin is conflicting with WordPress, please identify it in the comments here. There may be another plugin that will serve up the same function without breaking MailChimp.

  14. Reply
    Rachel

    Fair warning – if you use this solution your site will get flagged as insecure if you are using https.

    • Reply
      Nikki

      Thanks for the heads-up. I updated the source of the javascript from http to https to fix unsecured content errors for sites using SSL/TLS.

  15. Reply

    This method didn’t work for me either. I found that it made my page load “hang”.

    I’m considering trying a pop-up plugin instead.

Leave a Reply

Your email address will not be published. Required fields are marked *

rfwbs-sliderfwbs-sliderfwbs-sliderfwbs-slide