Thursday, February 1, 2018

How to submit HTML form to Google Sheet

How to submit HTML form to Google Sheet

In six simple steps, you can submit HTML form to google sheets.

 1. Create a new Google Sheet

  • First, go to Google Sheets and withStart a new spreadsheet the templateBlank.
  • Rename it. With any name you want.
  • Put the following headers into the first row:

2. Create a Google Apps Script

  • Click on Tools > Script Editor… which should open a new tab.
  • Rename it Submit Form to Google SheetsSometimes the name takes time, wait for that until you are 100% satisfied
  • When you are done with Tools->Script Editor and renaming, then, delete the function myFunction() {} block within the tab.
  • Paste the following script in it's place and File > Save:
 var sheetName = 'Sheet1'  
 var scriptProp = PropertiesService.getScriptProperties()  
 function intialSetup () {  
  var activeSpreadsheet = SpreadsheetApp.getActiveSpreadsheet()  
  scriptProp.setProperty('key', activeSpreadsheet.getId())  
 function doPost (e) {  
  var lock = LockService.getScriptLock()  
  try {  
   var doc = SpreadsheetApp.openById(scriptProp.getProperty('key'))  
   var sheet = doc.getSheetByName(sheetName)  
   var headers = sheet.getRange(1, 1, 1, sheet.getLastColumn()).getValues()[0]  
   var nextRow = sheet.getLastRow() + 1  
   var newRow = {  
    return header === 'timestamp' ? new Date() : e.parameter[header]  
   sheet.getRange(nextRow, 1, 1, newRow.length).setValues([newRow])  
   return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'success', 'row': nextRow }))  
  catch (e) {  
   return ContentService  
    .createTextOutput(JSON.stringify({ 'result': 'error', 'error': e }))  
  finally {  


Now you created a Sheet -> This sheet is already saved with some one of your choice -> and from Tools>Scripts Editor the script is past. Done now you can move the next step.

3. Run the setup function

  • Next, go to Run > setup to run this function.
  • In the Authorization Required dialog, click on Review Permissions.
  • Sign in or pick the Google account associated with this projects.
  • You should see a dialog that says Hi {Your Name}Submit Form to Google Sheets wants to...
  • Click Allow

4. Add a new project trigger

  • Click on Edit > Current project’s triggers.
  • In the dialog click No triggers set up. Click here to add one now.
  • In the dropdowns select doPost
  • Set the events fields to From spreadsheet and On form submit
  • Then click Save

5. Publish the project as a web app

  • Click on Publish > Deploy as web app….
  • Set Project Version to New and put initial version in the input field below.
  • Leave Execute the app as: set to Me(
  • For Who has access to the app: select Anyone, even anonymous.
  • Click Deploy.
  • In the popup, copy the Current web app URL from the dialog.
  • And click OK.
IMPORTANT! If you have a custom domain with Gmail, you might need to click OK, refresh the page, and then go to Publish > Deploy as web app… again to get the proper web app URL. It should look something like….

6. Input your web app URL

Open the file named.index.html Online 12 replace <SCRIPT URL> with your script URL:
NOTE: In the above code you can see that <SCRIPT URL> you will replace it with your URL.

 <form name="contact">  
  <input name="email" type="email" placeholder="Email" required>  
  <button type="submit">Send</button>  
  const scriptURL = '<SCRIPT URL>'  
  const form = document.forms['contact']  
  form.addEventListener('submit', e => {  
   fetch(scriptURL, { method: 'POST', body: new FormData(form)})  
    .then(response => console.log('Success!', response))  
    .catch(error => console.error('Error!', error.message))  

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="submit-to-google-sheet">  
  <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>  
Then create new headers with the exact, case-sensitive name values:

8. Submit HTML form to Google Sheet



  1. I run this from localhost, and it the sheet i get undefined variables, did i do anything wrong?

  2. okay i needed to replace name attribute with the exact name in the sheet.

  3. See, the Google marketing listing process always occurs in function of a search request for specific words. Imagine that you are into furniture retail sales.

  4. thanks man, its working fine for me

  5. Dig this. Using drive api, it can accept images too. Got it working with files.

  6. how to submit multiple values like from checkbox

  7. Is there a Youtube tutorial for this ? Thanks

  8. Thank much.. i am happy..for this code

  9. this code again not working.....what am i do now?

  10. This is amazing! Thanks so much

  11. What about TWO forms on the same page? This script doesn't support it. What changes need to be made and how can I have two identical forms with different form names post to the same sheet? All the input fields are identical. One form is in the footer area and the other form is a modal accessible through button clicks throughout the page for convenience. and THANK YOU everything else works!!

    You forgot to mention you have to specify the form name in the html java script


    I had to add a doGet() function to avoid a bunch of errors.


  12. While adding new project trigger, under "Choose which function to run", there are only 'doGet', 'handleResponse' and 'setup' options.
    There isn't a 'doPost' option at all.
    What is to be done? Proceed with 'doGet'?
    Please revert ASAP.


  13. Uncaught TypeError: Cannot read property 'addEventListener' of undefined

    I think I've done everything fine. But when I press submit I get this error and it opens again the form on a new tab with the url from my website plus the text written on the inputs.

    It seems there si something wrong with submit. Am I right?

    Thank you anyway.

    1. Well thi issue is solved. Had another name on the tag form :)

      Anyway now it seems I've having problem with CORS:

      ailed to load No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

      and de Failed fetch:

      fetch.then.catch.error @
      Promise.catch (async)
      form.addEventListener.e @

      I've searched and found in another post about the same thing. send post data into google spreadsheet. And this is what I found about CORS:

      CORS Issues
      If you’re seeing an error like the following: “No ‘Access-Control-Allow-Origin’ header is present on the requested resource,” double-check you’re making a GET request and not a POST request.

      I've set like this code with POST and doPost.

      So I don't know what can be wrong....

  14. I respect this article for the very much investigated substance and magnificent wording. I got so included in this material that I couldn't quit perusing. I am awed with your work and aptitude. Much obliged to you to such an extent. vpn

  15. Good website! I truly love how it is easy on my eyes it is. I am wondering how I might be notified whenever a new post has been made. I have subscribed to your RSS which may do the trick? Have a great day!

  16. That appears to be excellent however i am still not too sure that I like it. At any rate will look far more into it and decide personally! die besten vpn

  17. But nowadays this technique is not enough for a representation of contemporary web pages high-loaded with content and media. coding image example

  18. In Facebook, we can share stories of people who use your product or service. If they give you great feedback, share it! It’ll spread the message that your product is effective enough for someone to give you positive feedback. Effective Facebook Marketing

  19. I am extremely delighted in for this web journal. Its a useful subject. It help me all that much to take care of a few issues. Its chance are so awesome and working style so rapid.

  20. This comment has been removed by the author.

  21. good
    I tried it
    I would like to ask if I can store the data in more than one Google sheets ( or change the Google sheet ) after I publish a form html

  22. The first phase the preparation should, theoretically, be uninfluenced by the intended intensity and duration of the sound which is subsequently produced. In fact, however, so quickly are the three phases accomplished that the pianist rarely has capacity to think, in performance, of each phase separately. internetprivatsphare

  23. Is there a way a user after submitting the form can update their response ?

  24. This is truly a decent and useful, containing all data furthermore greatly affects the new innovation. A debt of gratitude is in order for sharing it


Contact Form


Email *

Message *