Firebase Contact Form | Firebase Beginners Guide 🔥 (2020)

so hi guys this is raj sudhan and welcome to a new video uh and today we're gonna look at firebase so this is a beginner friendly firebase video i'm gonna show you how to create your app how to start with your first project how to connect your firebase uh to your app and overall this is a good start for you if you have no idea i have no clue on firebase okay so uh first of all i'm going to show you what we're going to do so if you see right here i have a simple email template and email form so we're going to connect this to firebase we're not going to implement any backend like php or even node.js and mongodb we're not going to do anything it's just you're going to just simply connect this to firebase okay so if you don't know firebase what what firebase is firebase is a cloud store uh database platform created by google so it's actually a hybrid uh hybrid version of sql and no sql if you've used uh sql databases in the past so it's actually uh like a middle spot okay which has collections which has docks uh you can refer the collections collections are like tables and stuff okay so don't what if you don't know these words like collection or something i'll show you um the the basic way to create your applications and start connecting your app so by the end of the video you'll know how to create your app uh fast as possible uh and correct obviously uh uh to able to connect your apps to firebase okay so by the end of the video you'll know how to push your data into firebase and all of those stuff all right so i'm going to get started right now i have the code in the description if you want to get started this is a dummy code which you just submit to the html page has nothing over here so before when i jump into firebase and do all the stuff i want to first of all do a couple of stuff to this form okay uh let me expand and put it right here so if you see right now when i click on submit it's actually submitting for the page which i just don't want what i want is that i want to be able to block the submit i don't want to submit to the page once i click on the submit button i want to get whatever information here and post it up to our database of firebase okay so that's all we're going to do all right so yeah let's get started so first of all i have the index.html in the description just a simple h1 ap tag and we have a form and we have an input we have a label and we have an input again an email and label for messages and we have a text area and we have a submit button okay i'm reading the css it's less than it's 90 atlantic let's say 100 lines of code okay i'll leave all github repos so you can copy that all right so the first thing that we want to do we want to listen for a submit and block the submit right so make sure you have connected your app.js here and let's first of all listen or submit okay so basically i'm just going to comment it out to make sure you can understand more so let's get document dot query selector i have given a class to the form called contact form okay and i want to add an event listener if anyone if i hear submit when the form actually submits i'm going to create a function called submit form okay so whenever i fire this function it's gonna fire whenever i click on submit it's gonna fire a function called submit form okay so let's uh we haven't created the form so let's go function let's say submit let's say submit form okay okay so now what i want to do the form is actually submitting i want to prevent that right so what i'm going to do i'm going to say e i'm going to process a even parameter and i want to say e dot prevent default all right so that's what i want and now let's actually check it out and see it's consoled one two three and see whether it's working all right so i'm gonna press f12 to open my console i'll expand this a bit let's click on here and go to the console and once i click here there we go it's console.logging123 so basically i'm working blocking the submit that i'm getting whatever data so that's the basic logic behind it okay all right so now what we're going to do um oh it's we're going to just grab all the all the dom elements okay which i mean i want to get all the values here so let's say hit get input values okay or so let's say let's name first of all let's get the name i want to say document query selector query oops okay selector and this has a class of name okay so let's say name and if you want to get the value inside that you have to just specify value or it's just gonna render out the whole html i'm gonna copy that paste it and here i'm gonna change this class to email and i'm gonna get this this one to email also to change this to message okay and then let's change this to message as well okay that's it that's what we want and let's lock this out and see whether this is working so let's say let's get the name email and the message okay so we can put whatever dummy values let's just put raj and kc raj at mail main.com whatever and the message is it doesn't matter right so now if i click on submit i'm going to get all these values if you see my name is raj and there we go the email i get is with the raj admin.com and we get this is test simple as that all right so it's working so the next thing we want to do we wanna we wanna basically create a function called contact info okay so that's gonna be a function we haven't created it so okay so it's contact info my bad so what we wanna do we wanna we wanna run a function once we click on the submit form yes we can have all the all the values we don't need a separate function to do this we can have it in this code itself but it makes everything simple and cleaner we're going to just simply create a function called save contact info okay and then that function will take a name it will take the email and it will take the message okay that's what it needs and that's what it takes okay so as far as the form we have done everything and now let's jump into the firebase and let's see what we can change and what we can add in order to connect this form all right so let's get started with the firebase sorry guys so let's go to firebase here right here okay so you have to have a google account to get started okay so make sure you have a google account and then you can come to flybase.google.com and you can write here i'm logged in so you can just click on go to console okay so it's gonna take a while and once it's loaded see i have a couple of projects made and made instagram clone and stuff like that uh what you have to do most of the time if you are doing it from scratch it should be empty and you have to just click on add project and you can name whatever project you want let's just call it test form okay and we can just click on continue and then this is the part that you want to take a look now if you enable google analytics you have to do two cell verification and you have to connect your credit card and google will give you 300 to use google analytics okay so if if you if you check this up and continue uh this wouldn't load because you have to do a couple of stuff in this case we don't need any google analytics just for the form so you can just uncheck that and click on create project so this will take a while um it will take uh 30 seconds or so it will just sort of create all the needed files the database and all the stuff so we can easily get started uh so let's wait until it finishes off all right so yeah let's wait and by the way i have all the code as i told in the description um the index or html the seldo sees is all of it okay so you can straight up get started all right the project is done and i'm gonna click on continue okay now it's gonna take you to a different page like this okay so it's gonna give you this like the dashboard we have you can see everything and now if you see in the front you have to specify what kind of app it's going to be so in this case we're going to create a web app using javascript and a webpack web back web app also means you are using node.js so basically javascript so we're going to just create with web but if you're connecting with android or ios development or even unity you have to click one of them okay so all the config files and all of that it really depends on how you're gonna do it uh which which which one which uh um app you're gonna start with okay so we're gonna just create click on web and it's going to take you and you have to register a app so let's say we can create the same thing it's a test form okay and you can check this if you want to host your firebase hosting but if you're done with that even later you can host it pretty simple just one one command and it would sort of host it all right again so that's it now you are able to grab all of your keys so your javascript the connecting key is there sorry the the link is there and then then you have the script which is your config to initialize your firebase app and stuff like that okay so you also can grab it from the uh from the settings but let's just grab it from here so first of all i'm gonna copy this script tag from here so let's copy this and go to the index.html and make sure you paste it above app.js okay the order really it matters okay and once you're done with that we have to copy this script whatever is inside the script tag okay let's copy this and let's go to the app.js and let's paste this above everything else okay so what this basically does is creating a uh firebase config file which has all of our key our domain project id the app id so we can have access to it um and then we're initializing an uh a five is app with calling or passing all the information on five bits config so that's it all right so that's the basic connection you need to get started and you can just click on go to console all right so now we are in console if you see we have one app here so now what you want to do guys we want we want to go to database and let me just quickly show you uh how you can get started so once you just click on database itself you're gonna get two stuff one is to like one is the cloud firestore and one is the real time database so basically i could explain what both these both are you know storage platform like database uh to store but if you're using firebase files so five firestore obviously you can uh uh firebase the clock the cloud firestore is actually for more powerful stuff for example if you're using uh creating an instagram clone where you have a lot of images we have a lot of videos and you know where data has to be put in a way like you know there's so much stuff into it so for example instagram clone is a very good idea where you can go with club fire store but when it when it's come when it comes to like a form a simple form uh actually you don't need to use files so you have you can use rails and database um okay so as you guys can see suppose we have some synchronization which is a cool feature of firebase so yeah that's the information so that's more powerful you can use it sort of so images and stuff like that this is just for text and uh you know links and just a simple real-time database for a form so that's what we need okay so once you click on this it's gonna ask you it's gonna do you wanna go in lock mode or test mode and if you click on test mode read and write will be true okay so if you wanna read and write this time you're only going to write we're not going to read anything we're going to just write it up to the database but we can just go with the locked version where no one will be given access even our app wouldn't be given access but i'll show you in a minute how to change it okay so don't worry so now if you see we are in this form so we didn't push anything some nothing like that so we had just have a test form which has nothing so the first thing that we have to do guys we have to reference a collection so collection is like tables where you worked with um databases like sql or something database is like a table uh sorry a collection is like a table so first of all let's say we have to reference okay reference contact info collections okay okay so collection is basically has a tool tables which consists multiple data information so we're going to first of all uh we want to we want to basically create that reference okay so let's say let uh let's and let's say contact let's say not contact info okay and that is actually equal so this is the this is how you create a database right so let contact info is equals to firebase dot database okay now database url urls firebase.database okay that's what you need to do okay and then it's created your database and now what you want to do you want to reference to a collection okay so you say ref and now you have a reference a collection so now we want to just put a collection called um let's say infos okay so basically we have nothing created but this will just get created on the fly on the fly meaning when i run this application um if something uh we have uh if this doesn't exist it's gonna basically as you're saying command we're gonna reference this info it's gonna create that collection or other tables and then handle and push all the information okay and i'll show you what i mean in a second all right so now we have connected we have referenced a database here and now what we want to do we want to simply run this function save contact info where we pass all the name email and the message okay so let's run this function here okay so let's say uh save info so let's say reinforce to firebase okay it's gonna save all the information to firebase so let's first of all say a function and let's say save info contact info and as we are passing an email message we can grab this here so you can see name email message so we have grabbed it and now what i want to do i want to create a new reference suite so that i can easily push this okay uh so uh if you see we have created something else i'm just gonna uh no i didn't have to copy that so let's first of all create a new reference so let's say let new contact info okay so we'll call it like that uh contact info so it's actually the new version of this contact info so let me contact info and now what we want to do we want to get this contact info okay so let this whatever is contact info and then what i want to do i want to just push this up okay uh basically what it what this means is that we're basically creating a new variable which which which is going to connect to this reference called the collection and then it's going to push push some data so what data is is that it's going to push so let's create we're gonna so let's i'll show you what they were gonna push so first of all let's say new messages new contact info which we are the variable we have created and then you want to say dot set okay so this is the part where we're gonna push it to the firebase database so if you just put a value you can put whatever you want okay if you want to put the text or whatever but in this case we're going to push an object right objects objects with name email message so now let's put that so let's uh we have an object where name is equal to the name and the email is equals to the email and the messages oops let's get messages message is oops it should be message and i have an error here okay and message is equals to the message and if you're wondering oh my god why name is equals to name email is equals email message is equal to message it just means that you can define this anything you can also call this a username okay you can call it if you want username here you can call it user email use a message but what matters is this one what you're mapping this to in the object so this name comes from here we grab all the input values we pass it to the function we create the function and we grab whatever is passed to this function we create a new collection and we push it to this one so we're gonna basically get this and push it to the new variable which we are setting an object an object which has consist all the name and email and the message simple as that so you can call username whatever i'm just gonna leave it name because it doesn't matter it would work fine all right so uh as far as the code goes that's it now let's take a look at it we have connected the phone all right so now let's try submitting okay so i'm going to open my console and once right after the bad if you see if you could put the console it's going to give you an air call firebase database is not a function so unless you get rid of this error your firebase wouldn't work meaning that your whole application wouldn't submit so the easiest way and the more most used way to get rid of the error when you're using javascript is that we you you should have copied now we are in the index.html you should have copied this link and pasted it above your script right so simply you want to get rid of this dash app okay i hope you can see this so let's i'm just going to highlight it so if you see we want to just get rid of this dash app okay so let's just get rid of that the dash and the app and now if you see there we go it looks like you're using development of firebase there we go so it's connected and it's working and it should work and now let's try submitting so let's say name let me give raj and the email let's go raj at test dot com and message let's say test uh what whatever test message and now once i click it submit now you can see now just don't worry about that we just control the logging it's not working and now if you see we get we are thrown up with a bunch of errors so the first one is saying permission is denied so basically if you see uh so permission is designed you cannot write anything to your firebase so basically we see uh we when we created the firebase itself we were asked to create in a test mode or a uh production mode production mode is actually everything uh you cannot push or write anything to the database so we created in the production mode but you can change your rules in that okay so you have to come you should have been in the data you want to come to the rules and if you see the rules read is set to false right is set to false okay so in this case we're not going to read anything and put it to our there put it to our app we're just gonna write it you're gonna you know the user should be able to write to this database right so it makes sense so basically you want to just set this to true simple as that and click on publish and now if you see publish rules are published and the right is equal to true so now let's come back refresh this and now let's try submitting and let's go to the firebase console uh you see we don't have anything right now okay just simple test form uh i'll collect our collection and now let's go name which is equal to raj my email is your raj at test email dot com okay and now let's say message test email okay and let's click on submit and if you go we don't we haven't seen any error in the console nothing is done so let's come back here and see that because we have created a new collection here called uh infos and if i expand this you can see a id here so this is the auto generated id by firebase so if you it really comes handy if you have unique ids when you want to remove stuff and stuff but we're not going to go into that but if you expand this now you can see we have the email we have the message and we have the name all right so this is really cool super easy you don't need any back end and this is such a powerful database uh to work with okay so you basically raja test email.com raj test email and name okay simple as that okay so oh yeah that's like the basics of it and now what we could do is that uh let's try submitting some more data so let's say name is equals to sanjay let's say email is sanjay at mail.com and the message is go through this is a test message and the cool feature is this is a real-time database guys so i'll show you the feature of it let me just minimize that and i'm going to put it i can still submit so i'll get this and i'll put it put this this side so you can see my firebase we have nothing here so i can still submit so now i'll try clicking on submit here so let me just expand this a bit okay so i'm just gonna click on submit and once i click on submit there we go we don't even need to refresh that automatically it's gonna it's gonna work with this form and it's gonna grab all the data message and the name that's really a cool feature of firebase so real-time database really gives you access for a lot of stuff and really uh makes the process really easier so yeah um all right so it's working and that's fine the last thing that we want to do we basically want to get rid of uh uh get rid of all the information once we click on submit all right so let's do that at last right now all right so let's get this form here so let's say document dot query selector and let's say dot contact form and once anyone submits that we want to just simply oops it's we wanna we wanna simply we wanna simply get all the information put it push it to our firebase database so do i have that okay so push it to the firebase database and once that's done we are simply going to get rid of that so let's do this try something again so let me get my fibers console so let's this time say john let's say john mayo.com let's message john test test okay doesn't matter and now once you click on submit it's going to get rid of any any values and said that so it's basically going to reset that and then if you want to click on here you can see we have joined mail.com john test test and name okay that's super easy guys and we want to add this to your address to your website and stuff this is really really handy uh and if you don't have no clue about sql and stuff um it's really really cool and you can build super powerful applications like instagram clone where instagram clones spotify loans facebook clone with this five with five base and you can use react and five days to do it but if you want to see some kind of tutorial me working with react firebase and creating a whole hab like a to-do list maybe uh definitely comment down below i'll be sure to answer on to those and maybe we'll make a video on that okay so check out some other content that i have watch this video and share this video with your friends and comment what you have learned with the video and if you want to see more videos what kind of videos you want let me know in the comments okay thank you so much for watching and i'll see you later

Channel: Rajsuthan Official

Views: 14,834

Keywords: firebase, firebase beginners guide, firebase for beginners, firebase front to back, what is firebase, how to create a app in firebase, how to push data to firebase, how to add data to firebase, firebase contact form, how to add contact form in firebase, firebase authentication, firebase basics, firebase 2020, firebase tutorial, firebase tutorial 2020, firebase database, firebase realtime database, firebase functions, firebase form submissions, firebase form builder

Id: zx2YoBMfflM

Length: 24min 22sec (1462 seconds)

Published: Tue Aug 04 2020