Save HTML Form Data to Google Sheets using JavaScript | Step by Step | With Source Code

hey guys welcome back and in this video tutorial we will learn how to uh submit a form and then the submitted form data will go in your google sheet account google sheet basically so basically the website looks like this one so here we have a form i have called it contact us you can call it anything so here we have a name field email field and message field so you can add a lot of field that you want so i i have add these three fields here right now so i will check here here's the excel sheet and here we have this column name email and message so this is the first column and i need this all fields data here first of all we have name and name here email here and then a message here so for that gonna try this demo here so i'm gonna write here my name and an email and then i'm gonna write here message so a message is hello everyone hello everyone how are you so i'll send this message if you click on this reset the form then this all data has been deleted from this form so understand this message here so when i click on this send button then we have a message here contact message sent successfully so i'm gonna check here here right now uh here we have a name and then email and then message so i'm gonna try it again so i'm gonna use here on the thing and then email we have here and then we have the message so i'm gonna write the message is please subscribe to my channel okay so i'm gonna send this message so once i click on that then we have this message basically so i'll check it here so here's that right now we have the message again so basically this is the system so i'm gonna try he today to create this one so let's start [Applause] so first of all i have a project for here right now and i'm gonna open it my visual studio code editor uh if you don't know how to install this record editor or you can install plugins and extensions the good plugins are for your increase your productivity so you can watch my previous video that i have said you to top seven vs code extensions so i can check out this uh i'm gonna i'm gonna give you the link in the description box and i will give you the link in i button so you can easily watch them so here right now i'm gonna create a file here let's call it index.php actually index.html and basically i am creating these with the javascript so i don't need to use your php so so i have uh i have put i have put a link in the video description that's from github and here's the my github profile so i'm gonna give you a link uh this link basically so i will open this link and then scroll down to here and here you will find some code so you need this code when you will set up this excel sheet to uh form submit and then access it will be go with your excel sheet so this is basically this the all things from macros code okay so yes that industry html is created success the basic syntax here so here's the shortcut of uh this visual studio code basically this is the image right so i'm link with the bootstrap cdn here as you have seen here i have used the bootstrap so i'm going to use booster so i'm going to close this one and i'm open here get bootstrap.com and click on get started because i'm down i'm not downloading that i'm not down i'm gonna use the cdn link basically so i'm gonna delete the unwanted things [Music] here so i'm not i'll change this title to uh html form to google sheet and we're going because i'm gonna need the bootstrap javascript here so copy this one and paste it here okay of that we will create a design here so for designing and using div and uh i will create a container div this is this container class defined in this bootstrap css all right so now in this container we will add one more class here py5 and for this class we have some paddings to top and bottom and inside that i'm going to create it the row and here i'm going to create a div or the class is called lc 5 and then call md 8 and and add one more class here mx auto and some other classes like i'm gonna write here shadow and border and bg white for background color white so and then inside that i'm gonna create a title h2 and the class is text center for center align this text and then we have the fw bond for font red ball so i'm gonna write here contact us and i have this title here and then we will add a form tag here so i'm gonna write here the action is actually i don't need to write action here i write here method is post here and then i will write here the name uh for this form basically if you uh want to uh integrate it into question then you need to write a name and basically based on this name we will send this data to google excel sheet okay so i'm going to remove this method post and i'll remove this name also because i'll do it later and i will explain it also later again so in this form i will create a div form group and in this div i'm gonna create a input tag first of all i'm gonna create a level here and then uh i'm gonna set the four is first of all we have the name and then i'm gonna write here class is form label and then i'm gonna write here name and i'm gonna create an input tag here and then type x is text and on the right here id is this name and then i'm gonna write some classes here from control and then record and then i'm gonna need a placeholder also here so for the placeholder yes enter your name and then we will add margin to bottom here and we will add this margin to here also [Music] and i'm gonna copy this all things for email and for the text area that's message so wait a minute i'm gonna change this and this i'm gonna select here the multicultural if you don't know how to select the multicultural investor record so i will tell you uh that's alt and pray alternate double click on this your word or select the word that you want so i'm gonna double click on that first and then press alt and double click on that another word and then under word okay so right here email and here i will write email address and then here and write email all right and text a type is email also not text and here we have the message field so for message file i'm going to write him message and i'm going to copy this one to here and here i will write him message and then i need here text area not input field so for that i'm going to write hit text area and i'm going to close this text here also here and i have this okay so i'm going to create here reset and submit button so for that right here a deal and inside this div right here button and the class is btn btn primary and then i'm gonna write it type our type is submit here and then we will set a value to this button that's submit or send contact message sent can contact message or send message okay send message and then i'm gonna create one more thing that's danger and then type is reset that's reset the form reset the form okay so i'm gonna check it here so for that i'm gonna open the live stream here right now so i'm gonna right click on that and open with live server so as you can see my live server is started but uh we need to add some spacings here because it's not looking good okay so i'm gonna add some spacing on this tape and for that i'm gonna write p four it means the padding four okay uh padding and then we will write here around for rounded candle okay here's that and then we will increase this message height so for the camera right here rows rows is five okay so not fifteen five and then here's that so i'm gonna give the name and an email and um message so i'm gonna need a margin here between these two buttons so i'm gonna add a merging here mr2 okay so me too not gamer because mr class in the bootstrap 4 but it is the booster 5 so for that it's a m-i-m-e okay okay so design part is completed so now i'm not done with that so for that i'll first of all inc include here the jack white is for the number right here jacqueline okay sorry here's a jaguar obsidian and because we uh google it was here jacqueline so i need that so i'm gonna need the main file version so i'm gonna copy this one and then paste here and i'm gonna delete the unwanted things from here okay so i'm gonna go with my uh github here so here's that i'll provide you this link in the video description so you will access this from my video description so here scroll down to this six and put your web app url so here you need to copy this one script tag copy this and i'm gonna try and paste it here after the just implementing this jquery okay basically you need to enter here the script url so put that i'm gonna go with google sheet here you're gonna write here google sheet and you will click on this first link and then i'm gonna click on this personal go to google sheet and here's that i'm gonna create a new google sheet here so click on this and then uh it's opening okay some given name here okay so i'm gonna write here name contact okay context and then i'm gonna need the three columns here let's get it so for three columns i will create three columns but notice here yeah you need to uh enter here name you have a id here this input field this input field and this text area also but here you will need one more attribute that's a name okay so because uh we need this name to add here the value uh here action sheet so for that i'm gonna add name attribute here and i'm gonna add first full of the name here name and then uh i'm gonna add the email here and then we have the last thing that's texted a message so message so here uh you you have entered a name here right now so you need to write this name here because if you enter here another name then it's not working it's probably wrong so i'm gonna write your name first because i have this name here so the name field name is name so i'm gonna copy this one and i'll paste it here and then you will find this email so i'm gonna copy this one and paste here okay so here and then we have this message so and copy this one and paste it here right now so i'm gonna style this all thing like bold and change this color to this one here okay so i will increase this width of the columns [Music] okay so now i need to create here i need to go here tools and then click on this script editor so i'm gonna click on that and after clicking we have a new window actually new with tab here and then here we have the code dot cs file so i'm gonna delete the all things from here and then [Music] i'm gonna go with my github account here right now so uh in the first code we have this so i'm gonna copy this one so for that click on this copy to click button so it's copied to my clipboard so i'm gonna paste it here right now so we have pasted here but notice here we have the sheet name you need to enter here the sheet name as you see here right now here's that so i'm going to add here right now this name to here otherwise it's not working so you can add the project name here rename this project so i'm going to rename that into conduct so and save this one so click on the save button here so i'm gonna save this project and after saving we have this run button so i'm gonna click on this run button and then we have some execution log here at the bottom okay so it's uh takes some seconds going to white here and after some second okay so here we have this review permission option so i'm gonna click on this permission review permission button and then here you need to select the google account so i'm going to click on this account because i need to use this account here okay then we will find this error type message so you need to click on advanced and then click on this board to contact and save uh basically this is not unsafe website because it's from google so it's some glitches so i'm not allow this one and here execution is completed as you said as you have seen and then i'm gonna close this one and clearly click on this deploy and then click new deployment so after clicking on that uh click on this settings and then click on this web app because i'm gonna create this for web so i'm going to enter here description and so i'm gonna enter description this is a sample contact form to google sheet for the video okay so i think here you can see we have this web app execute as so you need to you don't need to change this and you need to change this to anyone because the code has not logging into google account and not login into this account that this account so i'm going to click on this and one and then click deploy after clicking deploy it takes some times okay so here we will find a url here so i'm gonna copy this one because you need this script you are looking gonna done this and it's completely done so i'm gonna go with my phone and here as you can see it we have this crafty scripture some replace this to our script url that i have copied now so after that i want to add a name is from tag so i'm gonna add a name here and right here html okay so i'm gonna write here google sheet sheet some copy this one and you can write here anything and after copying replace this name here right now here this to your form name okay so after writing this and save this file and i'm gonna with my code here and then we we will inspect here because when it's error or success then we will show it in the console so i'm gonna go with here console and then i'm not right uh i'm gonna submit a form here right now so i'm gonna put a name here and then email and then first word [Music] okay so and then you will click on this send button so if you click on this reset the form then its form is told blank so i will check it later so i'll send this message here so after some seconds we have here in the console a message success a response type here as some area here let me go with this sheet and check it here so here as you can see i have this data here so i'm going to reset this form if i click on that then if this form is successfully reset so basically i need to show the success message here right now and not in the console tab so for that i'm gonna go here inside this form i'm gonna create a div and let's say i'm gonna add id here and let's say this id is uh form allows okay from allowed so i'm gonna copy this one id this id here and then we're going to replace this console.log response 2 and right here a jack y okay so here we have we'll select this and then all right here dot html dot html and then right here html so i'm going to add some class from bootstrap so that's class is allowed [Music] and log success and then i'm going to write a message here let's contact message success essentially [Music] okay so i'm going to close this [Music] okay so i'll copy this one here [Music] and paste it here uh second you will find this second line here for error so i'm gonna write here danger if sometimes it's generate errors oh basically it's not genetic error but some for some problems it's genetic error then we will show this knowledge here uh contact message is not sent not sent so he has that so we have this here right now so let's check it again so in this sheet we have this row so i'm not right here one more so here's that right here please subscribe to my [Music] okay so i'm gonna write i'm gonna click on the send message so once i have click on that and then after some second we have this presence because it needs some seconds one to two seconds to deliver this message to the google sheet so here's that we have this message here so thanks for watching i will give you this source code in the video description so thanks for watching please subscribe to my youtube channel and hope you enjoyed this video please like to this video

Channel: Pure Coding

Views: 9,009

Keywords: Pure Coding, html form data to google sheets, google sheets, html data to google sheets, html form data to google sheet, submit form data to google drive, submit data to google xls, google sheets api, custom form to google spreadsheet, how to use google drive as database, google sheet, html form data to google sheet using javascript, how to submit data to google excel, connect html form to google sheets, html form to google sheet, submit form data to google spreadsheet

Id: s9XZui6zRPw

Length: 22min 33sec (1353 seconds)

Published: Sun Jun 06 2021