How to set up a contact form with FormSpree.io with out any server/database impl

Functional HTML forms with no server/database

Posted by Prateep Gedupudi on December 18, 2015

I recently moved my blog from WordPress to Jekyll after experimenting with Jekyll as a documentation platform for the past several months. Jekyll also loads more quickly.

Erlier I was using php for form submission. But now in jekyll we do not have support for php in github. We need to handle any thing with only java script. When I was searching for a contact form submission to a mail, I found some interesting service website to do the same from java script. It is nothing but formspree io.

While coming to the details of formspree io, it sends the submitted form as a text to your mensioned email.You don't even have to register. Just send your form to the URL and it will forward it to your email. No PHP, Javascript or sign up required — perfect for static sites!

Setting it up is easy and free

Lets take below example of code.

		<form action="//formspree.io/your@email.com">
		  Email: <input type="text" name="name"><br>
		  Name: <input type="text" name="email"><br>
		  Subject: <input type="text" name="subject"><br>
		  Message: <textarea name="message" cols="40" rows="5"></textarea>
		  <input type="submit" value="Send Message">
		</form>
	

1.Setup the HTML form

Change your form's action-attribute to this and replace your@email.com with your own email.


http://formspree.io/myusername@gmail.com

2. Submit the form and confirm your email address

Go to your website and submit the form once. This will send you an email asking to confirm your email address, so that no one can start sending you spam from random websites.

3. All set, receive emails

From now on, when someone submits that form, formspree will forward you the data as email.

We can even use AJAX

You can use Formspree via AJAX. This even works cross-origin. The trick is to set the Accept header to application/json. If you're using jQuery this can be done like so:


$.ajax({
    url: "//formspree.io/username@gmail.com", 
    method: "POST",
    data: {message: "hello!"},
    dataType: "json"
});