{"id":2916,"date":"2020-04-10T17:32:08","date_gmt":"2020-04-10T15:32:08","guid":{"rendered":"https:\/\/www.thediar.com\/?p=2916"},"modified":"2022-03-10T15:48:37","modified_gmt":"2022-03-10T14:48:37","slug":"serverless-web-apps-google-scripts","status":"publish","type":"post","link":"https:\/\/www.thediar.com\/en\/blog\/serverless-web-apps-google-scripts\/","title":{"rendered":"Google App Script Tutorial: Example of html form and Google Spreadsheet database"},"content":{"rendered":"

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.<\/p>\n

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.<\/p>\n

With this article we are going to see an example of how a static websites could save information in a Google Spreadsheet.<\/p>\n

1. Create a Google Spreadsheet and its associated Google Apps Scripts<\/h3>\n

Create a blank Google Spreadsheet from sheets.new<\/a>.<\/span> Give it a descriptive name, for example the name of your website and the type of form you want to implement.<\/span> Eg: mydomain.com – Contact form<\/span><\/span><\/p>\n

From the Tools menu option, select Script Editor.<\/span> 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.<\/span><\/p>\n

2. Copy the code and customize fields<\/h3>\n

Then you can copy below code and copy it to your Google Apps Script.<\/span><\/span><\/p>\n