MailChimp 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 standpoint. 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 client’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.
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
link (?php wp_head();?)
Hello, i can’t see where the above code is in my header.php to add the link section? Any help would be greatly appreciated. Been trying to add this poop up to my site all day.
Thank you!
Worked perfectly 🙂
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
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.
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
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.
For me it didn’t work. After adding the script as described the page gets stuck loading.
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.
Same for me…. Did you find a way to getting it to work Serban?
You are a genius! It worked for me on Zerif Pro theme on WordPress. Thank you!
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
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.
I’m using Genesis and a genesis child theme. Unfortunately this isn’t working for me, neither did the jquery.js fix. Any suggestions?
I’m sorry. I don’t use the Genesis framework. I currently prefer to build child themes using WordPress default themes.
Hi Deja,
This should work for Genesis. See link below. I did option three (installed the plugin) and cleared cookies and cleared browsing history with Firefox and it worked great.
https://allyssabarnes.com/mailchimp-popup/
Hope it helps.
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?
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!
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?
Never mind! Solved it! Thanks so much for your help!!!!!! You are awesome!!!!
How do you fixed that?
How were you able to solve the close button issue. I am also experiencing the same
HI Michelle – how do you solve the pop up not closing? thanks!
Heyyy!!! I am having the same issue. My popup will not close. Do you remember how you fixed it??
Thank you! Putting the script above wp_head() worked for me.
It works well for me! This is the best solution i found. Thank you very much, Nikki.
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
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.
Hi Nikki – Thanks for your help on this issue. Where should I add “z-index:9999” or even “99999” — within the code or where exactly? thx!
Well, ideally to the stylesheet for your theme (preferably a child theme), usually style.css. I think the ID and class you want is this – #mc_embed_signup .button. But you have to make sure you know which button needs the z-index.
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
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.
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
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.
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.
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.
Fair warning – if you use this solution your site will get flagged as insecure if you are using https.
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.
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.
Hi Nikki! Thanks! So just to be clear, you added the pop-up form’s script to the header file?
When I add the mailchimp script to header/footer, the popup box doesn’t show up and it breaks the hero portion of my theme (OnePress) at the top so the images won’t load. Your reference code doesn’t break anything.
Suggestions?
Thank you very much … that mistake I had Loco … Thank you
How can I implement this on a Twenty Seventeen theme? I went into the header.php, copy and paste the my code from mailchimp but was not able to activate it. Anyone knows how?
the pop is working as it is supposed to work, it pops up and collects the subscriber email, etc., but, it does not send an email to either the subscriber or the person listed on the mailchimp form who is supposed to get a notification when someone subscribes.
Wordpress will send test emails from WordFence. Any ideas on how to fix this?
Hello,
I am also having an issue with this. My page hangs and times out when I use the code.
Is it not possible to create an embed.js in my website directory rather than getting it from Amazon. Wouldn’t you need an account to download from anyway? Quite new at this!
Thanks
Haven’t worked for me too, but congrats on the smart solution
I used a different solution: I added
RewriteRule ^/jquery.js$ /wp-includes/js/jquery/jquery.js [R=301,L]
to the .htaccess file. Now the request gets redirected to the right place.
Thank you, this worked for me! I am using Zerif Lite Theme.
hi,
Could you expand as the Embed code is mean to go into the Header.php? So are you saying paste that and your JS into the header?
Hello Nikki,
Thank you for this solution. However, when I enter the script above my tag, I get a pop up from the theme I’m using (Avada) saying that it expected a tag name and got ? instead. Any idea what’s wrong?
I wish I had the knowledge you do!
Thank you in advance,
Zofia.
You can also modify the .htaccess-file: https://chattymango.com/solution-for-mailchimp-pop-up-form-error-jquery-js-not-found-404/
For anyone still lost, here is a step by step video to help you. Hope it helps you easily add your popup
https://www.youtube.com/watch?v=1TWWCaUj9ks
Thanks, Ricky. Good video. It walks you through adding the MailChimp code to the footer (if you want it to appear on every page). He also provides options to add it to select pages via the sidebar. Plus, he adds a — jQuerynoConflict(); — to the script to solve potential conflicts with other scripts. If you have the option to add scripts to the footer better, it’s generally a better option to improve page loading.
Hi Nikki.
I know this thread is quite old, however, I have tried all solutions and troubleshooting in your instructions and comments, however, pop-up is not displaying on my site.
Before I send my query, just checking if you’re still responding to questions atm?
Thx in advance.
Sorry I didn’t see this sooner. I wish I could add more than I already have here. There are so many different themes and plugins we all use on our respective sites. Any of those could interfere. Definitely, make sure everything’s updated, including your theme. Each iteration of WordPress also embeds more features, which may make some of your plugins obsolete. You may want to not only deactivate plugins you’re no longer using but also consider deleting them. Just make sure you no longer need it, or that you have a copy or know where to get one if it turns out you did need it and have to re-install it. Once more thing, if you’re using site caching, that can interfere with changes to your header.php. Some cache plugins can definitely detect when you update a page or post and flush the corresponding page, but they have no way of detecting changes you make outside of the WordPress platform, like to a stylesheet, footer, or as I mentioned, the header.
Thanks, it’s worked
This is only any use if you know where your header.php is, or even what it is. Otherwise, I’m still none the wiser.
You may want your web designer/developer to do this for you since any mistake can break your site. But if you want to try, here you go:
Header.php is one of your theme files and resides on your web server. It’s accessible through FTP, through your web host file manager, and more easily through your WordPress interface under Appearance > Theme Editor. On the right side, select Header.php from your Theme files. Then you can edit it in the edit window in WordPress. You may want to back up the original header.php before you make any changes so that you can back out of a mistake. If you’re editing through WordPress, from inside the edit window, before you change anything, you can copy all the text in header.php and paste it into Notepad or Text Editor and save it as original_header.php on your computer to back up the file. Then, do your edits.