Building an HTML form to send user data directly to Google Sheets

[Nate_91Surf]

I want to build a simple HTML form that collects user information and saves it straight to a Google spreadsheet. The form needs to have a text input for collecting names and a submit button, both on the same row. I’m trying to do everything with inline HTML styling without using separate CSS files.

I’ve been working on this for several days now but can’t get it working properly. I’ve looked at different tutorials and examples online but nothing seems to work for my case.

Here’s what I have so far but it’s not working correctly:

<form action="#" method="post">
  <input type="text" name="USERNAME" placeholder="Enter Your Name" 
         style="width: 60%; height: 40px; color: #2196F3; font-size: 18px; 
                border: 3px solid #2196F3; font-family: Arial, sans-serif;">
  
  <input type="submit" value="Submit" 
         style="width: 35%; height: 40px; background: #2196F3; color: white; 
                font-size: 18px; border: none; font-family: Arial, sans-serif;">
</form>

The form displays fine but I can’t figure out how to connect it to Google Sheets to actually store the submitted data. Any help would be really appreciated!

[josephk]

You’re missing the deployment step. After writing your doPost function in Apps Script, you need to deploy it as a web app. Set execute permissions to “Anyone” and access to “Anyone, even anonymous”. Google gives you a web app URL like https://script.google.com/macros/s/your-script-id/exec - replace the # in your form action with this URL. Double-check that your Apps Script function writes to the right sheet and column. I had this exact problem because I forgot to deploy after writing the script.

[Claire29]

you’ll need to use google apps script for that. make a new google sheet, then go to extensions > apps script and create a doPost function to manage your form data. then, change your form action to the deployed script url instead of ‘#’. you can’t send html form data directly to sheets without backend processing.

[miat]

Your form method should be GET, not POST - that’s the main issue with Google Apps Script web apps. Had this exact problem last month. Double-check your input names match what doPost expects (case sensitive). Here’s what tripped me up: CORS policy. You’ll probably need a doGet function that returns HTML service even if you’re only handling POST requests. Test your deployed script URL in the browser first to see if it’s getting data before hooking up the form. Half the time the script works fine but your form field names don’t match what the script’s looking for in the request parameters.