How to store HTML form data on google sheet

 


To achieve this, you can create an HTML form where users can input their first name, last name, and email. Then, you can use Google Apps Script to handle form submission and store the data in a Google Sheet. Here's how you can do it:

  • Create an HTML form:

<!DOCTYPE html>
<html>
<head>
  <title>Submit Form</title>
</head>
<body>
  <h2>Submit Your Information</h2>
  <form id="myForm">
    <label for="firstName">First Name:</label>
    <input type="text" id="firstName" name="firstName"><br><br>
    <label for="lastName">Last Name:</label>
    <input type="text" id="lastName" name="lastName"><br><br>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br><br>
    <input type="submit" value="Submit">
  </form>

  <script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
      event.preventDefault();
      submitForm();
    });

    function submitForm() {
      var firstName = document.getElementById("firstName").value;
      var lastName = document.getElementById("lastName").value;
      var email = document.getElementById("email").value;
      
      google.script.run.submitForm(firstName, lastName, email);
      
      document.getElementById("myForm").reset();
    }
  </script>
</body>
</html>
  • Create a Google Apps Script to handle form submission and store the data in a Google Sheet:

function doGet() {
  return HtmlService.createHtmlOutputFromFile('index');
}

function submitForm(firstName, lastName, email) {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
  var lastRow = sheet.getLastRow();
  var newRow = lastRow + 1;
  
  sheet.getRange(newRow, 1).setValue(firstName);
  sheet.getRange(newRow, 2).setValue(lastName);
  sheet.getRange(newRow, 3).setValue(email);
}

To set up:

  1. Create a new Google Sheets document.
  2. In the Google Sheets document, go to Extensions > Apps Script.
  3. Delete any code in the script editor and replace it with the provided Google Apps Script code.
  4. Save the script.
  5. In the script editor, go to File > New > HTML file. Name it index.html.
  6. Delete any code in the HTML file and replace it with the provided HTML form code.
  7. Save the HTML file.
  8. Close the script editor.
Now, you can run the script by clicking the play button in the script editor. After running the script, you'll be prompted to authorize it. Once authorized, you'll get a URL for the web app. Share this URL with users who will submit the form. When users submit the form, their data will be stored in the Google Sheet you specified in the script.
Previous Post Next Post