Google Sheets | Data Entry using HTML Form 🔥🔥#googlesheets #appsscript #dataentry

hello everyone in this video I'll demonstrate how to use an HTML form to enter data into Google Sheets just to let you know this does not require you to know HTML although knowing it will definitely be helpful on the left side of the screen I've opened an HTML form while on the right I have Google sheet with headers I've connected these two so that you can use the HTML form for data entry what's great is that this form is mobile friendly and you can easily perform data entry by opening this form on mobile devices now let's jump into a quick demo I'll fill out this form with some sample entries after that I will click on the submit Button as you can see the data appears in the Google sheet as expected let's do one more entry so it's working fine the form will also reset after each submission and provides a message indicating whether the submission was successful or if there was an error so how do you set this up for yourself but before setting this up let me give you a brief overview of what will be required and why so the first thing we require is definitely a Google spreadsheet in which we will be performing data entry what we need to do is attach some script or code and deploy it when we deploy it it will give us the URL that will accept post requests these post requests will contain data from the HTML form and this data will be passed and appended to the Google sheet now let's handle the spreadsheet part first first go to the link provided and make a copy of the Google spreadsheet by clicking on file then make a copy next go to extensions and click on app script this will open the script editor in your browser you'll find a few settings to customize by default I've set the data entry tab to sheet one if you want to use a different sheet make sure to edit the name here for example if you want the data entry to be performed on record tab then you will have to replace sheet one with record for the script part you don't need to make any extra changes now you'll need to deploy this script to get a URL that will serve as the action URL for your HTML form click on deploy then new deployment if it's your first time you may be asked to click on the settings icon choose web app and Prov a description in the execute as field select me and in the who has access section choose anyone click deploy you'll be prompted to authorize the script go ahead and Grant all the necessary permissions copy this URL you'll need it for your HTML form and in future if you edit your code then you will have to deploy this code again let's say say I make one change here in the code then I will hit save after that click on deploy choose manage deployment then choose last save deployment click on this pencil icon to edit it now from this dropdown choose new version and finally click on deploy and you'll get the URL this way the URL will remain unchanged if you instead clicked on new deployment then you will get new URL in that case you will have to replace the old URL with the new one in your HTML form as well so better go with manage deployment if you modify your code later now let's move on to customizing the HTML form I've provided the link for the form in the video description you need to download it and open it with some code editor if you don't have code editor installed in your system then download vs code editor I will attach the link in the description once installed you can open this file by right-clicking on the file and then choosing open with vs code or else you can also open the VSS code first and then drag this file onto the editor after opening it first you need to replace the post URL with your copied URL now moving on to form section I have tried to put almost all the basic input controls like text number date email password radio checkbox text area so that you can add or remove Fields as needed and duplicate them for additional entries making this form customizable for example let's say you don't want these fields for first name and last name instead you want client name in that case simply delete this and change the label here to client name now this is important here you see name attribute you need to change it to client name and this should exactly match with the header field name in your Google sheet so let's change that as as well I will delete this and replace this with client name now let's close this once you've made the changes you can open the HTML form in your browser by clicking open with Google Chrome or any other browser Let's test this again I am doing one fake entries and there you have it it's working perfectly fine after making changes to it you can also use this form on your mobile devices make data entry into Google Sheets a breeze that's it if you want this form to be populated with data from the Google sheet itself then put that in the comment section below I will try to make video on that as well if you have any questions please feel free to ask in the comment section thanks for watching and if you found this tutorial helpful please don't forget to subscribe to my channel

Channel: TechLever

Views: 58,024

Keywords:

Id: 5Ta8TrPsdN8

Length: 5min 52sec (352 seconds)

Published: Thu Nov 09 2023