Mailchimp Multiple Subscription Forms for one list

Question

I embedded three different customized mailchimp forms in an html page that point to one list (each form has two similar fields and one different hidden field).

Everything works excluding one thing. The responses messages (success or error) are displayed in the same page in the div #mce-response only for the first form. In the other two the responses are loaded and displayed in another blank page. I'd like to have the reponses displayed in the same page for all the three forms. I'm not a Java Script user but after a bit of research I found that this deals with the external script:

<script type='text/javascript' src='http://s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js'></script>

Is there any solution through mailchimp settings or we have to use JavaScript file?

I understood that this script is valid only for the first form. Any idea how to do this? Thanks

Answer 1

Apparently using iframes works.

Please refer to this article/video.

Text from the article for explanation:

Instead of pasting the code from the Signup Form Embed Code page into your site, paste it into a text document (using NotePad (PC) or TextEdit (Mac)) and call it “signup-form.html” or something like that. You may want to wrap the form in a div for styling and add some inline styles. So the HTML document will look something like this:

<style type="text/css">
<!--
lots of CSS to make your form look pretty
//-->
</style>

<div id="sign-up">
at least 50 lines of code copied from MailChimp goes here
</div>

Then upload this HTML document (“signup-form.html” or whatever you called it) to somewhere on your server.

Then in order to embed the code on the page (as many times as you want) you call the HTML in with an iframe like this:

<iframe src="http://your-site.com/mailchimp-form.html" frameborder="0" width="654" height="200">
<a href="http://link-to-form-on-mailchimp-site" target="_blank">Anchor text saying "click here to sign up" or something like that for people whose browsers can't read iframes</a>
</iframe>

Answer 2

Use Ajax Chimp. This will (1) prevent redirecting your subscribers away from your page and (2) allow multiple forms.

https://github.com/scdoshi/jquery-ajaxchimp

Answer 3

If you wrap each mailchimp form in a ...., then run this script on the page, it will re-assign all IDs of the non-focused form, and re-bind the submit event. A bit hacky, but it works if you're in a bind.

// only execute if confirmed more than 1 mailchimp form on this page
$(document).ready(function() {

    if ( $('.mc-form-instance').length > 1 ) {

        $('.mc-field-group > .required').on('focus', function() {
            var thisField = $(this);

            // backup all mc-form ids on this page
            $('.mc-form-instance [id]').each(function() {
                var currentID = $(this).attr('id');
                if ( currentID.indexOf('-bak') == -1 ) {
                    $(this).attr('id', currentID + '-bak');
                }
            });
            // change the current form ids back to original state
            var thisForm = thisField.closest('.mc-form-instance');
            thisForm.find('[id]').each(function() {
                var currentID = $(this).attr('id');
                if ( currentID.indexOf('-bak') != -1 ) {
                    $(this).attr('id', currentID.replace('-bak', ''));
                }
            });
        });

        // re-bind
        $.getScript('//s3.amazonaws.com/downloads.mailchimp.com/js/mc-validate.js');
    }
});