How to Send Form Data To Google Sheet In React Website | Google Sheet As Your Rest API in React App

Hey guys you're welcome to the YouTube channel to my YouTube channel we talk about tech here and coding of course so in this video I just simply want to show you how you can do something that is very very nice very very useful in react you can also apply what I'm going to show you here on your normal JavaScript vanilla JavaScript website so I have a form here this is my website from my personal portfolio website I'll provide a link below for that there is a form here you can feel foreign [Music] I want to receive the message in a Google sheet you can see this Google sheet here right here I have a couple of messages already what I'm going to do is let me just select everything and delete them all right so we have a clean sheet now all right so let's come over back to our website so when I click on this send button now come back to the Google sheet now you can see the the message is here the name your name the email you use in sending this the phone number you entered subjects of the of your contacting me and of course the message is sent now let's go ahead and try this again foreign come back to this and you can see I've received that email instantaneously right so how do you achieve this so I'm using um Google Sheets as my API right like a database um API for a storage API cloud storage API for my form all right so that's reason for the for this video so I'm just going to show you how to do this step by step I'm going to start up fresh so that you don't need to worry about anything but but I'm not going to be doing the coding directly on my system please if you don't know react you need to go and check how to create a react app it's simple just go to uh create reacts up right so uh yeah come to this site create your react app and follow the steps given here it's it's pretty straightforward now as I said earlier this is going to work it's gonna work even on a JavaScript vanilla JavaScript site so this can help give you Direction so first thing I want to do is setting up of my Google sheet all right so I'm going to do a new Google sheet so I'll go to I'll just Google sheets do this as you can see docs sheets.google.com something so if you're already logged in with your Gmail account on your browser you can just go to go to Sheets all right if you are not it will require you to log in of course it's a Google stuff so it will require you to log in so um you can see some of my sheets here so I'm going to click create a blank sheet all right so I'm going to name it bomb data next thing is that I have to go over to the extensions here there you see this defaults one here is called app apps script so I'm just gonna click on that it's up it has opened a new folder so don't worry it's not going to overwrite what you have there as you can see there's an empty function here waiting for you to do something now let's just come back here now uh remember I I want to receive on my form all right for example on the form of my website here I have name I have uh email and then I have phone number space subject and this but to make this faster I'm just going to do this for name email and I'm gonna do message let's come over to our script so you can name this whatever you want probably you can save form data Scripts click on rename that's beautiful project has been renamed all right now I'm just going to copy out a code to save time for both of us I'm just gonna copy that out so I'll be providing a link to the repository so you can also just copy it from the repo on GitHub so I'm gonna go to my own existing stuff here so you can see I already have a code here so I'm just going to copy this and then I'll come to my apps script so each time there is we upgrade something on the on our on the front end of our website this script runs and Fields takes the data that is sent from that form on our front end and fills it up in our Google sheet so I'm just gonna paste this here now you can see I just read this cons sheet we create a variable um called sheets now there is a method already existing you know spreadsheets.app spreadsheet app dot open by URL now you see this URL here is going to be the URL of my sheets so if you come to your Google sheet here just click on the address bar at the top here all right so just Ctrl C or command C copy everything come back here so you just replace here inside here you just paste this here then the next thing is this sheet so you can see if you have changed the sheets name replace sheet1 with your sheet name so normally the sheets name you're operating with Will normally be sheet1 because that is what you find here right sheet one let me say I rename add your name double click on it and say H1 for instance and click enter all right so mine this one will no longer work so what I need to do here is to page one right so once I'm done with that there is a function here called do posts it's an event let's data equals to E power dot parameter sheets dot up row this this if you check here we have data.name data dot email data.phone data subject data Dot message these are the fields of my previous if you see here we have name email phone subject message so but what I need here is based on this new form I have I have just name email and message remember I start each one with a capital letter so if you start with a small letter then here you have to start with a small letter so I'm just going to leave this name I'm going to leave this email and then I'm gonna remove these two and I'll be left to its message right I think that's what I have here yeah beautiful so once I'm done with that I'm saying return this so what I want is that if if the user clicks on this button and there should be a kind of feedback sent back to the user okay so which is this success it can be anything and say your message was successfully sends to the Google oh bitter base so what you need to do is to click on new deployments right new deployment you can see this configuration button I'm going to click on it there are different options here click on web app right now when you click on web app you have a space to enter description so I'm just going to say so it doesn't matter anything you want you can just put it there and then execute as me you can see this this is a is the email that I have my own email so um just leave it as it is who has access all right who has access to to this um script so I'm just gonna say anyone all right not anyone with a Google account because in that case it will require the person to have uh been logged in before they can send me a message so I'm just going to click on anyone so once I've said this this way I'm gonna click on deploy or done so just let this do its thing it's going to take a few moments all right so once it's done processing it's going to ask you to authorize access click on that it's going to ask you if you are not logged in you have to log in you see this it says Google hasn't verified this app so back to safety or Advanced when I click on Advanced I'll click go to form data unsafe all right click on that then I'm gonna allow the permission so allow this to do its thing now once you're done there is you have two things here this is a version one and it's giving you the day and the date of the deployment now you have deployment ID ignore that and you have a web app URL so this is going to be where you are going to be sending your data to it's just like your API endpoint all right so I'm just going to copy this and I'll click on done okay so once I'm done remember to copy that um or just paste it somewhere I'm actually done with this part of this work so next thing is for me to go over and create my form all right so to do this I'm not going to start doing a new react app on my system and all I'm going to use an online platform it's called code sandbox.io right you can actually create a react app online with code sandbox so I'm just going to do code sandbox.io remove this and click enter taking me to dashboard introducing an effect no this is not what I'm here for so I'm just going to click on create and you can see once you create some I'll click on create today's the options here you can create different things so what I want is just a plain react app I'm just going to create a sorry this is this is my ticket right now you can see on our stuff here so I'm just going to say I'm gonna remove this H1 I'll say oh that's new phone so it is a live stuff you can see as you're doing it if you're new to code sandbox so you can see as you're doing stuff we are getting feedback immediately I'm gonna remove this this and I'm gonna create a form here I have email and here I have message and the same thing goes with my the type of impurities it's email and then this is also text so for the name this is email and this is message so this is how our script is gonna know that whatever input is made here is going to go to the name field what if uh impute is made to email is going to go to the email field and whatever input is made to the message is going to go to the message field plus name equal to from come to index.css save form I'm gonna style this for okay so we have a simple a simple form here and then one thing is missing and that's a button still inside the phone say Maybe inputes imputes can say bottom all right you can say button I can say inputes so I'm just going to make it impute and I'll say type go to submit so you can see there is a button for submission and I'll give it a last name button so that I can style it a little bit [Music] that's fine that's fine so we have a button here right so you can see each time you click it there is a very fresh happening here all right so the next thing we need to do is to come over to our function here remember this could be any function we might have created this any other place and you're importing it to your app.js so I'm just doing it because this is just a single page app that we're trying to create here I'll come in here just before the return I'm going to create a function now this function is going to be what runs each time a person submits the the form so when you click on this button the submit button here all right so what happens then so I'm just going to say you can use const or you can just say follow me as a function say submits submits and then we're going to give it a parameter e some people write that as events so I'm just going to leave it like that so what we do is we look at our form this you see we have a class name here one for them you can put an ID it doesn't matter whichever you want to use so what I'm gonna do is I'll create a variable say const um one elements all right equal to documents [Music] query selector say one right so what we are doing is we're grabbing this form based on its class name all right so you see that each time we click on this right there is a refresh but normally we might not want this to happen in most cases we just don't want that that refresh action to happen each time all right if you want that that's fine but if you don't want that you say e which is this our parameter here but prevents prevent um default defaults I think yeah but now from here we're gonna do on submits all right when a user submits the form what happens we use a callback function say b or events don't want it to run the function submits all right with whatever with the parameter B all right so this is what we want to happen so each time you now click on submit right so some people might add event listener to this button right so that it can call that function but with a form it does not really necessary there is an unsubmit um on submits function in forms so that when you click on their submit button something can run so that's why we do this so whichever way works for you it's fine so when we click on this now you notice that there is no longer that refresh happening so but for us to know that we've submitted let me see let's come over to so I'm just gonna add this say unsold.log um submitted okay so that you can know so when you come here to our console of course if you're using your own system right if you're doing this locally you can of course when you open the site on a browser sorry you can do the inspect elements okay to check that out so those are basic things all right all right so so when I click this you can see we are having submitted in our console all right so what I mean by that is if you come to my own site here when you do this can inspect okay then you can come over to console all right so but that's I'm using this online platform so this also works so you can see submit is working each time there are three counts now because I've clicked this three times okay so I'm gonna close this I'm going to minimize this so we need to use the fetch the fetch API to connect our form to our Google Sheets we are first gonna grab the form data so we say const form data equal to new space one data okay one data remember there could be different forms on our site so the form that I want to grab is this one the data from this form so I'm just gonna do that copy that and then I'll paste it here so we are creating a new form data using the form that is here but we're gonna say fetch and uh we are going to create a parameter which is this parameter now the first parameter for this fetch is going to be our API where we want to posts all right we want to post remember API calls have different uh kind of methods we have the post method we have the get method we have other methods there all right so this is not an API video so I'm still going to come here remember this how this is our form and remember what we copied previously okay that's in my clipboard would be this this is the the script we copied from when we deployed the form script that web app code copied you're gonna paste it here so this is mine from my clipboard I'm going to paste it here fruits comma I will run this function method posts with a comma and then body the body of what we are posting to that link to that our API our Google sheet is going to be the form data remember this form data we created here so it's gonna be the fund data all right so that is it so basically this is all we need to do to to be able to post that you can do some other things but we'll do that a little bit after now so let's just see if this works remember right now we have our empty sheet right nothing there so let me come over here and now click on this entire name and then our Summit got this message can't access from Data before initialization that's because this is actually not supposed to be small letter here this is the things that can happen this is after letter right not small letter that means I had a mistake there so I've corrected that so I'm going to click on submit again now you see we don't have an arrow now come over to your sheet now voila and here we have it here we have it we have our sheets and it has our message here so it has the name email and the message sent so we can try this over and again you can say uh Lauren Epson um and now to tag and submit so once we do that come over here you can see we have this so we have been able to wire up our form to our Google sheet so a round of applause for you for staying this long but there is something else we need to do because there could be a message coming back from our API this is a standard thing we do in API calls we could have a response or if we have a an error remember you can use async await for this so I'm just using the standard method of fetch using Fetch and then using then for this so I'm just gonna say response uh say erase that's Json oops yes and now do this and then Ben um where the data we get from the response right remember this can be anything mustn't be written as data so whatever we get from there we use it for console log it say console .log data yeah and then if we have any error we want to catch that so I'm just going to say uh dot hatch you have any Arrow around so error say I want to catch the arrow and instead of displaying it on the screen or disturbing the user we want to say console DOT log the Arrow right so that is basically what we need to do in this form now there are other things you might want to do you can of course add probably come here and do probably add a a function that can call it model so each time this is submitted there is a model or you can probably make it so that there will be a hidden message here so that when a user sends a message then there'll be a confirmation message anytime they click on this button there'll be a confirmation message here just to give the user a feedback so I don't know maybe we can do that say import import um say new state okay uh should we do that should we do that I'll do this in a different video all right I'll do this in a different video so that yeah please check the video in the description panel I think there should be a video there right now if you're watching on how to show or hide an item using react to use it so I don't want this video to stay more than interested so far so right now we've been able to achieve this okay so I'll provide a link to this code sandbox all right so you can go through it remember to replace go through this step by step as what we have done and then you'll be able to achieve the same effects here so it doesn't matter how many times this gets submitted submit this 20 times come back here we have multiple submissions unless of course you want to add another thing here probably like a a a a captcha or something that can prevent too much multiple resubmissions and a single goal here so that's something else you might want to do so I've maybe Bots double clicking or multiple clicking this or something of that nature so this is it guys how you can achieve this we've been able to successfully link up our Google sheet our Google Sheets to our phone our reacts from here so you can do this also on a vanilla a website built with a vanilla JavaScript it mustn't be a reacts website so just let me know if you've been able to achieve this if you have any problems while doing it in the comment section if you did this but probably you have it a different methodology of doing this to make it simpler or faster please let me know and I've also provide a video so that you see how we can add a kind of stuff here so a message below here and hide it initially so that when this button is clicked we're going to call the function to make that available all right so that's basic stuff you can do you can research on how to do it but I've provided a video for that and please hit on that subscribe button it matters a lot to me and to YouTube that you subscribe to the channel and you also like the video and drop a comment so that you can also be helpful to people like you who might be requiring this kind of stock and of course in future in the future you're going to do how you can pull the information you uploaded on your Google Sheets which you use as your API you're going to be able to pull that information in Json format like you will a regular API like a regular API called pull the data from there and of course use it in your application that's cool that's really cool so basically we are gonna what we are doing is we are using Google Sheets as a back end of some sort for our website and that's that's pretty cool better than is faster and easier than using a traditional method of creating backend and API stuff and this is even easier because you can easily sort sort your stuff out you can easily sort the data you have you have here out and you know do whatever other operations you want to do with this Google Sheets um messages you receive on your Google sheet thank you for watching and see you on the next one another to take care

Channel: Anatu Tech

Views: 35,759

Keywords:

Id: ZA6j2PhXSUg

Length: 28min 20sec (1700 seconds)

Published: Sun Nov 20 2022