How I handled forms with static website

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.
It’s a bit complicated if one does not have much knowledge of javascript.
Here’s link to one repo I found which explains whole process step-by-step with Customisabe code.
https://github.com/dwyl/learn-to-send-email-via-google-script-html-no-server
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.

Related post:

• How I used Github Pages to host my personal website

Originally published at parthtalks.weebly.com.

About Solute TechnoLabs LLP

We are a bunch of passionate technocrats who love building products and applications that we take pride in. Our mobile and web applications have been downloaded and used by millions and we’re here to change the internet: One piece at a time!