Last active
June 7, 2022 21:13
-
-
Save jasperf/a67e69832744270888fa4a180057abee to your computer and use it in GitHub Desktop.
MailChimp Form without MailChimp JS + Custom JS Redirect
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Nice man!