A MailChimp subscriber popup add on your WordPress site showing some advantage or promotion it’s an awesome way to gain subscribers to your e-mails list. See in this article how to do it on your WordPress using MailChimp forms.
Introducing the MailChimp Subscriber Popup
There are many means of adding a MailChimp subscribe form to WordPress. I tend to use either the MailChimp adds embed forms. The Gravity Forms MailChimp add-on or the excellent MailChimp for WordPress plugin. With the increasing popularity of pop-up forms on websites. So, MailChimp released a brilliant and very flexible popup subscribe form for all MailChimp plans. Most excellent of all is that the MailChimp popup looks beautiful. Moreover, is totally free and is incredibly easy to install on a website. The only problem is that the form doesn’t work on WordPress websites.
So why doesn’t the MailChimp subscriber popup work in WordPress?
I noticed when first adding the popup code by MailChimp. That nothing appears when I loaded any WordPress website page where the popup should have appeared. So, on Google and noticed that many others have the same issue. But couldn’t find anyone that actually has the popup working in WordPress. I tested by placing the code as supplied by MailChimp in both the header and footer but neither worked.
Custom Codes
My code looked similar to:
<scripttype="text/javascript"src="//s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js"data-dojo-config="usePlainJson: true, isDebug: false">
</script>
<scripttype="text/javascript">
require(["mojo/signup-forms/Loader"], function(L)
{ L.start({"baseUrl":"mc.us2.list-manage.com","uuid":"7407194612ca922bbc80e591z1","lid":"es713853t99"})
})</script
Because the MailChimp supplied popup is so much more elegant than third party solutions. Most other WordPress plugins that enable pop-ups. So, we do a bit of troubleshooting. It didn’t take long to figure out that the MailChimp file at //s3.amazonaws.com/downloads.mailchimp.com/js/signup-forms/popup/embed.js tries to load the jquery.js file from the root directory of the domain.
In WordPress, jquery.js is a core script that is supplied with WordPress in the location /wp-includes/js/jquery/jquery.js. There is no jquery.js file in the root directory in WordPress powered websites therefore the failure of the popup to load.
Instructions for getting the MailChimp subscriber popup to work in WordPress
First off a disclaimer is needed; the solution that follows is a hack and goes against WordPress best practice. I’m sure there is a far better solution to mine and if anyone knows one, please let me know.
Now here are the instructions (what we are doing below is creating the jquery.js file that the MailChimp code wants to load however in the file we create we are in fact loading the WordPress supplied version of jquery.js):
- Design your MailChimp popup and copy the code.
- In WordPress install and activate the Header and Footer Plugin.
- In WordPress go to Settings -> Header and Footer. In the Page Head and Footer tab add and save the MailChimp popup code to the Code to be up before the end of the page textarea.
- Open a text editor and paste the following into a new file
jQuery.getScript("/wp-includes/js/jquery/jquery.js")
.done(function() {
})
Using FTP or your cPanel File Manager copy the newly created jquery.js to the root of your domain (this is usually the www directory in cPanel or the httpdocs directory if you use Parallels Plesk Panel).
Your subscriber popup form should now work when you load any page on your website. Keep in mind that the MailChimp popup is with codes so that if a visitor subscribes or clicks the popup close button, the form won’t appear to them again (i.e. don’t fall into the trap of thinking the popup doesn’t work when it actually does). The form remembers not to show the popup again via the use of a cookie therefore clearing cookies from your browser will force the popup to show again.
