Send HTML Data to Google Sheet

Demo

This demo also works for static pages generated from Github Pages. Once you click submit, after approximately 5 seconds, the data will be shown in this link. https://api.apispreadsheets.com/data/9472/.




18-35
35+


How to set up?

  1. Open up a blank Googlesheet. Name the first row as header. (View → Freeze → 1 row)
  2. Sign in API Spreadsheets account. https://www.apispreadsheets.com/
  3. Upload Google Sheets file by clicking the icon.
  4. Copy the API URL for your file.
  5. Edit your website html. Make sure to edit ajax url and headers (if private). Your form input names must match to your header in google sheets.
    6. 
<!DOCTYPE html>
<html>
<head>
<title>Save Web Form Data to Spreadsheets - Contact Form</title>
<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>
<script>
function SubForm (){
    $.ajax({
        url:'https://api.apispreadsheets.com/data/410/',
        headers: {"accessKey": "YOUR_ACCESS_KEY", "secretKey": "YOUR_ACCESS_KEY"}
        type:'post',
        data:$("#myForm").serializeArray(),
        success: function(){
          alert("Form Data Submitted :)")
        },
        error: function(){
          alert("There was an error :(")
        }
    });
}
</script>
</head>
<body>
  <form id="myForm">
    <label>Full Name</label>
    <br/>
    <input name="name" />
    <br/>
    <label>Age</label>
    <br/>
    <input type="radio" id="age" name="age" value="18-35" /> 18-35<br/>
    <input type="radio" id="age" name="age" value="35+" /> 35+<br/>
  </form>
  <button onclick="SubForm()">Submit</button>
</body>
</html>

References

  1. Save Web/HTML Form Data to Google Sheets