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

formspree.html

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

formspree.js

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>');
		}
	});
});

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@domain.com', {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.