Skip to content

Instantly share code, notes, and snippets.

@cristianogregnanin

cristianogregnanin/contactForm.html

Last active April 26, 2017 07:24
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save cristianogregnanin/abb0b365160098dfe0c7 to your computer and use it in GitHub Desktop.
Save cristianogregnanin/abb0b365160098dfe0c7 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
contactForm.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/css/bootstrapValidator.min.css"/>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery.bootstrapvalidator/0.5.2/js/bootstrapValidator.min.js"></script>
<title>Your contact form</title>
</head>
<body>
<script>
$(document).ready(
function() {
var contactForm = $('#contact-form');
contactForm.bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: 'glyphicon glyphicon-ok',
invalid: 'glyphicon glyphicon-remove',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
_replyto: {
validators: {
notEmpty: {
message: 'The email address is required'
},
emailAddress: {
message: 'The email address is not valid'
}
}
},
message: {
validators: {
notEmpty: {
message: 'The Message is required and cannot be empty'
}
}
}
}
});
contactForm.on('success.form.bv', function(e) {
e.preventDefault();
$.ajax({
url: contactForm.attr('action'),
method: contactForm.attr('method'),
data: contactForm.serialize(),
dataType: 'json',
beforeSend: function() {
contactForm.append('<div class="alert-loading" >Sending message…</div>');
},
success: function(data) {
contactForm.find('.alert-loading').remove();
var succesBox = $('<div class="alert alert-success alert-dismissible" role="alert">' + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + '<strong>Thanks!</strong> I will reply in a few hours' + '</div>').hide();
contactForm.before(succesBox);
succesBox.fadeIn("slow");
succesBox.fadeTo(2000, 500).slideUp(500, function() {
$(".alert-success").alert('close');
});
},
error: function(err) {
contactForm.find('.alert-loading').remove();
var errorBox = $('<div class="alert alert-danger alert-dismissible" role="alert">' + '<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>' + '<strong>Error!</strong> Something went wrong' + '</div>').hide();
contactForm.before(errorBox);
errorBox.fadeIn("slow");
errorBox.fadeTo(2000, 500).slideUp(700, function() {
$(".alert-danger").alert('close');
});
}
});
});
});
</script>
<div class="container">
<div class="row ">
<form role="form" method="POST" action="//formspree.io/your.email@example.com" id="contact-form" >
<input type="hidden" name="_subject" value="Information request" />
<input type="text" name="_gotcha" style="display:none" />
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="email" class="form-control" name="_replyto" autocomplete="off" id="email" placeholder="Your email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<textarea class="form-control textarea" rows="3" name="message" id="message" placeholder="Your message"></textarea>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn-block btn-lg btn">Send a message</button>
</div>
</div>
</form>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment