How to handle HTML FORM data from static/dynamic website hosted on GitHub pages: No APIs, No Databases — easy & free
I feel like this is possibly a repetition, but it’s worth it.
Unfortunately, if you have hosted your site with GitHub pages, it’s not possible to handle your website forms such as contact, subscribe e.t.c natively. GitHub’s pages help describes what you can and cannot do with the hosting, and what plugins it supports. Probably the only way would achieve this is to post the form feedback to another hosted file (PHP or other technology on another server), maybe use Google Forms or something like that. Personally, I don’t like Google forms because, embedding the iframe messes up the look of your website since you cannot (I was not able to) edit it to suit your desired design. But I have used Google forms in a million other ways and they have worked perfect for me, like carrying out surveys, collecting some type of info from clients, e.t.c. but not with website form handling after my failed trial, Oops! But the good news is, you can achieve this by using some kind of form submission handler, and in this article, I will show you one of the easiest, and fastest ways to handle your static web forms, which also enables you to communicate with your website’s visitors by replying directly to them. The best part of it is that there is no registration, subscriptions, APIs and many other features that most of us are hesitant about. Besides, there are no ‘iframes’, all you need is to edit a single line of code in your HTML form, confirm your website email (for spam) and VIOLA! you’re good to go. Easy, right?
I am talking about FormSpree: it was built by Brace, open-sourced (you contribute on GitHub) and now, it is hosted by Assembly. If you have used it already, perhaps you can confirm my claims. Thanks. If you haven’t; setting this handler up is quite easy and its free:
Step 1. Setup your form
On your HTML code, you will need to edit the form ‘action’ attribute to https://firstname.lastname@example.org replacing email@example.com with your website communication email/the email you wish to forward the form feedback to. As follows:
Step 2. Confirm your email
If you haven’t confirmed your website confirmation email, FormSpree will send a confirmation email, which you will need to confirm before everything is all set. After confirming your email, you will need not to confirm your email again. To make sure this works well with you, before setting up your form, head to FormSpree test area, and submit the sample form provided. They will then confirm your email.
FormSpree will then post the form entries onto an external domain, formspree.io, and then forward an email containing all the form content to the communication email you provided on the ‘action’ attribute. On the forwarded email that you receive, you can just hit reply in your mailbox to continue the conversation with your visitor normally (to _replyto) without forwarding your visitor-intended messages via formspree.io. So remember to add a ‘how can I reach you with feedback –with email’ input field on your form if your form is a contact form or some other kind of form, which will need you to reply to your visitor. Otherwise if you want to collect subscriber’s emails, then you will not need this.
However, there are a few precautions you need to consider for FormSpree to serve you accordingly:
1. Don’t forget to add a name attribute to every input field in your form:
Every <input>, <select> and <textarea> elements inside your HTML form must have a name attribute, otherwise you will not receive the data filled in these fields.
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. Remember that if you display the same form in multiple URLs of your site you’ll have to confirm it multiple times!
This free service comes with 1000 submissions per email each month, some type of security (++ SendGrip API security). For some of us, this might not be enough, besides if you noticed, you might want to use a personal email for communication, in which case, and you don’t want it to be openly available on your page source code. Therefore, if you need more, you can upgrade your subscription to their Gold plan which comes with ‘extra limits and functionality for power users’. This plans lets you hide your email by assigning to your email a random link to go on the form ‘action’, receive unlimited form submissions, same form on multiple page, and even support for more advanced features (such as _gotcha: to prevent web scrappers and spam emails, ooh one of my personal favorites), and many more for just $9.99 a month.
For more information, please refer to FormSpree on GitHub here.