Skip to content

Instantly share code, notes, and snippets.

@stevetrask
Created November 16, 2016 20:45
Show Gist options
  • Save stevetrask/615b6fb94ea266e2efb8635255ab87ff to your computer and use it in GitHub Desktop.
Save stevetrask/615b6fb94ea266e2efb8635255ab87ff to your computer and use it in GitHub Desktop.
Formspree with ajax
<form id="sales-form" method='POST'>
<div class="c-mainform_group">
<div class="c-mainform_col">
<div>
<label for="name">Full name<sup>*</sup></label>
<input type="text" name="name" id="name" />
</div>
<div>
<label for="email">Email address<sup>*</sup></label>
<input type="email" name="email" id="email" />
</div>
</div>
<div class="c-mainform_col">
<div>
<label for="company">Company</label>
<input type="text" name="company" id="company" />
</div>
<div>
<label for="telephone">Phone number</label>
<input type="text" name="telephone" id="telephone" />
</div>
</div>
</div>
<div class="c-mainform_group">
<div class="c-mainform_text">
<label for="message">Let us know your area</label>
<textarea name="message" id="message"></textarea>
</div>
</div>
<div class="c-mainform_submit">
<input id="sales-form--submit" type="submit" value="Send">
<div id="response" class="c-mainform_response">
<!-- js message displayed here -->
</div>
</div>
</form>
// form
// This requires jQuery and jQuery Validation Plugin (https://jqueryvalidation.org/)
$( "#sales-form" ).validate({
rules: {
name: {
required: true
},
email: {
required: true,
email: true
}
},
submitHandler: function(form) {
var form = $("#sales-form"); // contact form
var submitButton = $("#sales-form--submit"); // submit button
var response = $('#response'); // alert div for show alert message
$.ajax({
// url: "//formspree.io/testemail@test.com", //local
url: "//formspree.io/liveemail@live.com", //live
method: "POST",
data: $("#sales-form").serialize(),
dataType: "json",
beforeSend: function() {
response.text('Sending....'); // change response text
},
success: function(data) {
response.html('Message sent').fadeIn(); // fade in response data
form.trigger('reset'); // reset form
},
error: function(e) {
console.log(e);
response.text('There was an error!'); // change response text
}
});
}// end submit handler
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment