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) {
url: '//',
method: 'POST',
data: $(this).serialize(),
dataType: 'json',
beforeSend: function() {
$contactForm.append('<div class="alert alert--loading">Sending message…</div>');
success: function(data) {
$contactForm.append('<div class="alert alert--success">Message sent!</div>');
error: function(err) {
$contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
Copy link

steelx commented Sep 4, 2015

how would u do this with Angular $ ?

Copy link

rocka0 commented Dec 26, 2015

nice gist. It's really useful!

Copy link

renatocarvalho commented Jan 8, 2016


Copy link

ioi0 commented Feb 5, 2016

Thank you for this one!

Copy link

Misterdjack commented Mar 1, 2016

Cheers, which means thank you in some cultures

Copy link

fxlemire commented Mar 4, 2016

This is really awesome, thanks a lot!

Copy link

DonaldChaseFinlayson commented Mar 10, 2016

Can I ask what the point of adding parameters, "success" and "error", for the callback functions for the error and success messages? Is that just there so we know we can implement a description of the error? In that case, I wouldn't see the point in having a parameter for the success callback.

I fear that my greenness is showing...

Copy link

isularifin commented May 26, 2016

it's working. Thanks a lot

Copy link

jannecederberg commented Jun 30, 2016

The current version (revision 11) has a few limitations to it

  1. It will not prevent multi-AJAX-submit (after first submit started but before it completed).
  2. If the user sends multiple messages without page refresh, multiple status messages will be shown.

This revision fixes the above issues.

Copy link

cascadiabooking commented Oct 15, 2016

Amazing. I've tried to get this to work for ages!!

Copy link

christianmendoza commented Dec 10, 2016

Awesome, I'm using this on one of my static sites!

Copy link

chmelevskij commented Dec 28, 2016

@steelx or anyone who needs it with angular it would look something like:

    url: "",
    method: "POST",
    data: {"foo":"bar"}
}).success(function(data, status, headers, config) {
    $ = data;
}).error(function(data, status, headers, config) {
    $scope.status = status;

just pass the model you want into data to send away.

Copy link

amandoabreu commented Jan 9, 2017

Always getting an error 400 back from the ajax request, and of course no email is sent. Any ideas?


Edit: Nevermind, jekyll serve doesn't create a "real" server with a referral header, which formspree expects to receive.

Copy link

johnbhartley commented Feb 6, 2017

Noice. This is clutch, thanks for posting!

Copy link

ManoloEstradas commented Mar 2, 2017

Thanks! It's really useful!

Copy link

tcabeen commented Mar 13, 2017

This is tremendously useful.
A couple notes for other novices (like me) who may run into trouble:

  1. If you're using this with the jQuery CDN (via Bootstrap, for instance), make sure you're not loading the slim jQuery.
  2. If the first email goes through and you get your formspree confirmation, but 400 errors after that... well, I still don't know how to fix that.

Copy link

ilyaGoncharov commented May 29, 2017

Same problem

Copy link

ghost commented Jul 16, 2017

Maybe some are interested about my fork, I did some some tweaks and Code cleanups

Copy link

kandebonfim commented Nov 17, 2017


Copy link

RRandle commented Feb 5, 2018


Copy link

mrichman commented Feb 12, 2018

I just started getting this ajax error today:

  "error": "To prevent spam, only Gold accounts may create AJAX forms."

Copy link

Stan-89 commented Feb 17, 2018

Same here.

  "error": "To prevent spam, only Gold accounts may create AJAX forms."

So much for freebies I guess.

Copy link

shyd commented Feb 18, 2018

Same here.

Sadly ajax has been disabled for new forms, see formspree/formspree#173

Currently we're seeing a lot of spam come from ajax forms, since we must allow ajax to bypass the CAPTCHA. Unfortunately the most strait forward solution is to remove this capability.
This PR makes submitting AJAX forms a gold feature.
Existing forms will continue to work, even AJAX forms that have been created by non gold users.

Copy link

dolanb12 commented Mar 29, 2018

Thanks for the info!

Could you add the feature of the ability to customize the re-captcha page for gold members??



Copy link

robson3999 commented May 11, 2018

I'm posting data via
$.post('', {name: name, email: email, message: message})
and it works, no 400 error 😄

Copy link

EhsanKia commented Jul 3, 2018

Maybe before you had a form before this change. As they say, old forms can still send ajax, but new forms can't.

Copy link

Nifled commented Oct 23, 2018

Aw, what a bummer.

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