How to submit a HTML form to Google Sheets?

Google sheets is the most flexible data base to maintain leads or to-do list. But to collect data in Google Sheets you could use a simple approach like Google Forms. Or use Google Apps Script to create a HTML form.

In this article, we will look at both the options to see how to submit an HTML form to Google Sheets.

Option 1 : Build a web app using Google Apps Script

Ok. Now you have Google sheets as the target. The easiest way to connect or talk to Google Sheets is to use Google Apps Script to write your own form. If you are someone with a good knowledge about programming you can use Google Apps Script to achieve it. If you choose to go with this approach, you can refer to this article for step-by-step instructions of the above process here: https://medium.com/@dmccoy/how-to-submit-an-html-form-to-google-sheets-without-google-forms-b833952cc175

TLDR; you need to follow these 3 steps:
Step 1: Create your HTML form on your own or from Bootstrap samples here: https://getbootstrap.com/docs/4.3/components/forms/

Step 2 : Build a web app that accepts the HTML form response as POST request
- Create your spreadsheet that matches with the fields you have in your form.
- Create and setup Google Apps script. Copy paste a ready-made code that will help you with adding a new row upon every successful submit of your form.
- Authorize & setup new Apps Script project triggers for the Google Spreadsheet to listen to your form's submit.
- Publish the project as a web app. You will get a web app URL after you publish. Save it for the next step.

Step 3: Link your HTML form to Google Sheets.
Add the web app URL to your HTML Form. Also, add a piece of code to convert the form data into JSON to send it to your Google spreadsheet.

Now, your HTML form should be ready to submit the data to your Google Sheets!

Pro:

You will be able to customize it to suit your needs.

Con:

You need to maintain and troubleshoot, if you run into code related issues. Even experienced developers will have trouble getting their apps script running in their first go.

If you are not a developer, you may need a much simpler approach.

Option 2: Use Google Forms directly on your website. Connect it with a Google Sheet.

This is as simple as it gets. Your form is hosted on your website, so you have your own link to share with your users. Here is how you can embed your Google Form in your website. https://formfacade.com/faq/embed-google-form.html

Google sheets is the most flexible data base to maintain leads or to-do list. But to collect data in Google Sheets you could use a simple approach like Google Forms. Or use Google Apps Script to create a HTML form.

Pro:

You don't need to be a developer. It is free and by far the simplest way.

Con:

The Google Form's standard look is not professional. What do your users think when they see a form that doesn't have your branding? Does it give them the confidence that you will be able to deliver a great product or service, when you can't even show them a professional looking form?

Enter Formfacade!

Option 3: Add-on for Google Forms that converts a Google Form into a HTML form

You can use Formfacade add-on on your Google Form to get a embed-ready HTML code snippet to add into your web page. It automatically adopts to your website's style and CSS. You can follow the step-by-step article here to convert your first Google Form: https://formfacade.com/faq/embed-google-form-in-website.html

Google sheets is the most flexible data base to maintain leads or to-do list. But to collect data in Google Sheets you could use a simple approach like Google Forms. Or use Google Apps Script to create a HTML form.

Pros:

You can still be a non-programmer and can achieve building a HTML form.
Your forms will have a professional look and blends within your website. No iframe, no more Google branding.

Con:

The solution is priced at $8 per month for more than 100 responses.

Now that you have these choices, you can explore what suits you best. Find the best solution that matches your effort to benefit ratio.