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 firstname.lastname@example.org with your own email.
Check line 7 on the example code below to see what needs to be added to the form
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.
Here is a list of a few extra options and what it allows you to do.
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” />
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” />
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=”email@example.com” />
If you want to CC multiple email addresses, then just make it a list of email addresses separate by commas.
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!