Skip to content

Instantly share code, notes, and snippets.

@jannecederberg
Forked from manfromanotherland/formspree.html
Last active November 4, 2022 12:26
Show Gist options
  • Star 23 You must be signed in to star a gist
  • Fork 8 You must be signed in to fork a gist
  • Save jannecederberg/785c1dc78e882b6bf85a5e77b31b0678 to your computer and use it in GitHub Desktop.
Save jannecederberg/785c1dc78e882b6bf85a5e77b31b0678 to your computer and use it in GitHub Desktop.
JS: Ajax send forms using the most excellent Formspree » http://formspree.io #snippet
<form id="contact-form" action="//formspree.io/your@email.com" 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="email@cc.com">
<!-- /CONFIG -->
<input class="submit" type="submit" value="Send">
</form>
var $contactForm = $('#contact-form');
$contactForm.submit(function(e) {
e.preventDefault();
var $submit = $('input:submit', $contactForm);
var defaultSubmitText = $submit.val();
$.ajax({
url: '//formspree.io/your@email.com',
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() {
//$('.alert--success').remove();
$submit.attr('disabled', false).val(defaultSubmitText);
}, 5000);
},
error: function(err) {
//$contactForm.find('.alert--loading').hide();
//$contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
$submit.val('Ops, there was an error.');
setTimeout(function() {
//$('.alert--error').remove();
$submit.attr('disabled', false).val(defaultSubmitText);
}, 5000);
}
});
});
@MarineLB
Copy link

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

@evansmejax
Copy link

you are awesome

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