Connecting Firebase to a Contact Form

[Music] hey what's going on guys so a few days ago or I don't know maybe was yesterday I created a video called creating a mobile first responsive contact form featuring grid CSS and we created the UI we created a pretty nice responsive form and I told you that we'd be implementing a back end in another video so most of the feedback that I got from you guys were was to use firebase which is a cloud a cloud service for for a database for authentication it's very very powerful it's by Google and I think it's a good solution for our forms so what we're going to do is we're going to hook up that project to firebase using nothing but vanilla JavaScript we're not going to use any frameworks we're not going to use jQuery I want to do everything and just strictly JavaScript and the firebase library of course so first thing you'll need to do is actually create a firebase account it's absolutely free just go to firebase google.com once you do that you can go to your console and you'll have a list of your projects ok so obviously if you just signed up you won't have any you can see I have my client panel projects this is part of the angular 4 front to back series but we're going to go ahead and create a new project here and I'm just going to call this contact form alright so we'll go ahead and create that like I said firebase is very powerful it's not just a database it also has authentication it has file storage you can upload files you can see all the different options over here you have testing you have all kinds of stuff notifications now that we have this project loaded if we click on add firebase to your web app it'll give us all the initialization data and give us the script to include all right but we're not going to need this just yet so let's go ahead and close this and then what I have here is the project that we left off with so if I open this up real quick this is what we built okay so it's like I said it's a mobile first responsive form you know looks like this on the suave Isis and then as it grows it changes a little bit so we're going to take this and we're going to link firebase to it all right now the link is in the description it's traversing media.com slash download slash responsive form that's going to be the default that's what we left off with all right so that's what I have here now what I'm going to do is I'm going to just copy those two files the HTML the CSS and I'm going to create a new folder here and I'm going to call this firebase contact all right and we're just going to paste those files in alright and then we're just going to open this up in Visual Studio code so to my projects firebase contact okay now I'm also using I'm using a plug-in called dev server so if you want that just go down to your extension icon here and just search for I'm sorry live server just for its search for live server and install that if you want it alright and we're going to go ahead and just right click and say open with live server and that should open up on port 5500 or not why isn't that open and usually it alright so here's here's the form we built let's let's actually put it into mobile view you can make this bigger as well alright so what I'm going to do is a we implemented animate CSS so that when it reloads this table you know it slides in I'm going to remove that just because every time it reloads I don't want it to do that so I'm just going to get rid of these two classes animated and bouncing left off the wrapper all right that way that doesn't happen every time this reloads so let's let's think about what we're going to do here so we have to we have to catch our submit ok now we're not actually submitting to a page like we would with like PHP or something like that we are going to be using JavaScript so we're going to need an event listener that listens for our submission or going to have to add some IDs to our field so that we can grab the the data that's put into the fields of the values of those inputs and then we need to connect the firebase and we need to push on to a collection in firebase okay that's the gist of what we're doing and for validation we're just going to use standard html5 validation will just add required to my guess to the name and the email is really all that I want to be required all right so let's start off here by adding a couple IDs so we're going to we're going to need an ID on our form so let's give that the ID of just contact form and then each input is also going to need an ID so this will be name this will be look this will be company this will be email phone and message all right so now we have our IDs we also want to add a type to this button right here just to make sure that it's a submit button so we're going to say type equals submit okay now I'm not going to implement the the validation just yet in fact for now I'm going to change the email address to a text just because I don't want errors flying up I just want to be able to submit you know just junk at first just to test things out so what I'll do just so I don't forget is just put it to do right here and we'll say validation all right so let's go ahead and save that now that we have our IDs let's go ahead and create a javascript file to work with so we're going to create a new file I'm going to call it main dot J s and then we want to link it so we're going we're going to go down right above the ending body tag and put in a script and a source to main dot J s all right now we're going to need to link our firebase but I'm going to just hold off on that I just want to take care of being able to submit the form and get the value okay then we'll get to firebase so let's go to our main J s and in here we're going to want to create an event listener okay so we'll say listen for forum submit okay now to do that we're going to need to grab the forum remember we gave it an ID of contact form so we'll say document dot get element by D and add an ID of contact form right and then we want to add an event listener so we're going to say add event listener we want to listen for a submit event and then we want a function okay and I'm going to call it the function submit will just say submit form alright so now we're going to have to create that function let me just just toggle wordwrap here I'll make this a little bigger alright so now we need to do is create a function called submit form all right and that's going to take in an event and what we want to do is we want to prevent the default behavior because when we submit it's going to automatically try to submit to that HTML page so we're just going to take that event parameter we're going to call prevent default okay and then let's just do a console log and we'll just say one two three all right so let's go over here and let's hit f12 and let's just submit and you can see we get one two three all right so we know the form is submitting now we want to get all of the input values so that we can use them and we can ultimately send them to firebase so to do that we're going to use document dot get element by D but I'm going to create just a function to make it a little shorter so that we don't have to keep typing out document dot get element ID so we're going to put a comment here we'll say function two to get form values and we'll say function so function get input valve we'll call it all right and then this is going to take in an ID all right and then all we're going to do here is return document dot get element by D and then whatever that ID is that's passed in okay that actually you know what we want to add on dot value because that's how you can get the form the input value if we just do get element by ID it will give us the actual you know the whole input tag and everything we just want the value that's put in so now let's go up here and let's say we want to get all the values so get values and we should now be able to create variables we'll say name equals and then we'll use that get input valve function and in here we'll pass in name okay because that input we're looking for has an ID of name so basically we want to do this with all of our fields so we'll copy that we have name company email phone and message all right we just need to change this stuff up so it's a company email phone and message we also need to change these company own and message all right so let's make sure that we can actually that this actually works so let's just do a console log and we'll go ahead and we'll get the name save that and if we go over here and we type in Brad for the name and we submit you can see down here we're getting Brad so we're now able to get all of our for all of our input values all right now this is where we want to start to implement firebase now that we get we can get the actual values we need to send them to firebase so let's open up let's go back to - I guess I closed it I want to go back to my firebase and we'll go to our project which is contact form and we're going to want to get all the initialization data so let's click here and this script tag I'm going to grab just that and we're going to go and we're going to put that in our index.html right above the main j/s okay make sure it's above the main jets the order really matters it's not going to work if you put it below okay so now we did that we want to just grab this right here okay everything that's in the script tags so the initialize firebase yours you're going to have different stuff here okay all your all your API keys and everything is all going to be different and we're going to put this right at the top of this file okay a very top so this will initialize firebase for us now what we need to do is we need to reference a collection so in a no SQL database like firebase we have collections which are kind of like tables if you're familiar with you know relational databases and we're going to have a collection called messages we don't actually have to go and create it we connect with that it'll be created on the fly so what we're going to do is we're going to let's say reference the messages collection so we're going to create a variable here called messages ref and we're going to set that to firebase dot database okay and this is how you initialize any firebase database but if you want a specific reference or a specific collection you just do dot ref and then pass in whatever the collection so messages all right so now that we have that what we're going to do is we're going to create a function so let's go to the very bottom we're going to create a function to save the message to firebase to messages so let's say function we'll call it save message and then it's going to take in all the different fields so it's going to take a name company email phone and message alright and then to do this what we want to do is create a variable here called new message rep okay we're going to set that to messages ref okay now this message is ref is coming from here so what we just created the reference to our collection and we're just going to push on to it so we're going to say dot push okay so I'm going to say dot push will end that with a semicolon and then we want to take our new messages ref or new message ref and we just want to call dot set okay and then inside here we can put in an object with all of our data so let's say name we want that to go to name and we're talking about these values here which are coming from the input form we want company we want email phone and message all right so what we're doing is just sending an object of data to our messages collection or our messages reference in firebase so now that we created that function we actually want to call it when our form gets submitted okay let me just put a comment here we'll say submit form okay so after we get all of our data here we want to call save message and we want to pass in all that data so company email phone and message so just put a comment here say save message all right and then what do we want to do after that so we're probably going to want some way to tell the user that it's been sent that their message has been stored or sent but let's go ahead and just test this out first before we get to that so let's save this and let's go back to our project I'm going to keep this firebase open as well this browser but let's go to our project here and let's go ahead and just try to send something so I'm just going to put just a bunch of crap in here it doesn't matter and then we'll click Submit now we're going to get an error if we look at what this says it says permission denied okay now by default with firebase you can't you can't enter data into a database unless you're authenticated by default so we're not using any authentication to send this contact form we want anybody to be able to do it so we need to just do one simple step in our firebase console so we need to go to database right and we need to go to rules and you see how we have this rules object we have read and write set to OFF is not equal to null we just want to change both of these to true okay are at least at least the right because that's really all we're doing if you wanted to create a script or you know an application where they could actually read the messages in fact maybe we'll do that in another video you would need to be authenticated or you need to set read to true but let's just set right to true okay and then we're going to go ahead and publish all right and then let's go back over here and let's just reload this or refresh this and we'll go ahead and just put some crap in here and submit and notice we didn't get that error nothing else happened because we didn't create we didn't write any code for anything else to happen but now let's go over to database and you'll see we have a messages collection inside there we have an ID this is an auto-generated prints ID that firebase creates and there's all of our info alright so we've we've successfully made a submission to firebase so from here you can manage your your messages we can delete that if we want and what's really cool is that you can you you can just have this open and let's actually submit a real name we'll just we'll put in my info usually this auto so this auto fills oh well I'll just type in so we'll just say traversing media and email just a test at test comm phone number I'll just put that message helloworld all right so let's submit and you'll see right here it automatically shows this is in real time you don't even have to refresh so you can see that we have all of our data so it's as easy as that to hook up firebase to a contact form now let's finish it up by adding we want to add an alert or a message showing the user that that their data was sent so let's go ahead and do that so after the save message we'll continue on here and let's say show alert now what I'm going to do is go to our index.html and we're going to go let's see let's go right below the h3 the email us h3 and let's see we're going to add a div with the class of alert all right and then in here we're going to say your message has been sent save that and now it's going to always display and I'm going to fix that in a minute but let's style it up a little bit so we'll open up our style dot CSS let's go down to down to the bottom right above the media query and we're going to add a class for alerts didn't mean to do that and let's do a text-align:center and let's add some padding we'll say 10 pixels we're going to add a background of a green hexadecimal so that's going to be 7 9 C so 7 9 c8 7 9 and look we're also going to add color white and let's add margin bottom 10 pixels and let's actually first of all let's check it out okay so it looks like that now I don't want it to be like should I guess that's okay yeah that's fine I wasn't going to Center it on large devices but that looks fine now we wanted to set this display to none because obviously we don't want this to be displayed when the user comes to the forum we're going to do that through JavaScript so let's go back to our main J s and where we have our show alert what we want to do is we want to grab it so we're going to say document dot we're going to use the query selector function and what that's going to do is it's going to it works just like jQuery basically we can select by class or element we're going to say we want by the class of alert and then what we want to do is we want to say dot style dot display because that's the display property we want to edit and we want to set it to block okay because it's initially set to to none as we just did in the CSS now this will do just fine but if you want it to go away then we need to add some more code here so let's say hide alert after three seconds okay so what we want to do for that is use set timeout saying so we'll say set timeout and that's going to take in a function and then here is what we want to happen and then this parameter down here we're going to put a comma I'm going to say 3000 and that's going to be 3,000 milliseconds which is three seconds so what we want to happen in three seconds is we want to let's grab this get this in here and we want to set it back to none we want to the display property back to none so it'll go away all right so let's save and then the last thing I want to do is I want to go back to our HTML and let's let's take care of our validation so we'll get rid of that and what we'll do is to the name input we're just going to say required to the email we're going to say required and we're also going to set the type back to email so now if we go over and we let's make sure this is refreshed and we'll enter some stuff so let's say John Doe company will say 1 2 3 design email we'll say test at test com phone number just put all fours I don't off doesn't matter message we'll say hello and submit we get your message has been sent three seconds it's there it goes disappears and let's check firebase and there it is one two three design John Doe hello there's phone number and email so one last thing you may want to do is clear out these form inputs ok this data after the submission so we'll just go right here will say document dot get element by ID and let's grab a contact form and we're just going to say dot reset what's like that and I'll put a comment here we'll just say clear form all right so let's try it one more time name will say Steve Smith company to say some company email address let's do test phone number hi and submit your message has been sent everything it's been cleared and let's just check on firebase one second and check firebase and there is Steve Smith now one last thing we'll do is we'll actually deploy this so it should we should be able to just upload it to a server so I'm going to upload it to my Traverse see Mediacom which is just just host it's a cpanel hosting by in motion so what I'll do is open up my FTP I actually have it right here and I'm going to go to the root of my traverse see mediacom and we'll create a folder here or create a directory I'll just call it I'll just call it test I'm going to delete it right after and then let's take see let's see so projects firebase contact I'm just going to grab the three files bring them over here and let's go and visit traversing media.com slash test there's our forum let's try it out we'll just say Harry company test email phone number doesn't really matter and submit okay message has been sent let's go ahead and check firebase and there it is Harry so we now have a deployed contact form with a firebase back-end it's as easy as that alright guys hopefully you enjoyed this thanks for watching please hit that like button if you liked this please subscribe and you know share the videos watch the videos without adblock and you know all that stuff really helps so thanks a lot guys I will see you in the next video so if you guys really like my videos and you learn a lot from them and maybe have a couple extra dollars to spare check out my patreon page and working on creating special content for patrons you also get special deals on future courses and there's even an email support here for all YouTube videos and projects to learn more visit patreon.com slash traversée media

Channel: Traversy Media

Views: 192,329

Rating: 4.9633093 out of 5

Keywords: firebase, firebase contact form, firebase tutorial, javascript firebase, vanilla javascript firebase, contact form, javascript contact form

Id: PP4Tr0l08NE

Length: 26min 7sec (1567 seconds)

Published: Sun Aug 20 2017