If your website doesn’t change that often and all the features you need can be implemented with a static site, then there is no point building a bulky dynamic site. After all static sites are fast, simple, costs low, easier to scale and more secure.
Being said that, sometimes we need some features that a static sites can’t offer. Getting data from a contact form is one of them. But there’s a very easy way to do that.
In this tutorial we will learn how to use google sheet as a backend to store the data submitted from a contact form and also send that information in email.
We’ll be using
- GitHub Pages to host my static contact form (free)
- Contact form template by Colorlib (also free)
- Google App Script to use Google Sheet as data storage and to send email notification (also free)
We’ll first create a url to submit the contact form to. Let’s begin !
1. Open Google Sheet and create a new sheet.
2. Add the names of the input fields in your html form in the first row of the sheet. We’ll add sn, name, email, subject and message Field sn is auto generated serial number and this is not included in the html form.
3. Click Tools in menu bar, then click Script Editor
4. This will open a script editor page. Copy the following code and paste it in the script editor. This script will listen for a POST request and add the submitted data as a new row in the google sheet and also send notification email. Don’t forget to replace the email address in the script with yours. It’s in the last line of the script.