Mailchimp newsletter signup with Wordpress

Question

I have been trying to set up a Mailchimp newsletter signup that will work on my wordpress blog.

I cannot seem to find a widget that will install a signup box in the sidebar of my blog and actually add a user to my mailchimp mailing list.

My requirements are that I simply want users to be able to enter their name and email address, click subscribe, get a little popup message that thanks users for subscribing and then bingo, they're added to the mailing list.

Is there anything out there that will do the trick?

I have tried creating the signup for and embedding the HTML code that mailchimp gives me into the sidebar.php section of my blog. I have disabled javascript from the embed code because apparently this can cause issues.

Now, the signup box will appear on the page but when i fill out the fields and click submit the page will simply refresh and spit out a bunch of code in the address bar after the url such as...

http://ch-designs.co.uk/wordpress/?widget-jal_widget%5B2%5D%5Bfx_in%5D=slideDown&widget-jal_widget%5B2%5D%5Bex_sym%5D=%E2%96%BA&widget-jal_widget%5B2%5D%5Bcon_sym%5D=%E2%96%BC&widget-jal_widget%5B2%5D%5Bonly_sym_link%5D=1&ns_widget_mailchimp_first_name=&ns_widget_mailchimp_last_name=&ns_mc_number=3&ns_widget_mailchimp_email=&Subscribe=Subscribe

Suffice to say it does not add anyone to my mailinglist.

Any help would be greatly appreciated. Thanks.

EDIT

I have since tried the following solution but i now get re-directed to a 404:Page not found mailchimp page.

Here is my code...

 <div id="mc_embed_signup">
    <form action="//ch-designs.us12.list-manage.com/subscribe/post-json?u=a0496f5489571ea6dbdf57077&amp;id=a292e14b56&c=?" method="get" id="mc-embedded-subscribe-form" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
    <div id="mc_embed_signup_scroll">
    <h2>Subscribe to our mailing list</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 </label>
    <input type="text" value="" name="FNAME" class="" id="mce-FNAME">
</div>
<div class="mc-field-group">
    <label for="mce-LNAME">Last Name </label>
    <input type="text" value="" name="LNAME" class="" id="mce-LNAME">
</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_a0496f5489571ea6dbdf57077_a292e14b56" 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>

$(document).ready( function () {
    // I only have one form on the page but you can be more specific if need be.
    var $form = $('form');

    if ( $form.length > 0 ) {
        $('form input[type="submit"]').bind('click', function ( event ) {
            if ( event ) event.preventDefault();
            // validate_input() is a validation function I wrote, you'll have to substitute this with your own.
            if ( validate_input($form) ) { register($form); }
        });
    }
});

function register($form) {
    $.ajax({
        type: $form.attr('method'),
        url: $form.attr('action'),
        data: $form.serialize(),
        cache       : false,
        dataType    : 'json',
        contentType: "application/json; charset=utf-8",
        error       : function(err) { alert("Could not connect to the registration server. Please try again later."); },
        success     : function(data) {
            if (data.result != "success") {
                // Something went wrong, do something to notify the user. maybe alert(data.msg);
            } else {
                // It worked, carry on...
            }
        }
    });
}
</script>

Answer 1

Change your form url to

http://ch-designs.us12.list-manage.com/subscribe/post-json?u=a0496f5489571ea6dbdf57077&id=a292e14b56&

hope this helps :)

Answer 2

I had this same issue and there doesn't seem to be a lot of information on this. I was just simply trying to get the form to work without the refresh and page direct. I found a great answer on Stack using ajax. This form worked for me and it's really easy to implement. You use your standard code with a few small changes. Add in some ajax and you're good to go. You can also style accordingly using css. The link to the question and code is here ajax mailchimp signup form integration