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

This comment has been minimized.

Copy link

steelx commented Sep 4, 2015

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

@rocka0

This comment has been minimized.

Copy link

rocka0 commented Dec 26, 2015

nice gist. It's really useful!

@renatocarvalho

This comment has been minimized.

Copy link

renatocarvalho commented Jan 8, 2016

Thanks!

@ioi0

This comment has been minimized.

Copy link

ioi0 commented Feb 5, 2016

Thank you for this one!

@Misterdjack

This comment has been minimized.

Copy link

Misterdjack commented Mar 1, 2016

Cheers, which means thank you in some cultures

@fxlemire

This comment has been minimized.

Copy link

fxlemire commented Mar 4, 2016

This is really awesome, thanks a lot!

@DonaldChaseFinlayson

This comment has been minimized.

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

This comment has been minimized.

Copy link

isularifin commented May 26, 2016

it's working. Thanks a lot

@jannecederberg

This comment has been minimized.

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

This comment has been minimized.

Copy link

cascadiabooking commented Oct 15, 2016

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

@christianmendoza

This comment has been minimized.

Copy link

christianmendoza commented Dec 10, 2016

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

@chmelevskij

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

Copy link

johnbhartley commented Feb 6, 2017

Noice. This is clutch, thanks for posting!

@ManoloAffix

This comment has been minimized.

Copy link

ManoloAffix commented Mar 2, 2017

Thanks! It's really useful!

@tcabeen

This comment has been minimized.

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

This comment has been minimized.

Copy link

ilyaGoncharov commented May 29, 2017

Same problem

@ghost

This comment has been minimized.

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

This comment has been minimized.

Copy link

kandebonfim commented Nov 17, 2017

NIIIIIIICE! Thanks!

@RRandle

This comment has been minimized.

Copy link

RRandle commented Feb 5, 2018

Dude, THANK YOU!

@mrichman

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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

This comment has been minimized.

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
You can’t perform that action at this time.