Were you able to actually send an email with the contact form? It requires some advanced Javascript and a backend server.... It's so hard to implement the sending of an actual email thru a form.
Anytime I see Brad course anywhere either on TH-cam or Udemy, I adjust my seat and get ready to learn new thing in a precise manner. Brad never disappoint. All his courses are AWESOME!!!. Thank You Brad.
@@piagjabr I've made a screenshot for you on Pasteboard. pasteboard.co/I0WSec5.png If you click "Cloud Firestore" next to the Database label you'll get to see the two options. I hope it helps you out.
Excellent as always, thanks! Would be great to follow up on this project and do something with the form once submitted. For example, a common use case would be to send the submitted info to an email address. If Firebase can also send emails, then that would be a great continuation of the series. :)
Hi... sorry to pile on, but I would also like to see this series continue showing examples of how to send a notification email once a contact has been received by Firebase. Also, how we can pull data out of Firebase and, possibly, show the messages on an Admin page... Also, what is the proper way to secure this form once it is deployed? Should the Firebase RULES be set to only allow WRITES from the live web server IP address? Maybe, you could go into that in another video too?
You sir, are amazing, I love how chill you explain everything and love the fact that you add comments to everything, even the most obvious lines of code. keep up the good work !!
I applaud your "mobile first" approach to development and design. Thank for coming up with an example that is used on a real website. Firebase is very compelling it's nice to see how to implement step by step.
Upvote this so traversy sees this. We need more firebase tuts. The majority of the tuts on YT and everywhere else are lacking or just plain deprecated by now
Yes, the firebase is not working at all. Because the version of Firebase used here is 4.3 while the current version is 8.2 . The error I am getting is: "Cannot read property 'ref' of undefined".
Nice guide. Could you put together a 2021 guide on the same topic? Seems like firebase has dramatically changed in how we communicate to their DB, sense the time of this original video.
I made it work with some changes. In the index.html, I instead used: In main.js, I Used the following code (changing the firebaseConfig to my own, of course) const firebaseConfig = { apiKey: "xxx", authDomain: "xxx", databaseURL: "xxx, projectId: "xxx", storageBucket: "xxx", messagingSenderId: "xxx", appId: "xxx", measurementId: "xxx" }; // Initialize Firebase firebase.initializeApp(firebaseConfig); That worked for me.
Great video! Followed along and got the contact form on my website up and running in 45 minutes. This is one of the last things I wanted to complete before deploying my site. It is my first site and will be hosting using Github!
I admire you sir, it takes a long long time to find a tutorial that puts the configuration of the webapp in the .js file. The correct way to do it, first video i've watched that actually helped write to the db. Thank you.
Thanks brad, till now I was using only php contact form for all my website projects. And now I can use firbase which comes very handy. As usual your videos are so helpful.
Super thanks, just got interested in Firebase, didn't know it was part of my Google setup. This is a great example of "You don't always need a framework" and how the new JS has got da power.
Hey, its amazingBrad! Perfect thing, you just mentioned in the end about the authentication, bravo! tentimes yes! If you could built a blog based on Firebase, guess a lot of tough youtubers would be be impressed! And please Brad, find some free time to go further with that mobile first project :)
This is the most easiest follow through video I have ever seen, you have an answer for everything one can think of! Just want to add that firebase gave me a warning to use specific CDN scripts eg firebase-database and firebase-app and not the generic firebase.js one.
#Everyone include the firebase database CDN link. Otherwise it will not work properly. Thank you so much @Traversy Media. This tutorial helps me a lot to complete one of my projects.
Thank you Brad!!!! YOU are the coolest dude. I've always wanted to learn Firebase and never thought I would go this far in the learning process. NICE JOB!!
Always come here with a hope to learn something new and guess what i take a hell lot back from your videos. Thank you so much Mate. Appreciate all your effort. Cheers.
You are amazing. After 15 years of software development in sql database I was not looking forward to firebase. We are currently developing in all platforms, iOS, android web and this was a great help. Will check your Udemy courses as well.
Had never heard of Firebase before this and am looking forward to trying my first crack at Javascript and Firebase. Love that your vids almost always translate to a fun and usefull project of my own. Thx bro.
Thank you for making such a great tutorial, Brad. You make the javascript learning process much smoother.. Please make a vanilla javascript user registration form with firebase authentication.
Hi, Brad. Is it possible to do a tutorial short video about "psd to html & css"? It would be nice to show different ways - either directly in photoshop or with app like brackets or something like that.
This was unbelievably helpful and straightforward! I'm new to JS and Firebase, but I still managed to get a simple form linked to a database up on my final project page. Thank you. :)
Collecting this information looks fairly straightforward. It might be a nice follow-up video to show how to connect to that same collection of data behind admin wall and view all of the submissions in a tabular format.
This means I don't have to use php for a contact forms, great. Firebase might also solve some of my hosting issues. I genuinely always seem to learn something new and valuable with these videos. Thanks!
excellent bro..i have a doubt .. .when i input the form its stored in realtime databases..Good..but i want a immediate email to my Mail ID it is possible?.please help me...Thanks alot
I don't get why at 13:57 he does : let newMessageRef = messagesRef.push(); newMessageRef.set({ ... }); Isn't .push() usually with something inside the () to push onto the target? So messagesRef.push(object) pushes object onto the firebase references messagesRef? What happens there when he pushes something to a variable with nothing inside the push, it's not on MDN JS docs - everything there shows that a argument is needed. And then after he does a .set, how does that relate to the above? Thanks for any answers, I really want to understand everything he teaches in this video.
For anyone whos watching this now and has this question - push() is a firebase method that gives an ID. newMessageRef then is a path to that ID and we call set() to save data to this path. You can take off .push() and see what happens to data when submitting to get better understanding
Men you're amazing !! I love your videos and what you want to share about your background and your experience !!! God bless you bro you and your family particularly your son !!!
Thanks a lot, Brad! Always wanted to get to know the backend side of form submission. I will implement this on my online portfolio. Thanks Thanks Thanks again.
Hi Brad, Great tutorial as always. Thanks.. How to prevent bad guys from using my credentials & pushing data to firebase, since credentials are visible to every one.?
You would normally add authentication to your web page when using anything that will have the ability to submit to Firebase. You can add rules to your database in Firebase to only allow items to be pushed if authenticated. Having the name of the project/databaseUrl etc. is useless if there are proper rules set up.
another question: how to make the contact app available offline like a phone contact app, in order to access any contact and modify it in offline mode?
Brad, absolutely brilliant. Thank you very much, I was not aware of Firebase so learnt something new again today. Need to learn more about js now. Farm West
*Tip* : also add *reload* function to reload the page for flushing entered data setTimeout(function(){ document.querySelector('.sent').style.display = "none"; }, 3000); //reload page window.location.reload(); edit : not inside the timeout Function, Out side the function.
I was expecting for a callback inside function saveMessage(), how would i know if the message has really been sent? What if there are internet connectivity issues? Let me know, thanks.
Would really love to see an updated version of this ... Firebase has changed a lot.. and the script is all different and it doesn't work for me.. keeps saying.. const app = initializeApp(firebaseConfig); -- unable to find variable initializeapp
Great video! Learned alot from this. Can you do one or two more video on this series for displaying data from Firebase to html page. For ex. display markers of location on map from firebase data. That would be really awesome. Thanks again! :)
in the file you're having troucble with, write this: import firebase from 'firebase/app'; or import {firebase} from 'firebase/app'; it worked for me, good luck
Thanks for the useful example, Brad! Please say, do you have any idea how to protect my API key from being used by others? Because it is in the public access for all inquisitive people.
Hi really useful... i have a doubt that is this database really safe?? am asking this bcoz,we have given our auth id,api key which we got from firebase in our main.js so any one can access our database ri8???
Great video brad! BUT in the case where the firebase servers are down the client will get the "your message has been sent" even though the form was never sent?
Hey Brad, thank you for making such great videos. And I'm wondering do you have any plan for making a Jenkins tutorial? Maybe next video you can show us using Jenkins to deploy updates as a sequel of this video.
Great stuff Brad, you made it seem quite simple. During the video you mentioned you might do a video about how to read messages. Do you have any plans to do so?
![เขามัทรี - เอ็กซ์ ศุภกฤต - จอนนี่มิวสิค [ Official MV ]](http://i.ytimg.com/vi/AS9ufKuQIVs/mqdefault.jpg)
Thanks! You help me a lot. I bought your course (bootstrap) in Udemy and now I just finish my contact form on my portfolio.
You're an amazing teacher!
Were you able to actually send an email with the contact form? It requires some advanced Javascript and a backend server.... It's so hard to implement the sending of an actual email thru a form.
Anytime I see Brad course anywhere either on TH-cam or Udemy, I adjust my seat and get ready to learn new thing in a precise manner. Brad never disappoint. All his courses are AWESOME!!!. Thank You Brad.
Firebase has changed, make sure when you go to Database in Firebase, scroll down and select the 'Realtime Database' otherwise it won't work.
thanks dude, i'm searching for your comments. it helped me :)
Thanks
Thanks man!!!
I wasn't sure why it wasn't working for me, then I saw your comment and it worked instantly.
@@MikevanKuik Don't understand what to do !! Go to the Firebase Database docs and ??
@@piagjabr
I've made a screenshot for you on Pasteboard.
pasteboard.co/I0WSec5.png
If you click "Cloud Firestore" next to the Database label you'll get to see the two options.
I hope it helps you out.
You are the man Brad. I've been following your videos for about a year now and I have yet to find someone who teaches as well as you do.
Excellent as always, thanks! Would be great to follow up on this project and do something with the form once submitted. For example, a common use case would be to send the submitted info to an email address. If Firebase can also send emails, then that would be a great continuation of the series. :)
John Buchmann was gonna write the exact same thing
John Buchmann me too
Hi... sorry to pile on, but I would also like to see this series continue showing examples of how to send a notification email once a contact has been received by Firebase. Also, how we can pull data out of Firebase and, possibly, show the messages on an Admin page...
Also, what is the proper way to secure this form once it is deployed? Should the Firebase RULES be set to only allow WRITES from the live web server IP address? Maybe, you could go into that in another video too?
Agreed
Firebase is now listed on zapier. You can get zapier to deliver the message to an email, an api or any platform that you wish.
I loved that calm attitude with which you taught, you're the man
You sir, are amazing, I love how chill you explain everything and love the fact that you add comments to everything, even the most obvious lines of code. keep up the good work !!
I applaud your "mobile first" approach to development and design. Thank for coming up with an example that is used on a real website. Firebase is very compelling it's nice to see how to implement step by step.
Sir, please make a 2019 video on the same topic and host, update many other things on firebase?
Agreed. Firebase has changed and I'm super confused.
This is where some of my best apps are
Upvote this so traversy sees this. We need more firebase tuts.
The majority of the tuts on YT and everywhere else are lacking or just plain deprecated by now
@@FordExplorer-rm6ew YES I need updated tutorials bc everyone's are old and I'm so confused
Yes, the firebase is not working at all. Because the version of Firebase used here is 4.3 while the current version is 8.2 . The error I am getting is: "Cannot read property 'ref' of undefined".
@@MotM200 bro Iliterally got firebase.database is not a function...
I'm just catching up with all your content brad, you've changed your life around and I am so happy for you. All the best man.
thank you verrry much i have been searching for comment system from weeks at last found yours and it is working perfectly.
i spent 2 nights trying to find a video on this i dont know how i missed yours ! thanks
I just released it hours ago :)
Your videos are phenomenal. You have 156k subs and FCC has 200k. You're a one man show and you almost have the same impact as FCC
Nice guide. Could you put together a 2021 guide on the same topic? Seems like firebase has dramatically changed in how we communicate to their DB, sense the time of this original video.
I made it work with some changes.
In the index.html, I instead used:
In main.js, I Used the following code (changing the firebaseConfig to my own, of course)
const firebaseConfig = {
apiKey: "xxx",
authDomain: "xxx",
databaseURL: "xxx,
projectId: "xxx",
storageBucket: "xxx",
messagingSenderId: "xxx",
appId: "xxx",
measurementId: "xxx"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);
That worked for me.
@@Didrik147 this did the trick thank you!
Great video! Followed along and got the contact form on my website up and running in 45 minutes. This is one of the last things I wanted to complete before deploying my site. It is my first site and will be hosting using Github!
I admire you sir, it takes a long long time to find a tutorial that puts the configuration of the webapp in the .js file. The correct way to do it, first video i've watched that actually helped write to the db. Thank you.
Firebase is so great, thanks Brad. Please do more advanced example with firebase, like file upload and notification
And send email notification too. ^^
Thanks brad, till now I was using only php contact form for all my website projects. And now I can use firbase which comes very handy. As usual your videos are so helpful.
Really nicely explained, more of firebase would be appreciated.
I have only heard about firebase without using.
This short video makes me know idea about firebase thanks for explanation
Super thanks, just got interested in Firebase, didn't know it was part of my Google setup. This is a great example of "You don't always need a framework" and how the new JS has got da power.
After 3 years but it's never TOO LATE
Thanks A Lot Bro,
Perfect Tutorial :)
Hey, its amazingBrad! Perfect thing, you just mentioned in the end about the authentication, bravo! tentimes yes! If you could built a blog based on Firebase, guess a lot of tough youtubers would be be impressed! And please Brad, find some free time to go further with that mobile first project :)
Thanks Traversy..i have learnt alot of front -end development from you. You are the greatest of them all
This is the most easiest follow through video I have ever seen, you have an answer for everything one can think of! Just want to add that firebase gave me a warning to use specific CDN scripts eg firebase-database and firebase-app and not the generic firebase.js one.
#Everyone include the firebase database CDN link. Otherwise it will not work properly.
Thank you so much @Traversy Media. This tutorial helps me a lot to complete one of my projects.
give the link
Thank you Brad!!!! YOU are the coolest dude. I've always wanted to learn Firebase and never thought I would go this far in the learning process. NICE JOB!!
Always come here with a hope to learn something new and guess what i take a hell lot back from your videos. Thank you so much Mate. Appreciate all your effort. Cheers.
You are amazing. After 15 years of software development in sql database I was not looking forward to firebase. We are currently developing in all platforms, iOS, android web and this was a great help. Will check your Udemy courses as well.
Had never heard of Firebase before this and am looking forward to trying my first crack at Javascript and Firebase. Love that your vids almost always translate to a fun and usefull project of my own. Thx bro.
Thank you for making such a great tutorial, Brad.
You make the javascript learning process much smoother..
Please make a vanilla javascript user registration form with firebase authentication.
Brad just finished your mean stack app and plan to study firebase ,thanks brad
This is one of the best tutorials i´ve found, thank you!
Hi, Brad. Is it possible to do a tutorial short video about "psd to html & css"? It would be nice to show different ways - either directly in photoshop or with app like brackets or something like that.
This was unbelievably helpful and straightforward! I'm new to JS and Firebase, but I still managed to get a simple form linked to a database up on my final project page. Thank you. :)
very clever use of getInputVal() function to capture values by passing an id... Thank you Brad!
Collecting this information looks fairly straightforward. It might be a nice follow-up video to show how to connect to that same collection of data behind admin wall and view all of the submissions in a tabular format.
I was thinking of learning firebase, and voila I got tutorial by brad. Thnx Brad. waiting for the authentication part
This means I don't have to use php for a contact forms, great. Firebase might also solve some of my hosting issues.
I genuinely always seem to learn something new and valuable with these videos.
Thanks!
a tip: if you play Brad's videos at 1.25 speed it is better and sounds more energetic
excellent bro..i have a doubt .. .when i input the form its stored in realtime databases..Good..but i want a immediate email to my Mail ID it is possible?.please help me...Thanks alot
I don't get why at 13:57 he does :
let newMessageRef = messagesRef.push();
newMessageRef.set({
...
});
Isn't .push() usually with something inside the () to push onto the target? So messagesRef.push(object) pushes object onto the firebase references messagesRef? What happens there when he pushes something to a variable with nothing inside the push, it's not on MDN JS docs - everything there shows that a argument is needed.
And then after he does a .set, how does that relate to the above? Thanks for any answers, I really want to understand everything he teaches in this video.
i have the same questions , i guess you could do it either way but .push({object}) is the preferable way, at least according to the docs
For anyone whos watching this now and has this question - push() is a firebase method that gives an ID. newMessageRef then is a path to that ID and we call set() to save data to this path. You can take off .push() and see what happens to data when submitting to get better understanding
Take love, sir. You are a great teacher❤❤❤❤
Dear Brad, Thanks a ton for the nice videos and educative content and sharing your brilliant knowledge! God bless you abundantly!
Brad is the best in my own ranking
Men you're amazing !! I love your videos and what you want to share about your background and your experience !!! God bless you bro you and your family particularly your son !!!
Really good stuff Brad, keep them coming.
Thank you Brad, your video helped me a lot! I will share it to others, for sure!
"hey what's going on guys, so a few days ago, or I don't know, maybe it was even yesterday..."
how can you not love this guy
Thanks a lot, Brad! Always wanted to get to know the backend side of form submission. I will implement this on my online portfolio. Thanks Thanks Thanks again.
Great explanation. It was easy to expand this to fit my contact form. Thank you!
Hey.. every time y push the submit button the page reloads and nothing happens .. I checked the script and everything is like in the video.
Thank you. Its awesome to start with so crystal clear explanaiton.
Brother no words to thank you
This was super super useful! Thanks! Great work Brad!
My Guy! Great, great tutorial. Finally, some pure vanilla javascript. Awesome!!!!
Hi Brad, Great tutorial as always. Thanks..
How to prevent bad guys from using my credentials & pushing data to firebase, since credentials are visible to every one.?
Black and White good quation
Interested in this one
You don't use the credentials on the front, you make a call to your server and your server calls firebase. Never store any information on the front.
You would normally add authentication to your web page when using anything that will have the ability to submit to Firebase. You can add rules to your database in Firebase to only allow items to be pushed if authenticated. Having the name of the project/databaseUrl etc. is useless if there are proper rules set up.
still found this useful after 4 years.
Great Brad, as always very informative and
straight to the point ! 😀
Your tutorials are very informative.
another question: how to make the contact app available offline like a phone contact app, in order to access any contact and modify it in offline mode?
Brilliant job right there Brad, well explained thanks
just finished this course. Taught me new things especially the javascript one! :))
Brad,
absolutely brilliant. Thank you very much, I was not aware of Firebase so learnt something new again today. Need to learn more about js now.
Farm West
*Tip* : also add *reload* function to reload the page for flushing entered data
setTimeout(function(){
document.querySelector('.sent').style.display = "none";
}, 3000);
//reload page
window.location.reload();
edit : not inside the timeout Function, Out side the function.
Keep up the good work! Love from morocco ♡
Is there a way to get an email when the contact form is submitted?
Very helpful thank you mr. Brad 😊
Awesome tutorial Travis. Thank you!
I was expecting for a callback inside function saveMessage(), how would i know if the message has really been sent? What if there are internet connectivity issues? Let me know, thanks.
Awesome tut. Thanks Brad.
That was awesome. Plz do a CRASH COURSE video on FIREBASE.
Man, you are the best! As always, thanks for what you do! I would love to see some more vanilla JS tutorials.
Would really love to see an updated version of this ... Firebase has changed a lot.. and the script is all different and it doesn't work for me.. keeps saying.. const app = initializeApp(firebaseConfig); -- unable to find variable initializeapp
As always, your video is very helpful. I always look for your videos when learning a new language or platform. Thank you. m.j.
Still relevant today, thanks man!
Great tutorial Traversy. You can make a great trainer.
Love your vids Brad. Thank you as always.
Great video! Learned alot from this. Can you do one or two more video on this series for displaying data from Firebase to html page. For ex. display markers of location on map from firebase data. That would be really awesome. Thanks again! :)
I have a problem !!!!
help plz !!
Uncaught TypeError: firebase.database is not a function
in the file you're having troucble with, write this:
import firebase from 'firebase/app';
or
import {firebase} from 'firebase/app';
it worked for me, good luck
Add that under the other firebase cdn in index.html
Your tutorials are awesome!
Thanks for the useful example, Brad!
Please say, do you have any idea how to protect my API key from being used by others? Because it is in the public access for all inquisitive people.
Great. Very impressive. Have been looking for something like this.
Great video, could you make one using this contact form and nodemailer? There is a serious lack of good nodemailer tutorials on yt!
Thank you Brad. Please make a full Udemy course on Javascript with some projects.
Thank you very helpful, look forward to watching more videos!
Thank you for making this video.
this was exactly what i needed, even the form fields lol thank you so much!!
I got this error: " Uncaught TypeError: firebase.database is not a function "
Try to add this:
My Firebase version is 7.7.0.
change (config) for (firebaseConfig), works for me. Line 11
I got a : Uncaught TypeError : addEventListener
Thank you. it worked!
Hi really useful...
i have a doubt that is this database really safe??
am asking this bcoz,we have given our auth id,api key which we got from firebase in our main.js so any one can access our database ri8???
Thank you so much for your help man. I loved the video!
make a playlist on firebase including reading/display data and deleting data. excellent tutorial
Great video brad! BUT in the case where the firebase servers are down the client will get the "your message has been sent" even though the form was never sent?
Thank you Tavis, you made my life easy...
Thanks for these videos man!!!!!!!! appreciated, life changing
Hey Brad, thank you for making such great videos. And I'm wondering do you have any plan for making a Jenkins tutorial? Maybe next video you can show us using Jenkins to deploy updates as a sequel of this video.
How to read this firbase contactform database, have any video about this..
Great stuff Brad, you made it seem quite simple. During the video you mentioned you might do a video about how to read messages. Do you have any plans to do so?
Bro! your videos are excellent. Thank you so much.
You are amazing teacher