Earlier this month when I posted an article about using github pages to host personal website, I added a contact form, beautified it with bootstrap and decided to ignore how would I handle form submissions and keep track of responses. But soon I realized my mistake when someone excitedly asked "Did you get my message I submitted through contact form?". It was disappointing, but I had to say I didn't handle it, yet. So here is how I handled 'it'.
Github pages provides support for static pages and that makes handling forms on static website a bit tricky.
Turns out, capturing data from forms such as contact form in static website is super easy, with little or no configuration needed. There are many free and paid services available according to your requirement. Initially I tried one open-source service formspree, and then for better control I used Google Apps Script.
First approach: FORMSPREE
It's absolutely simple approach, no configuration is needed in your code. Here's is what you do:
Go to https://formspree.io/ and follow steps as mentioned in website.
Just don't forget to add 'name' attribute to your each input field of your form.
Here's what your form would look like after mentioned changes. Look closely at added name fields in html form. email field with '_replyto' is important to capture email id of person who submitted form.
Second approach: Google Apps Script
Limitation with formspree is that there is no way you can organize data you receive. You will get recorded data to your email via formspree. So after getting my contact form working I searched for better solution and I found one on github.
With Google Apps Script, you can collect data in organized way with much more customization. Google forms script works as backend server and saves received data of each submission to google spreadsheet. Google spreadsheet stores all the data and google apps script also handles notifying you of new entries.
Here's link to one repo I found which explains whole process step-by-step with Customisabe code.
I used it's code and modified to meet my needs for contacts form. Feel free to have a look at my contact form here.
Let me know if you have any queries. Thanks and feel free to share your thoughts.