Website Development Online Courses

How to save data in google sheet using html form

Hello Friends

If you are wondering how to save data in google sheet using HTML forms than below is the solution.

The Form

Create a file named index.html and copy this into it:

The Javascript

Create a file named google-sheet.js in the same directory and copy this into it:

The Sheet

Navigate to drive.google.com and click on NEW > Google Sheets to create a new Sheet. Give it a name, perhaps “Landing Page”. Put the following names into the first row of the first five columns:

The Script

Click on Tools > Script Editor…, which should open a new window and a dialog called ‘Google Apps Script’. Click on Create script for > Custom Functions in Sheets. This will create one script called ‘Code.gs’ containing functions such as SAY_HELLO.

Click on ‘Untitled Project’ at the top and give this project a name: ‘Form Script’.

Highlight all of this script (we are going to replace it) and paste in the following:

Click on the Save icon. Set the dropdown in the nav bar to ‘setup’ and click on the right-pointing triangle to its left to run this function. It should show ‘Running function setup’ and then put up a dialog ‘Authorization Required’. Click on Continue. In the next dialog ‘Request for permission – Formscript would like to’ click on Accept.

In the menus click on File > Manage Versions… We must save a version of the script for it to be called. In the box labeled ‘Describe what has changed’ type ‘Initial version’ and click on ‘Save New Version’, then on ‘OK’.

Back to the menus: click on Resources > Current Project’s triggers. In this dialog click on ‘No triggers set up. Click here to add one now’. In the dropdowns select ‘doPost’, ‘From spreadsheet’, and ‘On form submit’, then click on ‘Save’.

Back to the menus: click on Publish > Deploy as web app… For ‘Who has access to the app:’ select ‘Anyone, even anonymous’. Leave ‘Execute the app as:’ set to ‘Me’ and Project Version to ‘1’. Click the ‘Deploy’ button.

A dialog should appear announcing ‘This project is now deployed as a web app’. Copy the Current web app URL from the dialog; it should look something like:

Click OK.

Now go back to google-sheet.js and replace ‘SCRIPT URL GOES HERE’ with the URL copied from the dialog.

Display or refresh the index.html web page. Enter data into the four fields and click on the ‘Send’ button. Within a few seconds that data should appear in your Google sheet. If your browser is Google Chrome, right-click in the web page and click on Inspect Element > Console. It should show:

Well done! You can now modify this form and drop it into any web page to collect–at no cost–responses from those who visit your page. With a little research and effort, you may be able to get Google Apps to email every time someone submits your form.

I plan to use it to collect names and email addresses of those who visit my landing page.

Leave a Reply

Your email address will not be published. Required fields are marked *

nstinftotech.com Copyright © 2017