JS: Ajax send forms using the most excellent Formspree » http://formspree.io #snippet

formspree.html

<form id="contact-form" action="//formspree.io/[email protected]" 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 protected]">
	<!-- /CONFIG -->
	<input class="submit" type="submit" value="Send">
</form>

formspree.js

var $contactForm = $('#contact-form');
$contactForm.submit(function(e) {
	e.preventDefault();
	$.ajax({
		url: '//formspree.io/[email protected]',
		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>');
		}
	});
});

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

nice gist. It's really useful!

Thanks!

Thank you for this one!

Cheers, which means thank you in some cultures

This is really awesome, thanks a lot!

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

it's working. Thanks a lot

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.

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

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

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

$http({
    url: "http://formspree.io/[email protected]",
    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.

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.

Noice. This is clutch, thanks for posting!

Thanks! It's really useful!

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.

Same problem

Maybe some are interested about my fork, I did some some tweaks and Code cleanups
https://gist.github.com/dotmagic/f5273c8768b18e13902b5e25b684c58a

NIIIIIIICE! Thanks!

Dude, THANK YOU!

I just started getting this ajax error today:

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

Same here.
Getting:

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

So much for freebies I guess.

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.

Thanks for the info!

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

Thanks,

Brendan

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

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

Aw, what a bummer.