Follow this guide to have your contact form populate Google Sheets. Click the ▶︎ icon next to any step to see a detailed walkthrough with screenshots. If anything is confusing please reach out.
Basic Setup
- Create a free account at https://nocodeapi.com. NoCodeAPI makes it easy to send form submissions to a Google Sheet with just a few lines of code.
- Go to the NoCodeAPI marketplace and click "activate" next to the Google Sheets option.
- Open the NoCodeAPI Google Sheets dashboard, click the "Make Google Sheets API" button in the top right, and then fill in the required options.
- Secure your endpoint so that your front-end can only submit to your Google Sheet (POST request) not read the data, update, or delete. Click "Secure Endpoint" link in the top right. Then check GET, PUT, and DELETE and then click "Update Key Settings". Now the only request that can be made without an API key is a POST request, which is exactly what you need so that your front-end can submit data to your Google Sheet. You don't need to do anything with the provided API key value.
- Copy the full "Base URL" provided in the Google Sheets dashboard and add it to your codebase
.envfile as theSHEETS_ENDPOINTvalue. - You'll also need to fill in the
SHEETS_TAB_IDvalue. That will be the name of the tab at the bottom of your Google Sheet (by default it's "Sheet1").
You should now have a working contact form in your web app that populates your Google Sheet.