Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
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();
$.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>');
},
success: function(data) {
$contactForm.find('.alert--loading').hide();
$contactForm.append('<div class="alert alert--success">Message sent!</div>');
},
error: function(err) {
$contactForm.find('.alert--loading').hide();
$contactForm.append('<div class="alert alert--error">Ops, there was an error.</div>');
}
});
});
@steelx
Copy link

steelx commented Sep 4, 2015

how would u do this with Angular $http.post ?

@rocka0
Copy link

rocka0 commented Dec 26, 2015

nice gist. It's really useful!

@renatocarvalho
Copy link

renatocarvalho commented Jan 8, 2016

Thanks!

@ioi0
Copy link

ioi0 commented Feb 5, 2016

Thank you for this one!

@Misterdjack
Copy link

Misterdjack commented Mar 1, 2016

Cheers, which means thank you in some cultures

@fxlemire
Copy link

fxlemire commented Mar 4, 2016

This is really awesome, thanks a lot!

@DonaldChaseFinlayson
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...

@isularifin
Copy link

isularifin commented May 26, 2016

it's working. Thanks a lot

@jannecederberg
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 https://gist.github.com/jannecederberg/785c1dc78e882b6bf85a5e77b31b0678 fixes the above issues.

@cascadiabooking
Copy link

cascadiabooking commented Oct 15, 2016

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

@christianmendoza
Copy link

christianmendoza commented Dec 10, 2016

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

@chmelevskij
Copy link

chmelevskij commented Dec 28, 2016

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

$http({
    url: "http://formspree.io/your@email.com",
    method: "POST",
    data: {"foo":"bar"}
}).success(function(data, status, headers, config) {
    $scope.data = data;
}).error(function(data, status, headers, config) {
    $scope.status = status;
});

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

@amandoabreu
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?

Thanks.

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

@johnbhartley
Copy link

johnbhartley commented Feb 6, 2017

Noice. This is clutch, thanks for posting!

@ManoloEstradas
Copy link

ManoloEstradas commented Mar 2, 2017

Thanks! It's really useful!

@tcabeen
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.

@ilyaGoncharov
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
https://gist.github.com/dotmagic/f5273c8768b18e13902b5e25b684c58a

@kandebonfim
Copy link

kandebonfim commented Nov 17, 2017

NIIIIIIICE! Thanks!

@RRandle
Copy link

RRandle commented Feb 5, 2018

Dude, THANK YOU!

@mrichman
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."
}

@Stan-89
Copy link

Stan-89 commented Feb 17, 2018

Same here.
Getting:

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

So much for freebies I guess.

@shyd
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.

@dolanb12
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??

Thanks,

Brendan

@robson3999
Copy link

robson3999 commented May 11, 2018

Hi,
I'm posting data via
$.post('https://formspree.io/email@domain.com', {name: name, email: email, message: message})
and it works, no 400 error 😄

@EhsanKia
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.

@Nifled
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