Search This Blog

Ads by Adsterra

How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript

How to Submit HTML Form Data to Google Sheets | Save Using doPost Method | AppScript | JavaScript.

  1. First open Vs Code or any your favourite code editor and create a index.html file.
  2. Paste the below code in the index.html.
                    
                        <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>HTML form to Google Sheet</title>
    </head>
    
    <body>
        <h1 id="msg"></h1>
        <form>
            <input type="text" name="name" placeholder='Name'><br><br>
            <input type="email" name="email" placeholder='Email'><br><br>
            <input type="tel" name="phone" placeholder='Phone'><br><br>
            <input type="submit" id="sub">
        </form>
        <script>
            let form = document.querySelector("form");
            form.addEventListener('submit', (e) => {
                e.preventDefault();
                document.querySelector("#sub").value = "Submiting..";
                let data = new FormData(form);
                fetch('Paste_Your_Api_EndPoint_Url', {
                        method: "POST",
                        body: data
                    })
                    .then(res => res.text())
                    .then(data => {
                        document.querySelector("#msg").innerHTML = data;
                        document.querySelector("#sub").value = "Submit"
                    });
            })
        </script>
    </body>
    
    </html>
                    
    
                
  3. Now goto https://google.com/sheets and create a blank spreadsheet.
    html form to google sheet
  4. Click on extensions then click on Apps Script.
    apps script google sheet
  5. A new AppScript project will be open in new tab. Paste the below code there and go back to spreadsheet tab then copy url of spreadsheet then give the URL in argument of SpreadsheetApp.openByUrl() method in the code.
                    
                        const sheets = SpreadsheetApp.openByUrl("Paste your spreadsheet url here");
                        //if you have changed your sheet name then replace the below Sheet1 with your sheet name
    const sheet = sheets.getSheetByName("Sheet1");
    function doPost(e){
      let data = e.parameter;
      sheet.appendRow([data.name,data.email,data.phone]);
      return ContentService.createTextOutput("Success");
    }
                    
                
  6. Click Deploy then click on New deployments.
    form to spreadsheet google
  7. Select type "Web App".
    how to submit html form to google sheet
  8. In configuration section input your description and select "Anyone" in "who has access" dropdown menu then click on deploy.
    html to google spreadsheet
  9. Click the Authorize Access Button.
    Authorize access google sheet
  10. Select your Google account then you will see something like below image, click on "advanced" and click on "Go to Untitled project (unsafe)" then allow your Google account to access the project.
    allow access to google sheet
  11. You will get a API end point URL there Copy the URL then goto to your code editor and give the URL to argument of fetch() method. You are Done!.
    Done submmiting html form to google spreadsheet

No comments:

Post a Comment