DEV Community

Connecting your HTML forms to a Google spreadsheet

Anthony on March 14, 2022

If you would prefer a video check it out on youtube at . HTML forms are one part of the frontend development cycle that every web developer has ...
Collapse
 
faraazusmani profile image
Faraaz • Edited

I have 4 fields in my form.
When I click submit, it shows success but the google sheet only updates the 'Date' column and all the other 4 columns remain empty.

I even changed the code a little bit
const headers = sheet.getRange(1, 1, 1, 1, 1, sheet.getLastColumn()).getValues()[0]
const nextRow = sheet.getLastRow() + 1
const newRow = headers.map(function(header) {
return header === 'Date' ? new Date() : e.parameter[header]
})
sheet.getRange(nextRow, 1, 1, 1, 1, newRow.length).setValues([newRow])

Please help

Collapse
 
shw profile image
stanleysiuhw

I have not change the code in Google app script and it work well. Suggest to check the script in HTML form. Since the script above may not show all, hence you may need to watch the video (youtube) for better understanding.

Collapse
 
faraazusmani profile image
Faraaz

I figured out the issue and now my problem has been resolved. Thanks.

Thread Thread
 
paulah profile image
Paula

Hi @faraazusmani . I have a similar issue, the only difference is that I have 2 fields in my form (so 3 columns in Excel).
What was the issue in your case?
I retried 2 times but didn't make any difference.

Thread Thread
 
faraazusmani profile image
Faraaz

Hi @paula , rather than changing the app script, I changed my HTML Form code instead. I did not change the number of fields or anything, everything remained the same, I just changed the code structure for the form segment.

Collapse
 
tdgao profile image
Truman Gao

Hey everyone,

If the form is not working, you need to make sure the column header matches the form input name

This is from this line of code in the google sheets script:


const newRow = headers.map(function(header) {
return header === 'Date' ? new Date() : e.parameter[header]
})

It gets the form parameter based on what your column heading name is. I spent an hour figuring that out so hopefully this saves you some time.

Collapse
 
shw profile image
stanleysiuhw

It's a great tutorial and I can build my form. Just 2 additional questions:

  1. Is it possible to receive email when new data submit?
  2. can change the success alert into redirect URL after form success submit?
Collapse
 
batusekerci profile image
Batuhan Şekerci

I walked your path but there is no change in spreadsheet even if request returns "success". I checked twice the "web app link" and wrote the column names including "Date".

Collapse
 
vamsikrishna62 profile image
vamsikrishna62 • Edited

i also have same issue how can i resolve

Collapse
 
batusekerci profile image
Batuhan Şekerci

Okay, I solved it. Just retried everything and it worked. Nice tutorial, thanks!

Collapse
 
faraazusmani profile image
Faraaz

I have 4 fields in my form.
When I click submit, it shows success but the google sheet only updates the 'Date' column and all the other 4 columns remain empty.

Please help

Thread Thread
 
batusekerci profile image
Batuhan Şekerci

Please check the names of columns are in match with the field names in code

Collapse
 
Sloan, the sloth mascot
Comment deleted
Collapse
 
irishgeoff10 profile image
Geoff
Collapse
 
khalid9th profile image
khalid9th

hi
How to print data in a PDF page after sending it to a Google Spreadsheet

Collapse
 
lananhdu profile image
lananhdu • Edited

How do I get an email notification that I have a new form after successful submission?

Collapse
 
kromate profile image
Anthony

You can edit the app script to adjust for that

Collapse
 
gopi1190 profile image
Gopinath

how to send gclid and utm data to google sheets with this script