Skip to content

Instantly share code, notes, and snippets.

@ahmadawais
Forked from christiangenco/signup.html
Created March 20, 2017 09:25
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save ahmadawais/68426a9ed4f1a6c52e88bea87fffd25a to your computer and use it in GitHub Desktop.
Save ahmadawais/68426a9ed4f1a6c52e88bea87fffd25a to your computer and use it in GitHub Desktop.
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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment