How to create an HTML form that stores the submitted form data in Google Sheets using JavaScript, Google Apps Script, Fetch and FormData.

🎉 2026 Updates

• You can specify a custom sheet name for each form submission by including a hidden input field with the name "sheet_name" in your HTML form.
• The Google Apps Script now sanitizes inputs to prevent CSV/Formula Injection by prepending a single quotation mark to any potentially harmful characters.
• Receive email notifications for new form submissions by enabling the email notification feature in the Google Apps Script.
• Added an id field to each form submission to uniquely identify each entry.
• Added an example of using a honeypot for better protection against spam submissions as well as some basic validation for required fields for extra protection

1. Create a new Google Sheet

• First, go to Google Sheets and Start a new spreadsheet with the Blank template.
• Rename it whatever, it doesn't matter.
• Put the following headers into the first row:

	A	B	C	...
1	id	timestamp	email

2. Create a Google Apps Script

• Click on Extensions > Apps Script which should open a new tab.
• Rename it to whatever you want. Make sure to wait for it to actually save and update the title before editing the script.
• Copy the contents of form-script.js and paste it into the Code.gs tab in the Script Editor.
• Press File > Save:

Get notified of new submissions

If you want to receive email notifications on new submissions, make sure to replace the placeholder values with your actual email and name.

• Uncomment this function to your Code.gs file:

function sendNewSubmissionEmailNotification(subject, body) {
	const recipient = 'INSERT_YOUR_EMAIL_HERE'
	const senderName = 'INSERT_YOUR_NAME_HERE'

	MailApp.sendEmail({
		to: recipient,
		subject: subject,
		htmlBody: body,
		name: senderName,
	})
}

• Then call it in the try block of the doPost function before the return:

const emailSubject = 'New Form Submission'
const emailBody = 'A new submission has been added to row ' + nextRow
sendNewSubmissionEmailNotification(emailSubject, emailBody)

• And handle any errors with by calling it in the catch block:

const errorSubject = 'Error in Form Submission'
const errorBody = 'Form submission error:\n' + e.toString()
sendNewSubmissionEmailNotification(errorSubject, errorBody)

3. Run the setup function

• Next, go to Run > Run Function > initialSetup to run this function.

• In the Authorization Required dialog, click on Review Permissions.
• Sign in or pick the Google account associated with this project.
• You should see a dialog that says Hi {Your Name}, {APP_NAME} wants to...
• Click Allow

4. Add a new project trigger

• Click on Triggers in the sidebar. = Then click on + Add Trigger in the bottom right corner.
• In the Choose which function to run dropdown select doPost
• Set Select event source to From spreadsheet
• And Select event type to On form submit
• Then click Save

5. Publish the project as a web app

• Click on Deploy > New deployment in the top right corner.
• In the Select type dropdown, choose Web app.
• Set Execute as: to Me(your@address.com).
• For Who has access select Anyone.
• Click Deploy.
• In the popup, copy the Web app URL from the dialog.
• And click Done.

6. Input your web app URL

Open index.html.

• Give your form a name attribute
• Replace SCRIPT_URL with your script url:
• Update const form = document.forms['YOUR_FORM_NAME'] to match the name attribute of your form
• Specify sheet name in the value of the hidden input field

<!-- Give your form a name  -->
<form name="YOUR_FORM_NAME">
	<!-- Specify the sheet that you want to store the submissions in -->
	<input type="hidden" name="sheet_name" value="YOUR_SHEET_NAME" />
	<!-- If this hidden input is not present, it defaults to 'Sheet1' -->

	<input name="email" type="email" placeholder="Email" required />
	<button type="submit">Send</button>
</form>

<script>
	const scriptURL = 'YOUR_SCRIPT_URL'
	const form = document.forms['YOUR_FORM_NAME']

	form.addEventListener('submit', e => {
		e.preventDefault()
		fetch(scriptURL, { method: 'POST', body: new FormData(form) })
			.then(response => response.json())
			.then(response => console.log('Success!', response))
			.catch(error => console.error('Error!', error.message))
	})
</script>

7. Adding additional form data

To capture additional data, you'll just need to create new columns with titles matching exactly the name values from your form inputs. For example, if you want to add first and last name inputs, you'd give them name values like so:

<form name="newsletter_form">
	<input name="email" type="email" placeholder="Email" required />
	<input name="firstName" type="text" placeholder="First Name" />
	<input name="lastName" type="text" placeholder="Last Name" />
	<button type="submit">Send</button>
</form>

Then create new headers with the exact, case-sensitive name values:

	A	B	C	D	E	...
1	id	timestamp	email	firstName	lastName

8. Security, Validation and Restrictions

Honeypot

Check out examples/honeypot.html for an example of how to implement a honeypot field to help prevent spam submissions.

The default honeypot field is named mobile_number.

<div class="form-helper">
	<label>If you are human, leave this blank:</label>
	<input type="text" name="mobile_number" />
</div>

In the form-script.js the parameter is checked here:

// Changing the input name will require updating this check
// so if it's `name="my_new_name"`, these `e.parameter.my_new_name`
if (e.parameter.mobile_number && e.parameter.mobile_number !== '') {
	return ContentService.createTextOutput(
		JSON.stringify({ result: 'success', message: 'Bot detected' }),
	).setMimeType(ContentService.MimeType.JSON)
}

You can also add basic input validation and restrictions directly in your HTML form using attributes like maxlength and pattern. This helps prevent most accidental or low-level malicious attempts before anything gets sent to your Google Apps Script. For example, to restrict the first name input to a maximum of 50 characters and prevent it from starting with symbols like =, +, -, or @, you can use the following HTML:

<input
	name="firstName"
	type="text"
	placeholder="First Name"
	maxlength="50"
	pattern="[^=+\-@].*"
	title="Names cannot start with symbols like =, +, -, or @" />

The google script sanitizes (by prepending a single quotation mark) and formats all inputs as plain text before inserting them into the spreadsheet. This ensures that any potentially harmful characters are neutralized and that the data is stored consistently.

---

Have feedback/requests/issues?

Please create a new issue. PRs are definitely welcome, but please run your ideas by me before putting in a lot of work. Thanks!

Related/Inspirational Articles

• Google Spreadsheets as a Database – INSERT with Apps Script form POST/GET submit method
• Step by step setup to send form data to Google Sheets
• Google Sheet Form Post
• How to Submit an HTML Form to Google Sheets…without Google Forms
• Send Email from a Static HTML Form using Google Apps Mail!

Documentation

• Google Apps Script
• Fetch API
• FormData
• HTML <form> element
• Document.forms
• Sending forms through JavaScript