Traditionally, web applications have been implemented in client-server infrastructures. The paradigm has been to have our own servers that receive requests from our users’ browsers. With the increasing use of javascript frameworks, more and more websites are being implemented as simply static websites that require nothing more than serving HTML code, CSS styles and images.
GitHub pages allows web hosting of static websites totally free for public repositories that we own. One of the main drawbacks is not being able to permanently save data in a database or having some interactivity with the server. Ex: send emails.
With this article we are going to see an example of how a static websites could save information in a Google Spreadsheet.
1. Create a Google Spreadsheet and its associated Google Apps Scripts
Create a blank Google Spreadsheet from sheets.new. Give it a descriptive name, for example the name of your website and the type of form you want to implement. Eg: mydomain.com – Contact form
From the Tools menu option, select Script Editor. I recommend that you put the same name to the Google Apps Scripts as to the previous Google Spreadsheet to be able to locate them quickly.
2. Copy the code and customize fields
Then you can copy below code and copy it to your Google Apps Script.
https://gist.github.com/jrosell/be5766949856f3e54c1d42992342e30d
Make sure to customize the SHEET_NAME and inputFields variables by the tab name you want to use in your Google Spreadsheet and the form fields you want to receive. In this case we are using the Sheet1 tab and the name, email and comments fields (in spanish).
3. Setup the Google Apps Scripts
Run the setup function. This way we add the Key property on the Google Apps Scripts with the ID of the Google Spreadsheet we use. If you wish, you could add it manually.
4. Publish the web application
From the Publish menu, select the Deploy as web app option. Be sure to select the option “Anyone, even anonymous” in “Who has access to the app:” and post.
Don’t worry if you see the “This app isn’t verified” alert. You have to go to the advanced options and select the “unsafe” option.
Write down the URL since it is in this URL where you will have to send the data of your form.
5. Test the form
On your website you can already use the form. Copy and paste this HTML to your website and modify the URL that was saved on line 22
https://gist.github.com/jrosell/5c8873e8d6f4098ddcc05a5488da05c3
Try it and customize what you want.
