Can't get MailChimp Signup form Working with Popup Pro

I'm struggling to get Popup Pro to work on my site with a MailChimp signup form. I read on your support pages that I should be able to just copy and paste a MailChimp Embedded form into the text editor, and it should work, but it doesn't. I've tried using the MailChimp icon in the Wordpress editor toolbar (from your MailChimp sync plugin) but that doesn't work either.

Rather than explaining everything here, probably not very well, I've set up a staging site and a test list on MailChimp so you can jump in and take a look. I've disabled all other plugins etc. and I've tried switching to the Twenty Fifteen theme, and I can't even get the popup preview to display for my Wordpress form.

I'll enable access to my mbpvest.com (staging site) for you to take a look.

  • Martin

    Hi Kasia,

    I disconnected and reconnected my staging site (mbpvest.com) to WPMU DEV, and revoked access and then enabled it again, to see if that helps. Note that the site is using an SSL certificate for my main site, so you will have to accept to proceed anyway, as a warning will be displayed.

    How it's not working -- when I click the preview button, the page goes white and the little waiting indicator just rotates for a long time, until I refresh the page. On the front end, nothing is displayed.

    I've activated the plugin to show after one second on every page on the staging site, so you can also maybe see what's happening here: http://www.mbpvest.com

    The issue occurs regardless of which type of popup type I use. I'm having the same problem on my main server. Both are running the latest version of nginx on CentOS 7.

  • Nithin

    Hi Martin,

    Hope you are doing good today.

    There was a Jquery conflict with your theme, and hence the Popup wasn't able to work properly with ajax settings. I have changed the settings to Page Footer, under PopUp > Settings > PopUp Loading Method.

    Now the popup seems to work fine, please check, and confirm whether it works properly.

    Please let us know if you still need any further assistance. Have a nice day.

    Kind Regards,
    Nithin

  • Nithin

    Hi Martin,

    Hope you are doing good today.

    How do I get the previews working?

    This is really odd, there is a conflict when you try to preview the Popup in your dashboard, I couldn't find any plugin conflict, and it only happens with the current Popup. Your other popup does work fine. Can you please try creating a new popup and see whether it works?

    The issue seems to be site specific, do you have any /mu-plugins enabled? If yes, could you please try disabling it, and check whether it works.

    I'm able to notice that there isn't any option to delete the Popup, the current user doesn't have permission. You can compare the screenshot of my system, and see that the trash link is missing:

    Please let us know how that goes, so that we could give a closer look. Have a nice weekend.

    Kind Regards,
    Nithin

  • Martin

    Hi Nithin, Team,

    Yes, other types of popups work fine. As I said, it's the MailChimp form that I cannot get working.

    Having said that, I also noticed that I cannot delete popups. I restored a database copy from my main site, and tried again, but still cannot delete the popups. Note too that the same problem occurs on my main site as well, which is on a different server altogether.

    They are both running on nginx server, though my main server is now on CentOS 7 while the mbpvest.com staging server is still on CentOS. I doubt this is anything to do with it mind, as the problem occurs on both servers.

    There are no mu-plugins installed.

  • Kasia Swiderska

    Hello Martin,

    Yes, other types of popups work fine. As I said, it's the MailChimp form that I cannot get working.

    I've logged to your site and preview of the popup with Mailchimp form displays without problem:

    Am I missing something here? Please advise.

    Having said that, I also noticed that I cannot delete popups. I restored a database copy from my main site, and tried again, but still cannot delete the popups.

    Unfortunately this is know bug in PopUp Pro. Here is temporary fix for that issue: https://premium.wpmudev.org/forums/topic/cant-delete-popup-in-popup-pro#post-1048176 - let me know if this works for you as well.

    kind regards,
    Kasia

  • Martin

    Hi Kasia,

    It's better, but still not working properly. Firstly, unlike in your screenshot, I saw the following, with slashes and quotes in the fields of the form. Of course the popup displaying is a step forward, but I think there is another reason for that.

    To clean this up, I grabbed the code from MailChimp again, and posted it back into the editor in Text mode, saved the popup and tried to preview it, and it stopped working again on the backend. It did work fine on the front end, but I'm back to not being able to preview the popup on the backend.

    Is it possible that someone from your team changed the form itself before you were able to take a look? A form straight from MailChimp still doesn't work properly on the backend.

    Thanks for the link to the patch to solve the issue of not being able to trash popups. That seems to have worked fine.

    Cheers,
    Martin.

  • Kasia Swiderska

    Hello Martin,

    Is it possible that someone from your team changed the form itself before you were able to take a look? A form straight from MailChimp still doesn't work properly on the backend.

    I was only one that logged to your site recently so it worked without out any change in the code.
    I've tested this issue on my site and when popup is in preview it doesn't use the same method for loading as you set in settings.
    If you change in settings popups to be loaded by AJAX not in the Page footer then you will get the same error on front end like you have in backend in console: jQuery is not a function. It looks like it is conflict with the MailChimp script when loading popups with Ajax.
    I will consult plugin developer if there is something we can do about previews.

    But I also tested shortcode from the MailChimp plugin and this one works in preview and also on the front end

    could you use that one instead of inserting MailChimp embed code?

    kind regards,
    Kasia

  • Martin

    Hi Kasia,

    I was told by Nithin in this thread to change the settings to Page Footer. I can change it to whatever you want to get this form working.

    The MailChimp plugin shortcode isn't going to work for me, as it offers no way to enable the visitor to select which Groups they want to be added to. If that functionality is added, I could consider it, but otherwise I need to be able to get the MailChimp code working.

  • Kasia Swiderska

    Hello Martin,

    No, page footer is correct setting for front end - problem is that method of loading doesn't work in WP admin and that is why previews are not working on back end.
    I've send message to plugin developer if there is way to change that behavior so the preview with MailChimp embed code will also work - he is not currently online, so when I will get answer I will update thread ASAP.

    kind regards,
    Kasia

  • Kasia Swiderska

    Hello Martin,

    I spoke with developer and there is no way to change loading method on the backend. But he also pointed that reason that embed form is conflicting is because it contains JS script with own version of the jQuery - and WordPress uses own jQuery.
    I did some research and in MailChimp documentation http://kb.mailchimp.com/lists/signup-forms/ways-to-add-a-signup-form-in-wordpress and found what they recommend:

    Most WordPress sites work best with Javascript disabled in the form code, or the Naked form.

    So solution here is to use MailChimp without the JS scripts:

    I did test form without the JS scripts and it is showing fine from preview from the popup lists (when preview from the popup editor there is issue with slashes in form fields, but I can see that we have this already reported and developer I aware of this issue).

    kind regards,
    Kasia

  • Martin

    Hi Kasia,

    I gave that a try (turning of JS scripts) and it works fine, but the popup still doesn't display in the admin console. Only on the front end, and only when I load the Popup in the page footer. If you note the following statement about Wordpress AJAX, I think I should go back to using that, as I do use a cache tool, and want to continue to do so.

    WordPress AJAX: Load PopUp separately from the page via a WordPress AJAX call. This is the best option if you use caching.

    But, when I use the Wordpress AJAX option, the popup doesn't display on the front end again. We're back to square one. Even when I tested this with all other plugins disabled it didn't work, so I don't see how it can be a plugin issue.

    You know, I'm trying to replace Sumome with WPMU DEV plugins, so that I can maximize my investment in your service, but if I can't get this popup working, I'm stuck paying both of you each month, and I'd really like to avoid that if possible.

    I'd really appreciate your help to get this working.

  • Kasia Swiderska

    Hello Martin.

    I gave that a try (turning of JS scripts) and it works fine, but the popup still doesn't display in the admin console. Only on the front end, and only when I load the Popup in the page footer.

    I've tested popup code from MailChimp without all the JS and it was working fine on my test site in admin backend. Can you enable again access to your snadbox site and place that code again in the one of your popups?

    kind regards,
    Kasia

  • Martin

    Hi Kasia,

    I've reactivated Support access to my staging site, so you should be able to get back in now.

    I just noticed though, that although I'd checked to turn off JS in MailChimp when I grabbed the code the last time, it seems that the code snippet had not updated when I copied it. When I tested this before the field validation was still working, despite the note on MailChimp that turning off JS script would make that stop working.

    I just grabbed the code again, with JS turned off, and there is no validation as the visitor enters their details, and there is no confirmation shown that they have not been signed up, if they don't fill out all fields, so this not going to work for me after all.

    I've still got the form code with JS script right now because of this, so I'm not sure there's anything you can do.

    BTW, did you also note how the color picker for selecting custom colors is all messed up? Things just aren't right.

    Does your team test on a Nginx server with PHP7, PHP-FPM? My entire site is also running over HTTPS. I don't know if these things will make any difference, but this code is just not working, even on my new server for my main site, which is almost a clean install, but I'm using Nginx and PHP7 as I say. This is becoming a relatively common server, so I hope it is being tested.

  • Kasia Swiderska

    Hello Marin,

    I just grabbed the code again, with JS turned off, and there is no validation as the visitor enters their details, and there is no confirmation shown that they have not been signed up, if they don't fill out all fields, so this not going to work for me after all.

    Unfortunately that is how the clean no-js version works, because all vidation is done by JS scripts - but those JS scripts are conflicting in WordPress backend with native jQuery script - breaking preview.

    I've still got the form code with JS script right now because of this, so I'm not sure there's anything you can do.

    I spoke with developer and at this moment it is not possible to make popup preview with MailChimp JS scripts work on backend
    Now only way is to create page to display popup only there while testing - this way you will also see how theme CSS will apply to form elements (on backend its not possible).

    BTW, did you also note how the color picker for selecting custom colors is all messed up? Things just aren't right.

    Yes, after you pointed that I tested this on my site and replicate this strange behavior. I'm reporting this to developers so they will fix that.

    Yes, we do tests on servers with different versions of PHP (from 5.2 to 7) - but in this particular case JS scripts conflict will be present no matter what PHP version is used.

    kind regards,
    Kasia

  • Rupok

    Hi Martin, hope you had a wonderful day.

    I've found another workaround for previewing PopUp without embedding in any post/page. You can preview your PopUp from the PopUps listing. Please check the attached screenshot for reference.

    Actually on the PopUp editor page, lots of JS are loaded from within PopUp pro plugin to show options, make changes on the fly, save things. So this might be conflicting.

    Please let us know your feedback on this.

    Have a nice day. Cheers!
    Rupok

  • Panos

    Hi Martin ,

    Regarding the slashes you see at the preview you can try adding the following snippet at your child theme's functions.php:

    add_filter( 'popup-template-vars', 'wpmudev_popup_template_vars', 100, 1 );
    
    function wpmudev_popup_template_vars( $vars ){
    
    	if( is_admin() )
    		$vars['content'] = stripcslashes( $vars['content'] );
    
    	return $vars;
    
    }

    As for the js error, I would recommend not to include it at all with the mailchimp code and insert it separately to the footer, eg:

    add_action( 'wp_footer', 'wpmudev_mailchimp_scripts' );
    
    function wpmudev_mailchimp_scripts(){
    
    	?>
    	<script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    	<?php
    
    }

    You will need to replace the js above with the js in your code

    Hope this helps

    Kind regards,
    Panos

  • Martin

    Hi Panos,

    Thanks for your help.

    I don't have the slashes problem any more. I've lost track of why, but that's no longer an issue.

    I tried putting the JS in my footer with your code, and it does enable the the popup to display on the front end, which is a step forward, but when I submit a name and email address, and submit the form, the form isn't updated to show the visitor that they were subscribed. The form just displays again, which will cause them to press submit again.

  • Panos

    Hey Martin ,

    Have you replaced the js in the snippet with the one in your mailchimp code?

    I would need to have a closer look on this to try figure out what is going on.

    Could you please provide admin and ftp credentials? You can send that privately through our contact form: https://premium.wpmudev.org/contact/

    Select "I have a different question?" for your topic - this and the subject line ensure that it gets assigned to me.

    Send in:Subject: "Attn: Panos Lyrakis"

    Admin login
    - admin username
    - admin password
    - login url

    FTP credentials
    - host
    - username
    - password

    - link back to this thread for reference
    - any other relevant urls

    Thanks!
    Panos

  • Martin

    Hi Panos,

    Sorry for the delay in getting back to you. I've been snowed under. Here is the code:

    <!-- Begin MailChimp Signup Form -->
    <link href="//cdn-images.mailchimp.com/embedcode/classic-10_7.css" rel="stylesheet" type="text/css">
    <style type="text/css">
    #mc_embed_signup{background:#fff; clear:left; font:14px Helvetica,Arial,sans-serif; }
    /* Add your own MailChimp form style overrides in your site stylesheet or in this style block.
    We recommend moving this block and the preceding CSS link to the HEAD of your HTML file. */
    </style>
    <div id="mc_embed_signup">
    <form action="//martinbaileyphotography.us1.list-manage.com/subscribe/post?u=3c6b89dc98463676657d98a4e&id=8b1c3e1c47" method="post" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to MBP Newsletters</h2>
    <div class="indicates-required"><span class="asterisk">*</span> indicates required</div>
    <div class="mc-field-group">
    <label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
    </label>
    <input type="email" value="" name="EMAIL" class="required email" id="mce-EMAIL">
    </div>
    <div class="mc-field-group">
    <label for="mce-FNAME">First Name <span class="asterisk">*</span>
    </label>
    <input type="text" value="" name="FNAME" class="required" id="mce-FNAME">
    </div>
    <div class="mc-field-group">
    <label for="mce-LNAME">Last Name <span class="asterisk">*</span>
    </label>
    <input type="text" value="" name="LNAME" class="required" id="mce-LNAME">
    </div>
    <div class="mc-field-group input-group">
    Get information about...

    • <input type="checkbox" value="1" name="group[4697][1]" id="mce-group[4697]-4697-0"><label for="mce-group[4697]-4697-0">General Information</label>
    • <input type="checkbox" value="2" name="group[4697][2]" id="mce-group[4697]-4697-1"><label for="mce-group[4697]-4697-1">Tours & Workshops</label>
    • <input type="checkbox" value="4" name="group[4697][4]" id="mce-group[4697]-4697-2"><label for="mce-group[4697]-4697-2">Press Releases</label>

    </div>
    <div id="mce-responses" class="clear">
    <div class="response" id="mce-error-response" style="display:none"></div>
    <div class="response" id="mce-success-response" style="display:none"></div>
    </div> <!-- real people should not fill this in and expect good things - do not remove this or risk form bot signups-->
    <div style="position: absolute; left: -5000px;" aria-hidden="true"><input type="text" name="b_3c6b89dc98463676657d98a4e_8b1c3e1c47" tabindex="-1" value=""></div>
    <div class="clear"><input type="submit" value="Subscribe" name="subscribe" id="mc-embedded-subscribe" class="button"></div>
    </div>
    </form>
    </div>
    <script type='text/javascript' src='//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script><script type='text/javascript'>(function($) {window.fnames = new Array(); window.ftypes = new Array();fnames[0]='EMAIL';ftypes[0]='email';fnames[1]='FNAME';ftypes[1]='text';fnames[2]='LNAME';ftypes[2]='text';}(jQuery));var $mcj = jQuery.noConflict(true);</script>
    <!--End mc_embed_signup-->

  • Panos

    Hi Martin ,

    Thanks for sending this info

    Two things are causing a js error which stop the proper execution.

    First is that when mailchimp's js is executed it won't recognize the form which causes an error when trying to "read" form's action attribute. This has to do with the way mailchimp's code works.

    To fix this I replicated the validation code by copying it to your custom plugin : mbp_functions/js/mailchimp-validation.js

    In that file I have hardcoded the action of the form at line 198 where it used to contain:
    var url = $("form#mc-embedded-subscribe-form").attr("action");
    I have left the line mentioned above commented out

    The second thing I noticed is when activating WP Rocket's JS minification. Even after clearing cache it continues to load previous js. For now I have left it deactivated so you can make some tests and then try activating it again and check the js console for error reports.

    I suggest trying out our Hummingbird's JS minification which provides options to include/exclude files for minification.

    Please let me know how this works for you

    Kind regards,
    Panos

  • Martin

    Thanks for this Panos.

    I've moved the custom functions and new js code to my main site, and tried this there too, but whenever I click the Submit button on the mail signup form, I jump to a new window, rather than the form displaying a success message.

    I have setup Popup Pro the same way, and brought the same Mailchimp form code over, but it doesn't work the same.

    You can see what I mean on this test page: https://www.martinbaileyphotography.com/test/

  • Martin

    Team,

    I want to thank you all for your amazing help with this issue. But, I'm giving in on this plugin. We've all put way too much into trying to get this working, and it just isn't, so let's put this one to bed. Honestly, even if we get it working, I still have a lot of work left to make the popup look as good as my Sumome popup, and I can't replace my social icons with yours because they don't even come close to the aesthetic of the Sumome icons, so I've decided to keep my Sumome subscription running in parallel with my WPMU DEV subscription. I wanted to avoid that, but there's too much that I can't get working, in addition to this plugin, and I'm beat. I don't know what it is about my site that your plugins don't like, but I'm tired of trying.

  • Panos

    Hi Martin,

    The js file contains the original code from mailchimp but I had to call it locally so I could change the url variable as described in my previous reply (line 198).

    Have you disabled (or at least reset) cache there and deactivated js minification? If not please do so and let us know if this changes anything.

    Could you provide link to your main site so I could check for any js errors? You can send a new response at the email containing your main site's url so it won't be visible here

    Thanks!
    Panos

  • Martin

    Hi Panos,

    Yes, I'd cleared the cache, but when I turned off JS minification the popup wouldn't popup, so I turned it back on again.

    No worries though, as I just posted, I'm giving up on this issue. It's already taken way too much time for all of us. Sorry about this after all the work you put in, but I'm tired of trying, especially when doing so results in my photos not being displayed properly for a few hours.

  • Martin

    I should add Panos, that I don't think there was a problem with the code you added as such. It's just conflicting with my main site. Fancybox is working on my staging site even with your code, but JS minification is turned off. I can't disable JS minification on my main site, because I can't use Hummingbird, so I'm stuck really. Anyway, let's put this to bed. Maybe at some point in the future your team will develop a Popup with native code that works with MailChimp and MailChimp groups, like Sumome, then I'll be able to consolidate with WPMU DEV plugins.