Save HTML form data to Google Sheets using JavaScript
नमस्कार साथियों ,
यदि आप किसी भी HTML FORM से डाटा को अपने गूगल शीट पर सेव करना चाहते हैं तो आप इस पोस्ट को ध्यान पूर्वक पढ़े इस पोस्ट में HTML FORM TO GOOGLE SHEET की संपूर्ण जानकारी शेयर की गई है साथ ही फ्री HTML CODE व Java script भी शेयर की गई है|
Steps to follow for html form to Google sheet
- Create a html form for user input
- Create a Google sheet with any name
- Create google sheet field name
- Open Extension and add Java Script
- Change Field in Java Script and Html form
Create a html form for user input
सबसे पहले आप एक html form बनाए यहा पर एक basic HTML FORM के source code दिया गया है आप कॉपी कर सकते है साथ ही आप इसमें extra field add कर सकते हैं तथा इसे modify या अपने अनुसार css ऐड कर एक्स्ट्रा स्टाइल व डिजाइन कर सकते है।
Create a Google sheet with any name
Second step में आपको google sheet को open कर लेना है जिसमे आपको एक फाइल create करना होगा file का आप कोई भी नाम रख सकते है आप चाहे तो sheet का नाम भी चेंज कर सकते है या default name से भी रख सकते है जिसका default name होता है sheet1 इसे आपको java script me यूज करना होगा।
Create google sheet field name
इस Step में आपको अपने User input html form से डाटा को गूगल शीट पर सेव करना होगा जिसके लिए आपको गूगल शीट में इनपुट फील्ड को सेव करने के लिए इनपुट फील्ड बनाने होंगे जैसे मेंने अपने html फॉर्म में user name ,Mobile Number , User email , Product list, User Massage इनपुट फील्ड लिया है इसी प्रकार आप गूगल शीट में भी इनपुट फील्ड बनाये| आप चाहे तो इनको चेंज भी कर सकते है और अपने अनुसार गूगल शीट पर डाटा का नाम सेव कर सकते है |
Open Extension and add Java Script
आपको एक्सटेंशन विंडो पर क्लिक करने पर कुछ ऑप्शन दिखाई देंगे आप App Script पर क्लिक करे क्लिक करने के बाद एक नई विंडो ओपन होगी जिसमे आपको कुछ जावा स्क्रिप्ट के कुछ कोड शो होंगे जिन्हे आप डिलीट कर दे व निचे दिए गए जावा स्क्रिप्ट को कॉपी कर पेस्ट कर दे | इस फाइल का नाम code.gs के नाम से दिखाई देगा |
यदि आप एक्सट्रा फील्ड ऐड करना चाहते है तो आप ऐड कर सकते है या आप चेंज भी कर सकते है पर इसके लिए आपको html फॉर्म में फील्ड नाम को गूगल शीट के फील्ड नेम के समान ही रखना है जैसे हमने html फॉर्म में यूजर का नाम सेव करने के लिए name=username दिया है मोबाइल नंबर के लिए name=tel दिया है इसके प्रकार सभी इनपुट फील्ड को नाम दिया गया है आपको उसी प्रकार से java Script में सेव करना होगा जैसे input फील्ड |username|tel|email|product|sms|.
Change Field in Java Script and Html form
Change in Code.gs -
- Sheet name
- Sheet url
- Input field if you want
Change in html -
- No change (if you Add Extra Field)
- Java Script change
- Script url (#) Input field if you want
Deploy this app Script
- Click on Deploy
- New Deployment
- Select Webapp
- Access-Anyone
- Copy Webapp url
- Give Access Permission
