Adding interactive forms on your Github pages using formspree.io.

I’ll be explaining how to use formspree.io to add a submission form to your static Github pages. This will work for other static webpages as well.

Formspree.io allows you to add functionality to your static form without the use of PHP, JavaScript or using a back-end. You will only need to add a few lines of HTML to your form and voila!

Formspree.io is free for the first 1000 forms per month that they forward to you. After which you will need to sign up for their Gold account.

1. Setup the HTML form

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

https://formspree.io/your@email.com

Check line 7 on the example code below to see what needs to be added to the form

Here is an example of how your code should look

2. Add a name attribute to every field

Ensure all <input>, <select> and <textarea> elements inside your form have a name attribute, otherwise you will not receive the data filled in these fields.

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

Remember that if you display the same form in multiple URLs of your site you’ll have to confirm it multiple times!

4. All set, receive emails

From now on, when someone submits that form, they’ll forward you the data as email.

This is a sample form hosted on github pages.

Here is a list of a few extra options and what it allows you to do.

1. _next

By default, after submitting a form the user is shown the Formspree “Thank You” page. You can provide an alternative URL for that page. You can develop a seperate thank you html page and redirect to it.

<input type=”hidden” name=”_next” value=”//site.io/thanks.html” />

2. _subject

This value is used for the email’s subject, so that you can quickly reply to submissions without having to edit the subject line each time.

<input type=”hidden” name=”_subject” value=”New submission!” />

3. _replyto or email

This value is used for the email’s Reply-To field. This way you can directly “Reply” to the email to respond to the person who originally submitted the form.

<input type=”text” name=”_replyto” placeholder=”Your email” />

4. _cc

This value is used for the email’s CC Field. This lets you send a copy of each submission to another email address.

<input type=”hidden” name=”_cc” value=”another@email.com” />

If you want to CC multiple email addresses, then just make it a list of email addresses separate by commas.

<input type=”hidden” name=”_cc” value=”another@email.com,yetanother@email.com” />

There are many more options on the formspree.io webpage. Feel free to visit their website for more information on how to utilize them.

Thank you for reading this. This is my first ever technical post and hopefully you enjoyed it!

Front-End React Developer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store