morganhvidt
8/22/2018 - 6:17 AM
Remove or don't redirect “thank you” page Mailchimp
Remove or don't redirect “thank you” page Mailchimp
/* To use this example:
1. Download this html file
2. Replace the form action url with your own from the MailChimp supplied embed code
3. Within the action url, replace "subscribe/post" with "subscribe/post-json"
4. Be sure the action url starts with http://. If it doesn't, the form will hang when testing the html as a local file in your browser.
5. Open this file in a browser on your local machine
*/
$("#mc-embedded-subscribe-form").submit(function(e){
e.preventDefault();
submitSubscribeForm($("#mc-embedded-subscribe-form"), $("#subscribe-result"));
});
//$("#mc-embedded-subscribe-form") id form
//$("#subscribe-result") after form <div id="subscribe-result"></div>
function submitSubscribeForm($form, $resultElement) {
$.ajax({
type: "GET",
url: $form.attr("action"),
data: $form.serialize(),
cache: false,
dataType: "jsonp",
jsonp: "c",
contentType: "application/json; charset=utf-8",
error: function(error){},
success: function(data){
if (data.result != "success") {
var message = data.msg || "Sorry. Unable to subscribe. Please try again later.";
if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
message = "You're already subscribed. Thank you.";
}
$resultElement.html(message);
} else {
$resultElement.html("Thank you!<br>You must confirm the subscription in your inbox.");
$form.css({
display: 'none'
});
}
}
});
}<!DOCTYPE html>
<html>
<head>
<title>Example ajax/jsonp MailChimp subscribe form</title>
</head>
<body>
<!-- To use this example:
1. Download this html file
2. Replace the form action url with your own from the MailChimp supplied embed code
3. Within the action url, replace "subscribe/post" with "subscribe/post-json"
4. Be sure the action url starts with http://. If it doesn't, the form will hang when testing the html as a local file in your browser.
5. Open this file in a browser on your local machine
-->
<form
id="subscribe-form"
action="http://yourlist.us6.list-manage.com/subscribe/post-json?u=bbbaafd1d12345c57b712345&id=123456789e"
method="get">
<h3>Want more great content delivered to your inbox?</h3>
<p>(no spam ever, unsubscribe at any time)</p>
<div>
<input type="email" placeholder="email *" value="" name="EMAIL" >
<input type="text" placeholder="first name" value="" name="FNAME">
</div>
<div>
<input type="submit" value="Keep Me Updated" name="subscribe">
</div>
<div id="subscribe-result">
</div>
</form>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
ajaxMailChimpForm($("#subscribe-form"), $("#subscribe-result"));
// Turn the given MailChimp form into an ajax version of it.
// If resultElement is given, the subscribe result is set as html to
// that element.
function ajaxMailChimpForm($form, $resultElement){
// Hijack the submission. We'll submit the form manually.
$form.submit(function(e) {
e.preventDefault();
if (!isValidEmail($form)) {
var error = "A valid email address must be provided.";
$resultElement.html(error);
$resultElement.css("color", "red");
} else {
$resultElement.css("color", "black");
$resultElement.html("Subscribing...");
submitSubscribeForm($form, $resultElement);
}
});
}
// Validate the email address in the form
function isValidEmail($form) {
// If email is empty, show error message.
// contains just one @
var email = $form.find("input[type='email']").val();
if (!email || !email.length) {
return false;
} else if (email.indexOf("@") == -1) {
return false;
}
return true;
}
// Submit the form with an ajax/jsonp request.
// Based on http://stackoverflow.com/a/15120409/215821
function submitSubscribeForm($form, $resultElement) {
$.ajax({
type: "GET",
url: $form.attr("action"),
data: $form.serialize(),
cache: false,
dataType: "jsonp",
jsonp: "c", // trigger MailChimp to return a JSONP response
contentType: "application/json; charset=utf-8",
error: function(error){
// According to jquery docs, this is never called for cross-domain JSONP requests
},
success: function(data){
if (data.result != "success") {
var message = data.msg || "Sorry. Unable to subscribe. Please try again later.";
$resultElement.css("color", "red");
if (data.msg && data.msg.indexOf("already subscribed") >= 0) {
message = "You're already subscribed. Thank you.";
$resultElement.css("color", "black");
}
$resultElement.html(message);
} else {
$resultElement.css("color", "black");
$resultElement.html("Thank you!<br>You must confirm the subscription in your inbox.");
}
}
});
}
});
</script>
</body>
</html>