{"id":20129401,"url":"https://github.com/sonawaneashwini/html-form-data-connect-with-google-sheet","last_synced_at":"2025-11-29T05:05:21.800Z","repository":{"id":244571869,"uuid":"815634664","full_name":"SonawaneAshwini/html-form-data-connect-with-Google-Sheet","owner":"SonawaneAshwini","description":"Master HTML form submissions to Google Sheets with the 2024 Script Editor. Find quick-start code and guides for efficient data handling","archived":false,"fork":false,"pushed_at":"2024-12-23T15:41:44.000Z","size":32,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-02T21:32:31.646Z","etag":null,"topics":["admission-form","google-sheet","google-sheets-api","html-form","htnl-css-javascript"],"latest_commit_sha":null,"homepage":"","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/SonawaneAshwini.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-06-15T17:12:59.000Z","updated_at":"2024-12-23T15:41:47.000Z","dependencies_parsed_at":"2024-11-13T20:35:39.165Z","dependency_job_id":"9625dea5-5cd9-4f3c-ae9f-200f723a7597","html_url":"https://github.com/SonawaneAshwini/html-form-data-connect-with-Google-Sheet","commit_stats":null,"previous_names":["sonawaneashwini/html-form-data-connect-with-google-sheet"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SonawaneAshwini/html-form-data-connect-with-Google-Sheet","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonawaneAshwini%2Fhtml-form-data-connect-with-Google-Sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonawaneAshwini%2Fhtml-form-data-connect-with-Google-Sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonawaneAshwini%2Fhtml-form-data-connect-with-Google-Sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonawaneAshwini%2Fhtml-form-data-connect-with-Google-Sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SonawaneAshwini","download_url":"https://codeload.github.com/SonawaneAshwini/html-form-data-connect-with-Google-Sheet/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SonawaneAshwini%2Fhtml-form-data-connect-with-Google-Sheet/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27334909,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-29T02:00:06.589Z","response_time":56,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["admission-form","google-sheet","google-sheets-api","html-form","htnl-css-javascript"],"created_at":"2024-11-13T20:34:11.286Z","updated_at":"2025-11-29T05:05:21.749Z","avatar_url":"https://github.com/SonawaneAshwini.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# html-form-data-connect-with-Google-Sheet\n\n![Screenshot (334)](https://github.com/SonawaneAshwini/html-form-data-connect-with-Google-Sheet/assets/172588428/2ca12a1f-39a2-49c2-9fb7-45142761f3c9)\n\n\n**[Link to demo](https://t7r3zf.csb.app/)**\n\nExcel sheet with LINK with code URL:\nhttps://docs.google.com/spreadsheets/d/1W-grOxADLmbdNqGXOf530LFXf-bCHJfU0Lim2-uxFx8/edit?gid=0#gid=0\n\n# Introduction\nIntegrating HTML forms with Google Sheets allows you to collect and store user-submitted data efficiently. In this report, we’ll explore how to achieve this integration using plain HTML, JavaScript, and Google Apps Script.\n\n#System Architecture\nThe system consists of the following components:\n1.\tHTML Form: The user interface for data input.\n2.\tCSS Styling: Enhances the visual appearance of the form.\n3.\tJavaScript: Handles form submission and data transfer to Google Sheets.\n4.\tGoogle Apps Script: Receives data from the form and stores it in a Google Sheet.\n   \n# Components Overview\n•\tHTML Form: Captures user data.\n•\tCSS: Ensures the form is user-friendly and visually appealing.\n•\tJavaScript: Manages form submission, validation, and asynchronous data transfer.\n•\tGoogle Apps Script: Acts as a web service endpoint to process and store form data in Google Sheets.\n\n# Features\n•\tUser-Friendly Interface: Simple and clean form design.\n•\tReal-Time Data Submission: Immediate data transfer to Google Sheets upon form submission.\n•\tForm Validation: Ensures all required fields are filled correctly before submission.\n•\tConfirmation Messages: Provides feedback to users upon successful submission\n\n# Implementation\n1.\tSet Up Google Sheet: Create or select an existing Google Sheet where the form data will be stored.\n2.\tCreate Google Apps Script: In the Google Sheet, go to Extensions \u003e Apps Script. Rename the default function and replace it with the provided script (see references for details).\n3.\tRun Initial Setup: Execute the initialSetup function to grant necessary permissions.\n4.\tAdd a Trigger: Set up a trigger for the script (e.g., on form submission).\n5.\tConfigure HTML Form: In your HTML form, set the action attribute to the Google Apps Script URL.\nBy following these steps, you can seamlessly connect an HTML front-end with backend storage provided by Google Sheets.\n\n\n\n# System Architecture Diagram\n![Sheet system](https://github.com/SonawaneAshwini/html-form-data-connect-with-Google-Sheet/assets/172588428/55197805-aa2d-4ef0-ac87-35acd3755f9e)\n\n \n# Data Flow Diagram\n![Sheet Data Flow](https://github.com/SonawaneAshwini/html-form-data-connect-with-Google-Sheet/assets/172588428/bfe58379-efc8-4437-9aec-441bd5f22578)\n\n \n# Integration with Google Sheets\nGoogle Apps Script\nThe Google Apps Script acts as a backend for the form, receiving data and inserting it into the specified Google Sheet. The script URL and the form submission handler are configured to work seamlessly together.\nHTML and JavaScript Integration\nThe form is designed using HTML, and the data is sent to the Google Apps Script using JavaScript's fetch API.\n\n# Conclusion\nConnecting HTML form data with Google Sheets simplifies data collection and management. Remember to handle user data securely and comply with privacy regulations.\n\n # References\n•\tGoogle Apps Script Documentation\n•\tFetch API Documentation\n•\tGoogle Sheets API Documentation\n•\tGoogle Spreadsheets as a Database – INSERT with Apps Script form POST/GET submit method\n\n## Licence 📜\nYou may use this tutorial freely at your own risk. See [LICENSE](./LICENSE).\n\n## Contributors ✨\n- Ashwini Sonawane\n  - Contact: ashwinisonawane9853@gmail.com\n  - GitHub: [Profile](https://github.com/SonawaneAshwini)\n- Shravan Dalavi\n  - Contact: shravandalavi137@gmail.com\n  - GitHub:[Profile]( https://github.com/ShravanDalavi)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonawaneashwini%2Fhtml-form-data-connect-with-google-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsonawaneashwini%2Fhtml-form-data-connect-with-google-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsonawaneashwini%2Fhtml-form-data-connect-with-google-sheet/lists"}