how can i connect this email input to google sheets ?
i used chatgpt to connect this with google sheets but it didn't work chatgpt made me create private key in google cloud console but it's not working is there any other way ?
77 Replies
i want to take email address as an input and store that email in google sheets
You will need a script on your google sheet and to connect that endpoint to your form so it populates into the sheet on submit
DEV Community
Connecting your HTML forms to a Google spreadsheet
If you would prefer a video check it out on youtube at . HTML forms are one part of the frontend...
i followed this
now my code looks like this
am i doin something wrong ?
I can’t look at the article right now but did you link the correct script URL so your form knows where to go? And when adding your script did you make sure to set permissions correctly?
well script URL is right
but don't know bout permissions
how can i do that ?
i think the java script that i used is not really connected with the button and input field
Permissions when you deploy the script with the deploy button
oh yeah that is done
can i show you the script ?
What’s going on when you hit the submit button? Are you getting an alert saying Success or Error?
nothing
this is the script
do you think something wrong here with email and notify button
I’ve never seen querySelector submit. Maybe it should be button[type=submit]? What happens if you console log submitButton
where ?
In the browser where you have the page with the form open
i only want to receive email but it has something date
return header === 'Date' ? new Date() : e.parameter[header]
First you need to make sure you’re selecting the element you have the event listener.
On
how can i do. that
i mostly do front end scss max
not even js
so kinda confused here
In your js file at the bottom, do a
console.log(submitButton)
Then open your dev tools and go to the console
See what it returns
I’m new to js so probably not the best person to help you with this but we can try to debug a little bitis this right ?
cool
Yes now open the console in the dev tools
sorry
but where is that ?
Okay let’s do this a different way
On your html where you have the button add an id
<button type=“submit” id=“submitButton”>notify me.</button>
then in your script const submitButton = querySelector(‘#submitButton’)
done
You changed your querySelector to #submitButton ?
yes
Now try the form
no
At the very least you should get an alert with success or error
no alert
What do you get when you copy the script url and paste it into a new tab and navigate to it
Then the script URL is incorrect
how ?
Idk but it says right there function not found
You need the correct url to the script you set up in your google sheets script
When you deployed did you set permissions correctly?
oh god
yes
exactly the same as it shown in tutorial
The url is the endpoint, it needs to be able to connect your file to that script
I would watch a few tutorials to see if things have changed since that one was posted a couple years ago
is anything wrong in this script ?
I couldn’t tell you
And I got to go, sorry to leave you without a solution but keep working on it , do some googling and use your dev tools!! Google Dev Tools , you get there by right clicking and choosing inspect. The console will be your best friend
thanks for this help man
i'll see what i can do next
Omg
You closed off your form twice
You have
``<form></form>
<input…>
<button></button>
</form>
what
how
what should i do ?
You need
The input and button need to be inside the form tag
let's see
got the new working url too
when i click submit i got this
I haven’t watched the tutorial you did but see if anything is different from this one, I have it saved as I used it before and it worked
https://youtu.be/jdIntB1J-i8?si=xkQZ4N46dB3HpENK
Learning Axis
YouTube
Google Sheets | How To Send HTML Form Data To Google Sheets
#html #css #javascript #tutorials #trending #new #google #googlesheets #integration
Source code (HTML Form): https://shorturl.at/frDFY
App Scripts: https://shorturl.at/cklT2
Sound effects from Pixabay.
i added this in the script
function doGet(e) {
return HtmlService.createHtmlOutput('This is your web app');
}
did everything same not workingYou made sure to click “run” once you put the script into google sheets ? And when deploying set your permissions to Anyone ? Copied the endpoint after deploying and put that into the script url ?
yes
Try putting it into your form inline under “action” and comment out everything you have on file (const form= etc)
That’ll help you identify where the issue is
if i only keep it for action
then nothing happens
i think i know what is wrong
link is giving same error
What do you think is wrong ?
Then it’s with the sheets side. Are you absolutely sure you set your permissions on Deploy to “anyone”? And that you copied the correct endpoint?
he is using input a submit button i thought that is wrong
No it shouldn’t matter they both have type=submit
i'm sure and i can bet anything on that
There’s something wrong on the sheets side because that 405 error means the google sheets side received the request but can’t deliver, often because the url is wrong. Can you show me the scriptURL you’re using
It still says function not found.
Try going to a brand new sheet, do all your naming, make a new Apps Script, run it, deploy it and get that new url
i used the same script
ok wait
Make sure the Sheet Name is correct
And make sure you’re copying the endpoint from the deploy and not the address bar
Hmm so nowhere in the script is there a function doGet() it’s called doPost. But you added a function doGet(){….} in the script on Sheets ?
script is not opening on other account
What do you mean not opening ?
You have to run Apps Script right ?
app script is not opening bad request 400
Maybe they are using Christmas to do some maintenance or something
i guess so
Could be the issue you’re having because it sounds like everything is right
which name should i give here ?
Doesn’t the tutorial tell you? I think it’s the name you gave the sheet
Sheet1 I believe is the default
Check if it has a space
well he used different name than actual sheet name
should i add triggers ?
Yeah it’s the same name as your spreadsheet
Triggers? Idk where are you seeing that ? Honestly I bet it’s the service is down for maintenance right now if you connected everything correctly
Not the whole sheet, the little tab at the bottom where you make new sheets . On the screenshot I sent it says form data. Whatever that name is is what goes into the variable const sheetName. Copy it exactly
FUCK
it worked
damnnn
but it gave me one problem
ui is messed up
it suppose to look like this
Just add some padding to the form.
Yay! What was the issue, did you identify what you did differently?
Probably because of how you had that extra form closing tag while you were writing the css, nothing to do with the script . That’s a much easier problem to fix 🤣
i thik it was sheet name
Oh my goodness well I’m very glad it works now
yeah i'm relived and finally i can deploy
how to give padding to form ?
i'm unable to make this text center
On your form css padding:1em;
Center between what and what ? You could try text-align:center; on your button styles and see if that’s what you’re looking for
oh i figured it out. i had to give display flex to form in scss
if you're available can you take a look at my post it's very weird.
https://discord.com/channels/436251713830125568/1189185573630525450
As it’s a background image you’ll need to make the div it lives in overflow the page to be pushed outside the viewport and have overflow hidden set on the body or html.
The website is good now. Not perfect in responsiveness but it’s okay
Inputs are one of the only elements that aren’t responsive out of the box. It’s in a flex container so you should be able to give it a width:100% or so it’s more responsive
You could also create a media query with flex-wrap so the form wraps at a certain breakpoint.