Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
JS: Ajax send forms using the most excellent Formspree » #snippet
<form id="contact-form" action="//" method="post">
<input type="text" name="Name" placeholder="Name" required>
<input type="email" name="Email" placeholder="Email" required>
<textarea name="Message" cols="30" rows="6" placeholder="Message" required></textarea>
<!-- CONFIG -->
<input class="is-hidden" type="text" name="_gotcha">
<input type="hidden" name="_subject" value="Subject">
<input type="hidden" name="_cc" value="">
<!-- /CONFIG -->
<input class="submit" type="submit" value="Send">
var $contactForm = $('#contact-form');
$contactForm.submit(function(e) {
var $submit = $('input:submit', $contactForm);
var defaultSubmitText = $submit.val();
url: '//',
method: 'POST',
data: $(this).serialize(),
dataType: 'json',
beforeSend: function() {
//$contactForm.append('<div class="alert alert--loading">Sending message…</div>');
$submit.attr('disabled', true).val('Sending message…');
success: function(data) {
//$contactForm.append('<div class="alert alert--success">Message sent!</div>');
$submit.val('Message sent!');
setTimeout(function() {
$submit.attr('disabled', false).val(defaultSubmitText);
}, 5000);
error: function(err) {
//$contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
$submit.val('Ops, there was an error.');
setTimeout(function() {
$submit.attr('disabled', false).val(defaultSubmitText);
}, 5000);
Copy link

Mr-Nicholas commented Jul 6, 2016

Legendary, thanks for the update!

Copy link

baritchie commented Jul 29, 2016

Wonderful! Thanks!

Copy link

MarineLB commented May 29, 2018

Awesome! What would be the best way to do this in native javascript?

Copy link

evansmejax commented Jun 27, 2018

you are awesome

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment