Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Bootstrap ajax email signup form for sendy.co
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js" ></script>
<title>AJAX Signup</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
</head>
<body>
<form class="form-inline" action="http://SENDY_URL/subscribe" method="POST" accept-charset="utf-8" name="emailListSignupForm" id="emailListSignupForm" data-list-id="SEYDY_DATA_LIST_ID">
<div class="form-group">
<label class="sr-only" for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Name">
</div>
<div class="form-group">
<label class="sr-only" for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Email Address">
</div>
<button type="submit" class="btn btn-default">Sign up</button>
<p id="status" class="help-block"></p>
</form>
<script type="text/javascript">
$(document).ready(function() {
$("#emailListSignupForm").submit(function(e) {
console.log('submitting');
e.preventDefault();
var $form = $(this),
url = $form.attr('action');
params = {
name: $form.find('input[name="name"]').val(),
email: $form.find('input[name="email"]').val(),
list: $form.data().listId,
boolean: true
}
window.message = function(text, color){
$("#status").css("color", color).text(text);
}
$form.find('input').attr("disabled", "disabled");
message('signing up...', 'blue');
$.post(url, params,
function(data) {
console.dir(data);
if (data) {
$form.find('input').removeAttr("disabled");
if (data == "Some fields are missing.") {
message("Please fill in your name and email.", "red");
} else if (data == "Invalid email address.") {
message("Uhoh - that doesn't look like an email address. Could you please enter your email again?", "red");
} else if (data == "Invalid list ID.") {
message("Oops - something went wrong (I tried to sign you up for an email list that doesn't exist). To get added, send me an email at christian@gen.co instead!", "red");
} else if (data == "Already subscribed.") {
message("You're already subscribed!", "green");
} else {
$("#status").text("You're subscribed!");
$("#status").css("color", "green");
$form.find('input, button').hide();
}
} else {
alert("Sorry, unable to subscribe. Please try again later!");
message("Oops - something went wrong (my email list server just had an error). To get added, send me an email at christian@gen.co instead!", "red");
}
}
);
});
});
</script>
</body>
</html>
@jrglass

This comment has been minimized.

Copy link

commented Dec 26, 2017

Any idea why the error messages and/or confirmation messages don't work?
Form is submitting email fine to sendy list, but it gets stuck on "singing up..." after submit.

Update:
Seems it was because chrome doesn't allow this to work on local install without extension CORS Toggle on. Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.