jqueryhtmlajaxformsmailchimp

How to prevent custom Mailchimp form from redirecting on submit?


I have created a custom Mailchimp signup form on a webpage I am working on. Everything is fine, except I don't like how on submit, the form redirects to a new tab that has a message from Mailchimp stating you have joined the mail list. I am wondering if it is possible to prevent this redirect and maybe just display some thank you pop-up message at most.

HTML:

<form action="" id="subscribe" method="POST" id="mc-embedded-subscribe-form2" name="mc-embedded-subscribe-form" class="validate" target="_blank" novalidate>
            <label for="mail">SIGN UP FOR OUR MAILING LIST</label>

            <p class="form-status-text"></p>
            <!-- /.form-status-text -->

            <div class="form-controls no-border">
              <div class="form-group no-border">
                
                <input type="hidden" name="side" value="creativeagency" class="no-border" />
                <input type="email" id="mail" name="MERGE0" value="ENTER EMAIL ADDRESS" class="subscribe-field no-border" required data-validation-type="['presence', 'email']" onblur="if (this.value == '') {this.value = 'ENTER EMAIL ADDRESS';}"
 onfocus="if (this.value == 'ENTER EMAIL ADDRESS') {this.value = '';}">  
         
              </div><!-- /.form-group -->
              
              <button type="submit" class="subscribe-btn" id="subscribe-button">
                <div class="subscribe-btn-svg">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 64.57" class="subscribe-btn-svg"><defs><style>.cls-1{fill:#fff;}</style></defs><title>Asset 9</title><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><path class="cls-1" d="M4,36.28H66.34L44.89,57.74a4,4,0,1,0,5.66,5.66L78.83,35.11h0a4,4,0,0,0,.5-.61c.07-.1.11-.21.17-.31a3.85,3.85,0,0,0,.2-.37,3.65,3.65,0,0,0,.13-.41c0-.11.08-.22.1-.33a4,4,0,0,0,.08-.79h0a4,4,0,0,0-.08-.77c0-.12-.07-.23-.1-.35a3.58,3.58,0,0,0-.12-.4,4,4,0,0,0-.21-.4c-.05-.1-.1-.2-.16-.29a3.88,3.88,0,0,0-.5-.61L50.54,1.17a4,4,0,1,0-5.66,5.66L66.34,28.28H4a4,4,0,0,0,0,8Z"/></g></g></svg>
                </div>
              </button>
           </div>
          </form>

Solution

  • Maybe you can make it with Ajax in jQuery, try something like this

    $(document).ready( function () {
        var $form = $('#mc-embedded-subscribe-form2');
        if ( $form.length > 0 ) {
            $('form input[type="submit"]').bind('click', function ( event ) {
                if ( event ) event.preventDefault();
                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...
                }
            }
        });
    }