How to Send HTML Form Data to Google Sheets for Free

1Create the Sheet

Open Google Sheets and create a new spreadsheet. Name the tab Submissions. In row 1, add column headers that match the name attributes on your form inputs. Add timestamp as the first column. The script reads row 1 as the source of truth for column mapping, so a typo in a header is a typo in the data.

Example row 1: timestamp | name | email | message

2Open Apps Script and paste the code

Inside the Sheet, go to Extensions, then Apps Script. Delete the boilerplate and paste this:

Code.gsconst SHEET_NAME = 'Submissions';
const SCRIPT_PROP = PropertiesService.getScriptProperties();

function initialSetup() {
  const activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet();
  SCRIPT_PROP.setProperty('key', activeSpreadsheet.getId());
}
function doPost(e) {
  const lock = LockService.getScriptLock();
  lock.tryLock(10000);
  try {
    const doc = SpreadsheetApp.openById(SCRIPT_PROP.getProperty('key'));
    const sheet = doc.getSheetByName(SHEET_NAME);
const headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0];
const nextRow = sheet.getLastRow() + 1;

// Honeypot: if a hidden field named "website" is filled, drop the submission.
if (e.parameter.website) {
  return ContentService.createTextOutput(JSON.stringify({ result: 'ignored' }))
    .setMimeType(ContentService.MimeType.JSON);
}

const sanitize = (value) => {
  if (typeof value !== 'string') return value;
  // Block CSV / formula injection
  return /^[=+\-@]/.test(value) ? "'" + value : value;
};

const newRow = headers.map((header) => {
  if (header === 'timestamp') return new Date();
  return sanitize(e.parameter[header] || '');
});

sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow]);

return ContentService
  .createTextOutput(JSON.stringify({ result: 'success', row: nextRow }))
  .setMimeType(ContentService.MimeType.JSON);

  } catch (err) {
    return ContentService
      .createTextOutput(JSON.stringify({ result: 'error', error: err.toString() }))
      .setMimeType(ContentService.MimeType.JSON);
  } finally {
    lock.releaseLock();
  }
}

Save the script. Then in the function dropdown at the top of the editor, pick initialSetup and click Run once. Approve the OAuth prompt when Google asks. You will only do this once.

3Deploy as a web app

Click Deploy, then New deployment. Pick Web app. Set Execute as: Me. Set Who has access: Anyone. Click Deploy. Copy the long URL that ends in /exec. That URL is your form endpoint.

4Wire up your HTML form

Drop this into your page. Replace PASTE_YOUR_DEPLOYMENT_URL_HERE with the URL from step 3.

index.html<form id="contact-form">
  <input type="text" name="name" required placeholder="Name" />
  <input type="email" name="email" required placeholder="Email" />
  <textarea name="message" required placeholder="Message"></textarea>
  <!-- Honeypot: hidden from humans, filled by bots -->
  <input type="text" name="website" tabindex="-1" autocomplete="off" style="position:absolute;left:-9999px" />
  <button type="submit">Send</button>
</form>

<script>
  const form = document.getElementById('contact-form');
  const endpoint = 'PASTE_YOUR_DEPLOYMENT_URL_HERE';
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const data = new FormData(form);
    try {
      await fetch(endpoint, { method: 'POST', body: data });
      form.reset();
      alert('Thanks. We will be in touch.');
    } catch (err) {
      alert('Something went wrong. Try again in a minute.');
    }
  });
</script>

Submit a test entry. The row should appear in your Sheet within a second.