Submit a HTML Form to Google Sheet using Apps Script

Sandip Nigam | January 29, 2023 | Google Apps Script | 6 Comments

HTML Form to Google Sheet, Save Web Page Data to Google Sheet, Connect your HTML Form to Google Spreadsheet, Google Apps Script Web App Deployment

जब भी आप कोई भी Web App बनाते हैं और उसके Data को Store करने के लिए आपको एक Web Server की आवश्यकता होती हैं । Web Server पर यदि HTML रखना हो तो हम कोई भी Free वाले Blogging Platform का उपयोग कर सकते हैं। लेकिन यदि बाद Data Store करने की आए तो Google Sheet एक अच्छा Option हो सकता हैं। इसके लिए आपको अलग से कोई Tool भी Purchase नहीं करना होता हैं ।

Submit a HTML Form to Google Sheet only in 5 Steps

Step 1 : Create a HTML Form

सबसे पहले आपको एक HTML Form बनाना होगा या जिस भी Page का Data आप Google Sheet पर स्टोर करना हो उसका आपको एक Form बनाना होगा, निम्न Blog मे हमने एक Invoice बनाई हैं और उसी के Data को Google sheet पर Upload किया हैं ।

हमारे द्वारा उपयोग मे लिया गया Form निम्न लिंक से बनाया गया हैं आपको मे एक शॉर्ट Form केवल reference के लिए दे रहा हु यदि आप As it बनाना चाहते हैं तो निम्न लिंक का उपयोग करे ।

निम्न HTML बिल्कुल Plain HTML हैं । इसमे कोई भी Bootstrap और CSS का उपयोग नहीं किया गया हैं यह केवल समझने के लिए बनाया गया हैं , यदि आप Image मे दिखाए गए look जैसी Invoice बनाना चाहते हैं तो आपको उपरोक्त लिंक का उपयोग करना होगा ।

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Imagination Invoice Example</title>
    </head>
    <body>
        <h4>INVOICE</h4>
       <!-- Change action -->
        <form method="POST" action="https://script.google.com/macros/s/..../exec">

            Inv. No :   <input type="text" name="inv_no"  value="1001"> </br>
            Inv. Date : <input type="date" name="inv_dt"  value="2023-01-26"> </br>
            Customer :  <input type="text" name="cust_nm" value="Imagination"> </br>
            Address :   <input type="text" name="addr"    value="Address Here"> </br>
            City :      <input type="text" name="city"    value="City Here"> </br>
                            
            <table >
                <thead >
                    <tr>
                        <th >#</th>
                        <th >Particular</th>
                        <th >Qty</th>
                        <th >Rate</th>
                        <th >Amount</th>
                    </tr>
                </thead>
                <tbody >
                    <tr >
                        <th >1</th>
                        <td><input type="text"    name="item_nm" value="Item 1"></td>
                        <td><input type="number"  name="qty"     value="10"></td>
                        <td><input type="number"  name="rate"    value="1200"></td>
                        <td><input type="number"  name="amt"     value="12000"></td>
                    </tr>
                    <tr >
                        <th >1</th>
                        <td><input type="text"    name="item_nm" value="Item 2"></td>
                        <td><input type="number"  name="qty"     value="20"></td>
                        <td><input type="number"  name="rate"    value="1300"></td>
                        <td><input type="number"  name="amt"     value="26000"></td>
                    </tr>
                </tbody>
            </table>

            <button type="submit" class="btn btn-primary" >submit</button>
        </form>       
    </body>
</html>

Step 2 : Create a Google Sheet add Apps Script

इसके बाद आपको एक Google Sheet बनाना होगी , उसमे आप चाहे हो Columns के नाम पहले से लिख ले ।
Address Bar पर Google Sheet के URL को Copy करे।

Extension Menu पर क्लिक करे।
Apps Script Select करे।

Apps Script पर क्लिक करने पर कुछ निम्न प्रकार से Screen दिखाई देगी ।

Untitled project पर क्लिक करे
Project title पर जा कर जो भी आप नाम रखना चाहते हैं वह नाम Enter करे।
उसके बाद Rename पर क्लिक करे ।
अब आपको निम्न function screen दिखाई देगी इसमे आप को Code लिखना होगा।

उपरोक्त Window मे निम्न Code को Copy करे ।
“Your Google Sheet URL” के स्थान पर आपने जो Google Sheet URL Copy किया था उसे Paste करे।
Sheet1 के स्थान पर जो भी Sheet का नाम हो उसे लिखे यदि आपने Sheet नाम Change नहीं किया हैं तो फिर Sheet 1 ही रहने देवे।

HTML Form to Google Sheet Apps Script

let MySheets = SpreadsheetApp.openByUrl("Your Google Sheet URL");  //01
let InvSheet = MySheets.getSheetByName("Inv");                  //02 

function doPost(e)          //03 
{
    let Inv = e.parameters; //04
    let Qtys = Inv.qty;     //05 
     
     InvSheet.appendRow([Inv.inv_no[0], Inv.inv_dt[0], Inv.cust_nm[0], Inv.addr[0], Inv.city[0]]) ;    //06
    let i = 0;
    Qtys.forEach(function(value, index)                       //07
    {
      if (i > 0) {
        InvSheet.appendRow(["", "", "", "", "", Inv.item_nm[index], value, Inv.rate[index], Inv.amt[index]]) ;  //08
     }
     i++;


    });

    return ContentService.createTextOutput("Data Submitted"); //09
}

आइए आप आपको Google Apps Script के Syntax के बारे मे बताते हैं।

01: इस Line मे हमने MySheets Variable मे URL से Google Sheet को Declare किया हैं।
02: इस लाइन मे हमने MySheet मे से एक पहली Sheet को Point किया हैं।
03: doPost(e) इस Method का उपयोग Web Apps मे जब हम Data Form से Post Method से send करते हैं तब Apps Script dwara doPost Function Call किया जाता हैं।
04: हमने Multiple Columns की value Send कई है जिसमे के एक से अधिक value हैं यानि कई Qty, Rate और Amt Array हैं इसलिए हमने e.parameters का उपयोग किया हैं। ऐसा करने से जो भी data भेजा गया हैं उसे Inv Variable मे Receive किया जाएगा।
05: Array वाली value हो हमने Qtys वाले Variable मे Receive किया हैं।
06: जो भी Data हमने Variable मे लिया हैं उसे InvSheet.appendRow का उपयोग कर Sheet पर Store करवा दिया हैं । जीतने भी Columns हैं उनकी Value को आप Comma (,) से Separate कर Type कर सकत हैं।
07: इस लाइन मे हमने Qtys वाले array मे से value को get किया है , और index का उपयोग कर अन्य Array मे से भी value को get कर सकते हैं ।
08: इस Line मे हमने Array वाली Value को आगे से कुछ Columns को Blank छोड़कर Qty, Rate, Amt की Value set कर दी हैं।
09: जहा से request आई हैं उसको इस Line से Replay किया गया हैं , यह से दिया गया Message आपके Form पर display हो जाएगा ।

इतना करने के बाद आप Script को Save करेंगे।

Step 3 : Deploy Apps Script

आप आपको Project को Deploy करना होगा। Deploy के लिए आपको Deploy Button पर Click करना होगा। उसके बाद New deployment पर क्लिक करना होगा।

ऐसा करने पर निम्न Window open होगी ।

उपरोक्त स्क्रीन पर आपको Setting वाले Icon पर क्लिक करना होगा।
उसमे से हमे Web App को सिलेक्ट करना होगा।

New Description : यहा पर आपको Deployment का नाम देना हैं ।
Web App Execute as : मे आपकी Gmail ID सिलेक्ट हो कर आएगी।
Who has access : मे आप जिन्हे भी Execution की Permission देना चाहते हैं वह सिलेक्ट करना होता हैं। अभी के लिए आप यहा पर Anyone सिलेक्ट करे ।
Deploy : इतना कर आप Deploy Button पर Click करे।

Deploy करने पर निम्न Screen दिखाई देगी ।

इसमे आप Authorize Access की Permission देना होगी। यानि कई Authorize Access Button पर Click करना होगा।

इसके बाद आपको अपने Gmail Account को सिलेक्ट करना होगा जिससे आप Permission देना चाहते हैं।

इस तरह से Script का उपयोग करना Safe नहीं होता हैं Security Issue होते हैं , इसलिए यहा पर Google आपको Warning दे कर आपको Information देता हैं की आप जो भी कर रहे हैं यह Unsafe हैं फिर भी यदि आप Authorized करना चाहते हैं तो (unsafe) वाले option को select करे।

इतना करने पर आपके द्वारा बनाया गया Apps Script Project आपको Google Sheet को देखने, बनाने और Delete करने की Permission माँगता हैं यहा से Allow करने पर आपको एक Link दी जाती हैं ।

सभी Permission देना के बाद अंत मे आपको एक Web app URL provide की जाती हैं । आपको इस link को copy करना होता हैं।

और अब Apps Script का कार्य समाप्त होता हैं । अब आपको जो आपने सबसे पहले HTML Form बनाया उस पर जाना होगा।

Step 4 : Connect Apps Script Link to Form Action

आपने जो भी HTML Form बनाया हैं उस के Action Attribute पर आपको Web App Link देना होगी ।

लिंक देने से आपका Form अब Apps Script से Connect हो गया है। अब आपका Form Data भेजने के लिए Ready हैं। अब HTML Form to Google Sheet Connection Complete हो गया हैं।

Step 5 : Submit Form (Testing)

अब हमने जो HTML Form बनाया हैं उसे Browser पर run करेंगे और Data Enter करेंगे ।

Data Enter करने के बाद आपको Submit Button पर क्लिक करना होगा।
जब भी Form Submit होगा तब आपके द्वारा जो Action पर Web App की link दी हैं उस पर Request भेजी जाएगी और form कई Method POST हैं इसलिए doPost() method को call किया जाएगा।
doPost के call होने पर आपने जो भी Google Sheet ओर Data Insert करने के लिए logic लिखा हैं वह Execute हो जाएगा।
और आपको निम्न Message Display होगा।

इसके बाद जब आप Google sheet को देखेंगे तो उसके आपको Data दिखाई देगा। जो को कुछ इस तरह होगा।

अब आपका HTML Form to Google Sheet Connection के सभी Process Complete हुवे।

यह Article HTML Form to Google Sheet कैसा लगा बताना न भूले मिलते हैं Next Article मे Thanks for Reading ।

हमारे अन्य आर्टिकल

6 Comments

Nghi Tran July 9, 2023 Reply

can you give me this code file (include html and css)
Neeraj Vishwakarma December 26, 2023 Reply

Bahut sundar bhai

Developer Tips

Submit a HTML Form to Google Sheet using Apps Script

Table of Contents

Step 1 : Create a HTML Form

Step 2 : Create a Google Sheet add Apps Script

Step 3 : Deploy Apps Script

Step 4 : Connect Apps Script Link to Form Action

Step 5 : Submit Form (Testing)

हमारे अन्य आर्टिकल

Add a Comment

Table of Contents

Step 1 : Create a HTML Form

Step 2 : Create a Google Sheet add Apps Script

Step 3 : Deploy Apps Script

Step 4 : Connect Apps Script Link to Form Action

Step 5 : Submit Form (Testing)

हमारे अन्य आर्टिकल

Related Posts

Add a Comment