How to "post" html form data to google sheet. (using API )

hello everyone welcome to my channel so in today's video we will going to see how you can post html form data to google sheets by using api it is the easiest way to get user data saved at back end without much coding we will be using a little bit of javascript in this method but don't get varied if you aren't familiar with javascript you can just copy paste the code which is given in the description box below and follow the steps accordingly before that if you are new to this channel make sure you hit that like and subscribe button so let's get in it without much talking so first of all we have to create a html signup form if you already have a form created you can just use it or else you can get a form ready made just follow the steps go to your computer browser and search for html code for sign up form [Music] and then click on this link [Music] in the form section click on the sign up form [Music] copy the html code given below [Music] now open your text editor and create a dot html file [Music] [Music] then load your main html document give your document a name if want to or else keep it as it is now we have to link our css file and main document by using a link tag so let's start with creating a css file by getting it as dot css extension [Music] foreign [Music] hey [Music] after that paste your html code in body tag [Music] and then paste the css code in our css file which we have created now [Music] then run the code now here you user can add their details but after hitting the submit button the data has to be collected somewhere now the main part comes how to send this data to google sheets which is our back end for that we have to use a method called post and little bit of javascript as i said javascript will be available in the description box below so let's start with creating a new google sheet for our form go to your browser and open a new tab then search for google sheets [Music] and create a new google sheet [Music] [Music] so now in the first column we want user's email address [Music] so write email in second column we want user's password so write password and in the third column we want repeated password so write repeated password these names are only for admin uses but it has to be the same to the one which we have given in our main html document now we have to make some changes in our html code [Music] so for example in input tag the name is equal to email but we have to change it as name equal to data bracket email so that user's email will be send it as data to our back end repeat the same steps for rest of the input tags after that we have to give our api link in form tag so let's start with creating an api open a new tab in browser and search for sheet.api [Music] then click on create free api button to create a new api after that it will ask you to choose a google account select the same google account from which you have created the google sheet after that click on create new button at the top right corner here we have to paste the google sheet url which we have created previously copy the link and paste it here [Music] then click on create api [Music] copy the second link and paste it in form tag [Music] where action equal to your api link [Music] now we have to declare a method in our case we are using post methods so write method equal to post we also have to mention id of our api so write id equal to sheet db dash form till now we have successfully created a form and api now the last part is javascript so let's start with javascript under form tag open a script tag then under script tag paste the javascript code which is given in the description box below now over here you can get your next page link if you wanted to redirect the user to the next page after hitting the submit button i linked a page here this page contains a message that you have signed up successfully now you're all set go to your form enter your details and then click on the sign up button after that user data will be posted to the google sheet automatically check whether the data is properly submitted or not so in the next video i will show you how you can host this form live on the internet for free of cost if you are still watching the video don't forget to hit that like and subscribe button if you get any errors while doing it comment below thanks for watching

Channel: Brookli

Views: 340

Keywords: #how to, #post, #html data, #back end

Id: pUktm5BIbL8

Length: 8min 18sec (498 seconds)

Published: Sun Nov 14 2021