Thx for make this video! I'm data scientist student and I have to deploy model as a web app and receive feedback from user, but I have 0% knowledge in web development this video is very helpful🥳
Nice content!! Three things though; - Is this safe to implement on a website where users subscribe to a service? - Will it be possible to receive payment screenshots from users using this? - Will it be possible to get notified when a new data is available in the sheet? Thanks in anticipation. You just earned a new subscriber!
1. I cannot verify how safe this is for now as regards payment and subscriptions. You can place a paywall before users can visit the form. That may handle that for you. 2. I have not tried uploading of image but I will look into it. 3. Notification should be possible but you will have to go to Google sheet scripts market and get a script that will send you notifications whenever a new entry is made to the sheet. I am making a video on how to get form submissions to your email. That might help.
Yesssssssssssssssss!!!! This is the video have been lookin for, thank you so much !! ❤❤❤ your newest subscriber btw . 1 question? - will this work with images
@@linktoyinka Hi, I have tested this. It does not work for files. If your form has file input, the submission will still work but only name of the file will be sent to your google sheet. So you need to use an alternative if you are looking at using the web form for file upload.
Hi, I have tested this. It does not work for files. If your form has file input, the submission will still work but only name of the file will be sent to your google sheet. So you need to use an alternative if you are looking at using the web form for file upload.
Glad you liked it. Please give me two to 3 days, I will make that video. It is in my todo list. Do subscribe and turn on notification to get alerted when I upload
0:00 Introduction 2:28 Setting Up Your Google Sheet 3:09 Creating the Google Apps Script 8:01 Deploying the Google Apps Script as a Web App 10:15 Creating the React App 13:38 Connecting the React Form to Google Sheet 19:50 Testing the Setup 22:26 Handling Form Submission and Responses 26:04 Conclusion and Additional Features
This helped me a lot! I'm trying to set up a second script that will run on some occasions, but it seems to always run the first script I created. Do you know why? And a second question - do you know if it's possible to append data to specific rows - e.g. finding the correct row by the value in x column and then adding data to y and z column. Any tips or resources are welcome 😇 Either way, thanks for a great video!
You are welcome Matilda. What do you mean by a second script that will run on some locations? If what you want is for another script to run when a completely different button is clicked, you'll have to attach the function to the separate button or action. Remember that the script only gets called on the click of the "Send" button in my case. For your second question, I think this is covered already. all the names on my form, enter the cells specified for Name in my Google sheet. But if you are trying to achieve something else, send me a message on Twitter @AnatuTech let's see what we can do together. There's always a way out
Hey. Really nice guide. I was wondering if it is possible to set each sheet to be for a single form and has like for ex. 3 forms and for each one will be one sheet. Do you have any idea if it is accessible?
Hi, I believe you can do this. Let's try to name each sheet separately. Then create a different deployment for each sheet. The code written in the app script will be similar except that you will replace the "sheet name" accordingly. Then you will use the deployment endpoint link for each web form accordingly. This should work fine. If you do not get me let me know let's see if we could make a video on that.
Hey I'm using it with my Next.js application but I face a CORS error. Since it's in my localhost, I am using an extension to bypass but could you provide me with a solution to enable CORS on AppScript please?
There seems to be one error. I have tried 4 hours but can't seem to solve it. SyntaxError: Unexpected token 'Y', "Your messa"... is not valid JSON Please help
i followed all the steps, but after submitting the form, the data does not appear to come in the google sheets? what might be the problem? please help as i am getting an error that "cannot read properties of undefined (reading 'parameter')
I came online to edit just to see you responded already. I just had enough patience and it finally worked. Thank you ❤ Working on sorting out the "Thank you for submitting...."
I think it depends on where you want to do the visualizing, do you want to view the data as a chart on the Google sheet or do you want to use an external software?
Hi, I don't encourage doing that. You can simply add your column identifiers when you create your sheet, before you deploy the appScript. If you add column identifiers via coding, each time a user fills and submits the form, the identifiers will be entered before the data. I don't suppose this is the behaviour you are looking for, is it?
You need to go through it step by step again and be sure you fully understand the processes. You can use Loom.com to make a recording of what you did and reply with the link so that I can see what you did and know how to go from there.
Ok. Do you have access to the source code of the website? Are you the developer? If you need me to help you directly set this up, please send me a Twitter or Instagram DM: @AnatuTech
Hi, please check your code again and be sure to save the code and refresh the web page before filling the form. If problem persists, check my second video and method on this: th-cam.com/video/XQHpKQmtRFE/w-d-xo.htmlsi=_nqtxssQR7LrKWvF
Which environment are you running this one? Is it a react app? Are you running the server locally or you are already hosting on the cloud? Please send me more information so we can know how to proceed.
It's free. But Google has paid services if you want more advanced features or run a medium or big company. But once you have a good account you'll have free access to Google sheet and other Google office products
Try this: If you are still developing on your local machine server, host up your site on any platform, say Netlify, Github pages etc, and then try the form submission again. Cors error usually happens due to differences in the security protocols of the local server vs the the Google server (http vs https). Another thing to try is to make make the action of your form to be the script url, like this: Please try these and get back to me here if or not it solves the issue.
@@hammadrao6508 Hi, this issue has been addressed by others. Kindly check the comments. If you still don't get a solution let me know here let's look into it.
@@carlosdelviento Other people have reported this. I think it's best you share your project repo link with me if it's not confidential. I'll go through it and see. Also add the App script code you used to your repo. Another alternative is to present your code and steps you've taken to ChatGPT. It might be able to assist you resolve your specific case
@@AntonVarvianskyi I never did :( I could get it working for just online calls but the combination of API and Nextjs calls wasn't working. We might use the Appscript NPM package or use the logic we build on Google Sheets to make a Restful API that can be easily consumed by both in the nearby future. It's a shame there is no easy fix for this as using Google Sheets this way is very easy, convenient and would be powerful.
@@abdulsami593 make sure your sheet name is the same in your script and below your sheet(bottom left of sheet not at the script page) Make sure the fields in the script i.e name, email etc match the fields in your google sheet
![React Tutorial For Beginners [ReactJS] | ReactJS Course | ReactJS For Beginners | Intellipaat](http://i.ytimg.com/vi/9vZ8ELqerPo/mqdefault.jpg)
Thx for make this video! I'm data scientist student and I have to deploy model as a web app and receive feedback from user, but I have 0% knowledge in web development this video is very helpful🥳
I'm glad you found it helpful. I'm working on other helpful videos. Do consider subscribing and sharing.
thank you, man! after a lot of tutorials, this one worked perfectly!
I am really glad that you found it helpful. More helpful tutorials coming. Consider subscribing😊
Nice content!!
Three things though;
- Is this safe to implement on a website where users subscribe to a service?
- Will it be possible to receive payment screenshots from users using this?
- Will it be possible to get notified when a new data is available in the sheet?
Thanks in anticipation. You just earned a new subscriber!
1. I cannot verify how safe this is for now as regards payment and subscriptions. You can place a paywall before users can visit the form. That may handle that for you.
2. I have not tried uploading of image but I will look into it.
3. Notification should be possible but you will have to go to Google sheet scripts market and get a script that will send you notifications whenever a new entry is made to the sheet. I am making a video on how to get form submissions to your email. That might help.
@@anatutech Thanks for your apt response Anatu, I will be looking forward to the follow-up videos. Thanks
I was just looking for this specific information. Thank you
Glad it was helpful!
Yesssssssssssssssss!!!! This is the video have been lookin for, thank you so much !! ❤❤❤ your newest subscriber btw .
1 question?
- will this work with images
Glad you found it helpful. About the images, I have not tried that yet. I will check.
@@anatutech Please any update on this?
@@linktoyinka Is this about collecting images via web form and transmitting to Google sheet?
@@linktoyinka Hi, I have tested this. It does not work for files. If your form has file input, the submission will still work but only name of the file will be sent to your google sheet. So you need to use an alternative if you are looking at using the web form for file upload.
Hi, I have tested this. It does not work for files. If your form has file input, the submission will still work but only name of the file will be sent to your google sheet. So you need to use an alternative if you are looking at using the web form for file upload.
not working: TypeError: NetworkError when attempting to fetch resource.
Check your connection and be sure you follow the steps. You can check the channel for a more recent video on this topic.
Great information. If I deploy my react app on netlify or other services will the Google sheet script work fine?
Yes, absolutely. My own portfolio website is on Netlify and it works fine
From postman the data is saved in the sheets but when on next app it doesn't store the params on sheet. Any reason for this?
amazing million like bro, when you are going to do a video of how to pull info from Google sheet?
Glad you liked it. Please give me two to 3 days, I will make that video. It is in my todo list. Do subscribe and turn on notification to get alerted when I upload
@@anatutech Cant wait to see it, with all love thanks for your effort
Congrats man! Very useful.
Glad it was helpful!
0:00 Introduction
2:28 Setting Up Your Google Sheet
3:09 Creating the Google Apps Script
8:01 Deploying the Google Apps Script as a Web App
10:15 Creating the React App
13:38 Connecting the React Form to Google Sheet
19:50 Testing the Setup
22:26 Handling Form Submission and Responses
26:04 Conclusion and Additional Features
@@riccardoluise8630 Thank you 😀
Thanks Anatu, this help me a lot
Glad I was able to help 🙂. Thank you for the feedback.
This helped me a lot! I'm trying to set up a second script that will run on some occasions, but it seems to always run the first script I created. Do you know why? And a second question - do you know if it's possible to append data to specific rows - e.g. finding the correct row by the value in x column and then adding data to y and z column. Any tips or resources are welcome 😇 Either way, thanks for a great video!
You are welcome Matilda. What do you mean by a second script that will run on some locations? If what you want is for another script to run when a completely different button is clicked, you'll have to attach the function to the separate button or action. Remember that the script only gets called on the click of the "Send" button in my case.
For your second question, I think this is covered already. all the names on my form, enter the cells specified for Name in my Google sheet. But if you are trying to achieve something else, send me a message on Twitter @AnatuTech let's see what we can do together. There's always a way out
Hey. Really nice guide. I was wondering if it is possible to set each sheet to be for a single form and has like for ex. 3 forms and for each one will be one sheet. Do you have any idea if it is accessible?
Hi, I believe you can do this. Let's try to name each sheet separately. Then create a different deployment for each sheet. The code written in the app script will be similar except that you will replace the "sheet name" accordingly. Then you will use the deployment endpoint link for each web form accordingly. This should work fine. If you do not get me let me know let's see if we could make a video on that.
Thanks Dude, I needed this video!
You are welcome. I'm glad you found it helpful
It would be nice to see how to edit and delete the data
Yes but for now we have to delete entries directly from the sheet. If I come up with something later I will share.
I am trying to achieve the same behaviour
only tutorial with regarding to this feature on youtube
thx very much brother
I'm glad you found it helpful. Thanks for the feedback
That was nice, it could be better if the form was clearing after submission
Kudos though
Ok. Yea you can achieve that too quite easily from the code. Check chat GPT on how to clear web form after submission.
Hey I'm using it with my Next.js application but I face a CORS error. Since it's in my localhost, I am using an extension to bypass but could you provide me with a solution to enable CORS on AppScript please?
I am jotting this down and it might take me days to check. If you can mail me the exact errors you are seeing it will help me troubleshoot better.
Did you manage to solve it?
can we add a document upload option with this?
There seems to be one error. I have tried 4 hours but can't seem to solve it.
SyntaxError: Unexpected token 'Y', "Your messa"... is not valid JSON
Please help
Invalid JSON? Are you converting the form data to JSON before sending it? I'm making another video that is even simpler than this one anyway
@@anatutech yes pls. do make a video about sending json data instead of FormData
because it is not JSON but Text so use res.text() instead of res.json()
hi there bro', i'm waiting for the video about send form data to more than one google sheet pages, have a nice one ☺
Can't believe I never replied this. So sorry. This second video should help: th-cam.com/video/XQHpKQmtRFE/w-d-xo.html
Thank you sir. Worked!
i followed all the steps, but after submitting the form, the data does not appear to come in the google sheets? what might be the problem? please help as i am getting an error that "cannot read properties of undefined (reading 'parameter')
were you able to solve it?
oh good thank you brother , this method can we create, update, delete it
It can only add, you can manually delete, edit, and add to the form anyway. Any new entry will jump to the next row
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
I've got the same problem! did you manage to solve it?
@@yeraldinnesanabria1562set mode to “no cors”
This is great! Can you add images to a google sheet from react?
Late reply. Sorry. Did you try this out?
No errors, crosschecked still no data on my Google sheet
Vanilla JavaScript website or React?
I came online to edit just to see you responded already. I just had enough patience and it finally worked. Thank you ❤
Working on sorting out the "Thank you for submitting...."
@@linktoyinka Glad it finally worked for you. Cheers. Do consider subscribing and sharing. All the best
How to get excel data in our react app?
Getting a cors error. Any Idea How to resolve it?
On local server or hosted?
lcoal server
@@anatutech
Thanks a lot, brother❤
i found out your video helpfull. but what if i want to fetch this data from sheet and visualize in the form of chart. any solution
?
I think it depends on where you want to do the visualizing, do you want to view the data as a chart on the Google sheet or do you want to use an external software?
In the above code how we can fetch the data to check the values ?
Late reply. Sorry. Kindly break down what you need further
can we add columns identifer name by coding? if yes so then explain how it can possable
Hi, I don't encourage doing that. You can simply add your column identifiers when you create your sheet, before you deploy the appScript. If you add column identifiers via coding, each time a user fills and submits the form, the identifiers will be entered before the data. I don't suppose this is the behaviour you are looking for, is it?
Hey! hope you are doing fine . My function is not working on local host. Does it work on Local?
So sorry for the late reply. Did your device have internet connection when you were running local host?
"Can we add the option to upload documents such as PDFs or images?"
@@ATPLDesign-j6s Unfortunately I've not found that to be possible
You can use cloudinary on frontend side to get the link of the uploaded document, then send that link to sheet from frontend
Hello, I get a CORS error on my Netlify site when trying to do this, what is causing that? and how do i solve it?
Hi, let me check
@@anatutech set the mode of the fetch to no cors
e.g
fetch("link here",{
method: "POST",
body: contactForm,
mode: "no-cors",
}
@@tamaniphiri Oh nice. I hope it helps others. Thanks for the update
hi , I followed the steps , and I don't see data in the google sheet , no errors . I am working in react js
Hi, try this second method: th-cam.com/video/XQHpKQmtRFE/w-d-xo.html
Bro,the script when you run it has problem,it doesn't work
You need to go through it step by step again and be sure you fully understand the processes. You can use Loom.com to make a recording of what you did and reply with the link so that I can see what you did and know how to go from there.
@@anatutech thank you so much for your reply,I'll make the video and share it to you soon
Hey i have already web wich i want to connet with google sheet can you help me pls
Ok. Do you have access to the source code of the website? Are you the developer? If you need me to help you directly set this up, please send me a Twitter or Instagram DM: @AnatuTech
Wow thank you
why only the name is visible in google sheet, the message and emails are not visible
Hi, please check your code again and be sure to save the code and refresh the web page before filling the form. If problem persists, check my second video and method on this:
th-cam.com/video/XQHpKQmtRFE/w-d-xo.htmlsi=_nqtxssQR7LrKWvF
THANK YOU! 💖
@@carolinaaa-d4h You are welcome 🤗🤗
Getting cors issue while sending request, how to resolve this
Which environment are you running this one? Is it a react app? Are you running the server locally or you are already hosting on the cloud? Please send me more information so we can know how to proceed.
Good job brother
Thank you. Do subscribe for more😊😊
i think google sheet is not free after trial limits of $3000 finished (90 days period), is it right pls anyone tell?
It's free. But Google has paid services if you want more advanced features or run a medium or big company. But once you have a good account you'll have free access to Google sheet and other Google office products
Thank you so much
You are welcome. Please don't forget to support by subscribing 🙏🏾
Not working
Are you using a framework or plain html, css and js?
I'm getting a cors error.
Try this: If you are still developing on your local machine server, host up your site on any platform, say Netlify, Github pages etc, and then try the form submission again. Cors error usually happens due to differences in the security protocols of the local server vs the the Google server (http vs https).
Another thing to try is to make make the action of your form to be the script url, like this:
Please try these and get back to me here if or not it solves the issue.
Dude i am still getting the same CORS error too and i have tried both steps you mentioned
@@skphotographyediting8983 There's a fix for this. If I don't reply in 6 hours, please remind me. Sorry I haven't provided it since. Been busy
Thanks for your response ☺️ i am glad that you read my message ( i am waiting for the solution)
@@skphotographyediting8983 Hi, do you get this issue even when you host your website on a server? I do not mean your local server
hi i am getting cross origin policy err
@@hammadrao6508 Hi, this issue has been addressed by others. Kindly check the comments. If you still don't get a solution let me know here let's look into it.
The same error with cors , and is agregated in the script but the error is repited!
@@carlosdelviento Other people have reported this. I think it's best you share your project repo link with me if it's not confidential. I'll go through it and see. Also add the App script code you used to your repo. Another alternative is to present your code and steps you've taken to ChatGPT. It might be able to assist you resolve your specific case
Has anyone fixed the CORS issue?
I have to do something about that today or tomorrow. I'll reply again with a link once done
How did you fix the CORS error?
@@AntonVarvianskyi I never did :( I could get it working for just online calls but the combination of API and Nextjs calls wasn't working.
We might use the Appscript NPM package or use the logic we build on Google Sheets to make a Restful API that can be easily consumed by both in the nearby future.
It's a shame there is no easy fix for this as using Google Sheets this way is very easy, convenient and would be powerful.
Getting cors issue. is there any solution for that? i am sending direct json instead of formData
So sorry for the late reply. Were you able to find a solution to this CORS error?
set the mode of the fetch to no cors
e.g
fetch("link here",{
method: "POST",
body: contactForm,
mode: "no-cors",
}
Thank you
Thank you!!
You're welcome!
how do i correct the cors errors?
set the mode of the fetch to no cors
e.g
fetch("link here",{
method: "POST",
body: contactForm,
mode: "no-cors",
}
@@tamaniphiri thank you
@@tamaniphiri bro by this by req does not work i don't know why but data is not appended in the google sheet
@@abdulsami593 make sure your sheet name is the same in your script and below your sheet(bottom left of sheet not at the script page)
Make sure the fields in the script i.e name, email etc match the fields in your google sheet
Thanks alot
You are welcome 🤗
Thanks! :)
Welcome 🤗
Merece o LIKE
best tut on google shit
Glad you liked it.
like
glots of google shit
lol man
макака
i followed the same steps i keep getting return header === 'timestamp' ? new Date() : e.parameter[header] e:undefined how can i solve it please?
Did you solve this?
thank you
I am getting cors error
set the mode of the fetch to no cors
e.g
fetch("link here",{
method: "POST",
body: contactForm,
mode: "no-cors",
}
Not Working
You may have to clarify what's not working. Maybe make a video of how you tried it and send me a link so I can check. Or DM on twitter @AnatuTech.