MailChimp Form without MailChimp JS + Custom JS Redirect

mcnojs+customjs.html

<div id="wp-subscribe" class="wp-subscribe-wrap wp-subscribe wp-subscribe-1">
<h4 class="title">Like What You're Reading?</h4>
<p class="text">Subscribe to our mailing list and get blog posts sent directly to your e-mail inbox.</p>
<!-- Begin MailChimp Signup Form -->

<style type="text/css">
#mc_embed_signup{background:#f47555; 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. */#mc_embed_signup_scroll input{ background-color: #aaaaaa;border-color: #FFFFFF !important;<br />}input#mc-embedded-subscribe.button {height:50px;}</style>
<div id="mc_embed_signup"><form id="mc-embedded-subscribe-form" class="validate" action="//ownurl.us14.list-manage.com/subscribe/post?u=5e08d0ec976ea8929c31531bc&id=72b16de3f4" method="post" name="mc-embedded-subscribe-form" novalidate="" target="_blank">
<div id="mc_embed_signup_scroll">
<div class="mc-field-group"><label for="mce-EMAIL">Email Address <span class="asterisk">*</span>
</label>
<input id="mce-EMAIL" class="required email" name="EMAIL" type="email" value="" /></div>
<div class="mc-field-group"><label for="mce-FNAME">First Name </label>
<input id="mce-FNAME" class="" name="FNAME" type="text" value="" /></div>
<div class="mc-field-group"><label for="mce-LNAME">Last Name </label>
<input id="mce-LNAME" class="" name="LNAME" type="text" value="" /></div>
<div id="mce-responses" class="clear"></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 tabindex="-1" name="b_5e08d0ec976ea8929c31531bc_72b16de3f4" type="text" value="" /></div>
<div class="clear"></div>
<input id="mc-embedded-subscribe" class="button" name="subscribe" type="submit" value="Subscribe" />

</div>
</form></div>
<!--End mc_embed_signup-->
<p class="footer-text">We respect your privacy and take protecting it seriously. No spam, guaranteed.</p>

</div>
<script type="text/javascript">
jQuery(document).ready(function($) {
    $('#mc-embedded-subscribe-form').submit(function (e) {
        e.preventDefault();
        $.ajax({
            url: '//ownurl.us14.list-manage.com/subscribe/post-json?u=5e08d0ec976ea8929c31531bc&id=72b16de3f4&c=?',
            type: 'GET',
            data: $('#mc-embedded-subscribe-form').serialize(),
            dataType: 'jsonp',
            contentType: "application/json; charset=utf-8",
            success: function (data) {
               if (data['result'] != "success") {
                    //ERROR
                    console.log(data['msg']);
               } else {
                    //SUCCESS - Do what you like here
                    window.location = 'https://ownurl.com/your-subscription-thank-you/';
               }
            }
        });
    });
});
</script>

Thank you so much for this, Jasper

Thank you, it works! I only have a doubt about url but I found the answer here, https://stackoverflow.com/questions/8425701/ajax-mailchimp-signup-form-integration. API key is not needed.

Yeah, the url has to be your own so replaced part of the urls by ownurl. Glad this helps you out @katialeon

Nice man!

Having issues setting this up. I have replaced everything accordingly, however the form just submits and says "thanks for subscribing" at the buttom without redirecting. Please help! Is there a special place I should add the Javascript?

I can't get this to work without attaching an onclick command in the button code, but when I do that the contact does not get saved in Mailchimp. Any thoughts? This is the form here: https://kathipickett.com/events/introduction-to-chakras