Streamlining Data Collection: Connecting HTML Forms to Google Sheets

Send bulk WhatsApp messages effortlessly using tools like Google Sheets and automation. Reach multiple users at once, save time, personalize messages, and streamline your customer communication workflow instantly.

Step 1: Click on the Copy button to copy the code snippet.
Step 2: Paste the copied code into your project’s script editor.

Apps Scripts Blog

Read Blog

Apps Scripts Code 1

function doGet() {
return HtmlService.createHtmlOutputFromFile('index');
}
function processForm(form) {
var sheet = SpreadsheetApp.getActiveSheet();
var row = [form.fname, form.lname, form.email, form.mobile, form.address, form.description];
sheet.appendRow(row);
return true;
}

Apps Scripts Code 2

<!DOCTYPE html>
        <html>
        <head>
        <base target="_top">
        </head>
        <body>
        <div style="text-align:left;width:16%;margin:50px auto 0px; display: block;line-height: 26px; padding: 59px 137px;background-color: #8080801c;">
        <form id="myForm">
        <h1>Enquiry forms</h1>
        <label for="name">First Name:</label>
        <input type="text" id="fname" name="fname"><br><br>
        <label for="name">Last Name:</label>
        <input type="text" id="lname" name="lname"><br><br>
        <label for="email">Email:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="name">Mobile Number:</label>
        <input type="text" id="mobile" name="mobile"><br><br>
        <label for="name">Address:</label>
        <input type="text" id="address" name="address"><br><br>
        <label for="name">Description:</label>
        <input type="text" id="description" name="description"><br><br>
        <input type="button" value="Submit" onclick="submitForm()">
        </form>
        </div>
        <script>
          function submitForm() {
            google.script.run.withSuccessHandler(alert('Data submitted successfully.')).processForm(document.getElementById('myForm'));
            document.getElementById('myForm').reset();
          }
        </script>
        </body>
        </html>