Connecting Firebase to a HTML Form | Firebase Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 6 ม.ค. 2025

ความคิดเห็น • 240

  • @gabzydaisy
    @gabzydaisy 2 ปีที่แล้ว +10

    Thankyou, the explanation was very comprehensive. Appreciate the recap on the end of video too.

  • @Anime_Empire_2.0
    @Anime_Empire_2.0 2 ปีที่แล้ว +13

    Everything works like a charm , I even customised my own form and have added more values , I also created another 1 function that shows message , resets the form and sets a time out for 3 seconds then you can just call this function inside the submitForm function !! overall I realy liked it thanks for this content.

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว +4

      Thanks mate.....Glad you like it

    • @fidelmudzamba2029
      @fidelmudzamba2029 2 ปีที่แล้ว

      which version are you using

    • @christianbortotto5471
      @christianbortotto5471 ปีที่แล้ว

      hello how did you customize the form, I change the ids but it doesn't work

    • @christianbortotto5471
      @christianbortotto5471 ปีที่แล้ว

      I can only add fields but not edit existing ones

  • @nicolassuarez2933
    @nicolassuarez2933 ปีที่แล้ว +2

    I saw five tuts already, this one is the best!

  • @VetrivelRavi
    @VetrivelRavi  ปีที่แล้ว +1

    Firebase CDN Links(Alternative Setup Doc) - firebase.google.com/docs/web/alt-setup

  • @beaubreau
    @beaubreau ปีที่แล้ว +3

    Love the way you explain things as you go. This helped a lot.

  • @_chinocabron
    @_chinocabron ปีที่แล้ว +4

    As a ui/ux designer ive been trying to get into js with simple things like this that my clients ask me for. this video has done what any other couldn't which is making me understand its logic. thank you!

    • @Rigzin-kq2wg
      @Rigzin-kq2wg 5 หลายเดือนก่อน +1

      hey, hello
      Like firebase what are the other technologies required for a UIUX. I was learning firebase for my backend project.

  • @inariiii
    @inariiii ปีที่แล้ว +5

    this video caught my heart this is straight up the best video on learning to use firebase i have ever encountered , everything is just so right, the calming background music and everything, really thank you so much for this video

  • @agilitydeveloper7627
    @agilitydeveloper7627 2 ปีที่แล้ว +5

    Thanks, your the only tutorial that worked :)))

  • @limendime3720
    @limendime3720 2 ปีที่แล้ว

    Very helpful, thank-you. It is pretty cool to see data submitted through a form actually being stored somewhere instead of being erased, lol.

  • @Shiropuglive
    @Shiropuglive หลายเดือนก่อน +1

    Thanks for this wonderfull video. It save my lots of time and now my database is working
    🥰

  • @mdshamsurrahmanarif6783
    @mdshamsurrahmanarif6783 2 ปีที่แล้ว +1

    thanks for the amazing video man, i was strugging with it for few weeks but you solved all my problems. Thank you

  • @SUGGUYASWANTH
    @SUGGUYASWANTH ปีที่แล้ว

    got the right video after doing a lot of search. thank you.

  • @araputrevor5103
    @araputrevor5103 2 ปีที่แล้ว

    This is perfect. Thank you so much. Your teaching is outstanding. God bless you.

  • @denhamk
    @denhamk ปีที่แล้ว

    Thank you !! The only video that helped me get this thing to work!! Thank you!!

  • @chetan6896
    @chetan6896 8 หลายเดือนก่อน

    Clearly explained and I executed successfully 🔥

  • @shortFlixstudio-v8f
    @shortFlixstudio-v8f ปีที่แล้ว

    Great tutorial and in detail. Thank you bro.

  • @daniellemansfield1532
    @daniellemansfield1532 ปีที่แล้ว

    I'm creating my own portfolio website, this is perfect for creating new blog posts! thankyou!

  • @sanatanchakravarty3941
    @sanatanchakravarty3941 2 ปีที่แล้ว

    Vetri, this is awesome work. I borrowed your code from Git, and I am very very thankful. Superb job.

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว +1

      Awesome, Glad I could help you

  • @serdartoren
    @serdartoren ปีที่แล้ว

    It was very clean and successful!! Thank you so much

  • @kasunkanchanamusik
    @kasunkanchanamusik ปีที่แล้ว +2

    Yes it worked. Thank you so much. Can you make full website tutorial with backend and frontend please
    We are from sri lanka

  • @creativetutorial69
    @creativetutorial69 2 ปีที่แล้ว +3

    Your explanation is about great quality
    Thankyou :)

  • @PeterOne24
    @PeterOne24 2 ปีที่แล้ว

    Very helpful highly recomended this chanel

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Glad you think so!

    • @PeterOne24
      @PeterOne24 2 ปีที่แล้ว

      @@VetrivelRavi Hi I have a question. after I create react app following this video, after I host it in github pages. It shows blank black page.

  • @miguelvelascodev
    @miguelvelascodev ปีที่แล้ว

    you are awesome man, thank you so much !

  • @IrfanShaikh.
    @IrfanShaikh. 9 หลายเดือนก่อน

    Nice Explanation. Thanks for the help...

  • @adityamathur8906
    @adityamathur8906 2 ปีที่แล้ว

    This is a great video. I loved how you explained everthing thing you did in such a great way. Thanks for crating this video Really healped me a lot. Hope to se more of your videos

  • @ThePenguinclasses
    @ThePenguinclasses 5 หลายเดือนก่อน

    Relly helped me in my internship!

  • @rahulkagita
    @rahulkagita 3 หลายเดือนก่อน

    I got a reference error at 12:47 that says firebase not defined but everything's fine in my script code can you assist me with it

  • @DrMorax
    @DrMorax ปีที่แล้ว +3

    I want to create two forms with different purposes, do I just make a different web or is there a better way to do it?

  • @faygio
    @faygio ปีที่แล้ว

    Thanks brother, this is very useful.

  • @usamashaikh3366
    @usamashaikh3366 2 ปีที่แล้ว +1

    Thanks Man

  • @NaturalBeautyEverywhere
    @NaturalBeautyEverywhere 2 ปีที่แล้ว +2

    excellent video. 100% working

  • @YPTechDATIA
    @YPTechDATIA 2 ปีที่แล้ว

    very nice i was looking for this tutorial

  • @rahultomer126
    @rahultomer126 ปีที่แล้ว

    thank you for this tutorial really amazing for beginners

  • @crakkistim
    @crakkistim ปีที่แล้ว

    Good tutorial! Thank you so much

  • @adrianfernandez1621
    @adrianfernandez1621 ปีที่แล้ว

    Very helpful. Well done 🎉🎉🎉🎉

  • @rmaravind940
    @rmaravind940 2 ปีที่แล้ว

    Informative video ever helped me a lot bro Tamil🔥🔥

  • @billyfrcs19
    @billyfrcs19 2 ปีที่แล้ว +1

    Thanks Indian guy on youtube.

  • @macieq44
    @macieq44 ปีที่แล้ว

    Haven't watched the video yet, but the comments make me excited to do so :D

  • @rajyadav8415
    @rajyadav8415 2 ปีที่แล้ว

    thanks bahiya for this awesome content❤❤👍👍

  • @Coder_of_Bihar_0005
    @Coder_of_Bihar_0005 10 หลายเดือนก่อน +1

    How can create add item in own app in home screen by coding

  • @alphagaming5432
    @alphagaming5432 9 หลายเดือนก่อน

    Thank You so much It Helped me

  • @DouglasMbugua
    @DouglasMbugua 9 หลายเดือนก่อน

    nice tutorial! Thanks alot

  • @MohammedAnees-pz3ys
    @MohammedAnees-pz3ys หลายเดือนก่อน

    ur video helped me a lot

  • @anastasiaivashchenko6338
    @anastasiaivashchenko6338 2 ปีที่แล้ว

    WOW! Great tutorial!

  • @i_Mordercag1
    @i_Mordercag1 10 หลายเดือนก่อน +1

    Music nostalgia :)

  • @minhhoahuynh6625
    @minhhoahuynh6625 ปีที่แล้ว

    thanks bro very much from VietNam 43 .

  • @gopixus
    @gopixus ปีที่แล้ว

    Good explained, thanks

  • @신승호-c5j
    @신승호-c5j 2 ปีที่แล้ว +1

    Hi, I'm not sure why you pasted configuration code into js while it is supposed to go in the script tag. If I only paste the given code into my HTML code would this not work?

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว +1

      always maintaining the scripts in separate file would better

  • @dharmendrasingh-tb2qw
    @dharmendrasingh-tb2qw ปีที่แล้ว

    Thank you sharing a knowledge

  • @steve_franc
    @steve_franc ปีที่แล้ว +1

    I followed the tutorial but it doesn't work for me, is there a part I'm missing?

    • @스웩여자큥큥
      @스웩여자큥큥 11 หลายเดือนก่อน

      same here, there's issues on initialize firebase

  • @jadida2288
    @jadida2288 2 ปีที่แล้ว +3

    great tutorial, but the music is a bit disturbing in the background

  • @themigliore
    @themigliore 3 ปีที่แล้ว +1

    it works for me, thanks

  • @bintouongoiba1217
    @bintouongoiba1217 ปีที่แล้ว

    very good, thanks you !

  • @MiloAnya-m7r
    @MiloAnya-m7r ปีที่แล้ว

    It helps a lot, by the way do you have another video that display the values that you input in database?

  • @petyrevengestories
    @petyrevengestories 3 ปีที่แล้ว +1

    Thanks, it was great

  • @GreenGames2k
    @GreenGames2k 9 หลายเดือนก่อน

    Thankyou for your work

  • @velsmusics326
    @velsmusics326 ปีที่แล้ว

    thank you so much for your beutiful video

  • @raffph
    @raffph 2 ปีที่แล้ว

    how to change the "random alpha-number" the above of variables id into number?

  • @denhamk
    @denhamk ปีที่แล้ว

    I don't understand what I'm doing wrong. The entries go into firebase. But.. my name field is not appearing. The email field appears .. and in the message field I get the name of the person.. I have checked all the IDs for it and it's all correct. No matter what I put in for the IDs it's only these two fields that appear .. any help?

    • @VetrivelRavi
      @VetrivelRavi  ปีที่แล้ว

      need to see the code...

    • @denhamk
      @denhamk ปีที่แล้ว

      @@VetrivelRavi ok.. but how to send? TH-cam doesn't like me sharing code on here

  • @bhavinravalia9285
    @bhavinravalia9285 ปีที่แล้ว

    very helpful i got erro bcz not haviing cdn link thank you now it's working

    • @VetrivelRavi
      @VetrivelRavi  ปีที่แล้ว

      firebase.google.com/docs/web/alt-setup

  • @ginacarvajal6763
    @ginacarvajal6763 ปีที่แล้ว

    Thank you very much.

  • @dotafanatic2413
    @dotafanatic2413 ปีที่แล้ว

    i want to ask, if you use xampp then connect to firebase? or directly clicking the HTML file then add the file data to firebase?

  • @etherealize
    @etherealize 9 หลายเดือนก่อน

    how do you generate a cdn link for your firebase project?

  • @simothedeveloper
    @simothedeveloper ปีที่แล้ว

    Thank you, but how can i get the value from a radio button?

  • @sahilzore867
    @sahilzore867 ปีที่แล้ว

    thanks buddy nice videos

  • @ShreyasGandhi-ij3qz
    @ShreyasGandhi-ij3qz 9 หลายเดือนก่อน

    Thanks for video ....
    how can we export that generated data in form of csv files ????

  • @WhisperedTales911
    @WhisperedTales911 ปีที่แล้ว

    do we need to install any extensions in vs code?

  • @phamquan1358
    @phamquan1358 9 หลายเดือนก่อน

    can you help me how to we take data from firebase out?

  • @amazingbrain4057
    @amazingbrain4057 2 ปีที่แล้ว +2

    Nice video and great explanation. Everything worked out well. Please I would like to know if you would be able to create a video where we can fetch the data from Realtime DB and display information using HTML/CSS (like a dashboard). Also, I seem to be getting errors on v9.

  • @alexandracynthia5223
    @alexandracynthia5223 ปีที่แล้ว

    Please, do u have a video about how to show the information of the form (from firebase) on a html page?

  • @kensleylewis
    @kensleylewis 3 ปีที่แล้ว +1

    Good stuff. do you have a video on deploying your local form to firebase hosting?

    • @VetrivelRavi
      @VetrivelRavi  3 ปีที่แล้ว

      are you asking about custom domains ? Or How to deploy the project in firebase ?

    • @VetrivelRavi
      @VetrivelRavi  3 ปีที่แล้ว

      Yes i do check this video
      th-cam.com/video/RAWHXRTKTHw/w-d-xo.html

  • @MdAzad-hc3le
    @MdAzad-hc3le 11 หลายเดือนก่อน

    Thank You So Much Sir

  • @sg8nj
    @sg8nj 2 ปีที่แล้ว

    Amazing👍

  • @justinalmodovar8978
    @justinalmodovar8978 ปีที่แล้ว

    how can i put image to the firebase

  • @quratulainaisha3265
    @quratulainaisha3265 2 ปีที่แล้ว

    Its not working for me .... even console shows an error on addEventListener .... and no data is shown in firebase .. please guide me what should i do ?

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Can you please share me the code and the error screen shot ?

    • @shadabpathan4812
      @shadabpathan4812 2 ปีที่แล้ว

      I m also facing the same issue please help me bro.

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      please share the error code

  • @mitsujinn
    @mitsujinn 7 หลายเดือนก่อน

    hello there. I'm new in this type of web thing and I have a project to make a simple submit web and store the data to firebase, just like this video. however, I dont know yet how to make a simple website just like the one you have. do you have video tutorial how to make one like yours ? thanks man

  • @vishalaurora9631
    @vishalaurora9631 ปีที่แล้ว

    What if we want to connect 2 forms to the same database

  • @Wangui..
    @Wangui.. ปีที่แล้ว

    Mine is not showing the databaseurl pls help

  • @ahmadsy1000
    @ahmadsy1000 ปีที่แล้ว

    Hi. For me it's absolutely not working. Can you help me?

  • @ashamurmu
    @ashamurmu ปีที่แล้ว

    Thank you!

  • @learnwithabhineet4138
    @learnwithabhineet4138 2 ปีที่แล้ว

    My database is not getting store in firebase.can you pls help?

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      please do share me the error code

  • @krlnd.
    @krlnd. 2 ปีที่แล้ว

    hi, i have a problem that it says the firebase is not initalised on the js file, any way to solve this issue?

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Please doe share the error code

    • @krlnd.
      @krlnd. 2 ปีที่แล้ว

      ​@@VetrivelRavi
      hi, here is my code, removed the const firebase part for privacy
      //initialising firebase
      firebase.initializeApp(firebaseConfig);
      //referencing database
      var pollDB = firebase.database().ref("7menweb");
      document.getElementById("favemem").addEventListener("submit", submitPoll);
      function submitPoll(e){
      e.preventDefault();
      var name = getElementVal("name");
      var email = getElementVal("email");
      var feedback = getElementVal("feedback");
      console.log(name,email,feedback);
      }
      const getElementVal = (id) => {
      return document.getElementById(id).value;
      }
      this error is given:
      Uncaught ReferenceError: firebase is not defined
      at form.js:13:1

  • @rizvi424
    @rizvi424 ปีที่แล้ว

    helpful tutorial thanx sir

  • @mahanoor3512
    @mahanoor3512 3 ปีที่แล้ว

    i do everything same as u did. but my database is not shown in Realtime database? why??

    • @VetrivelRavi
      @VetrivelRavi  3 ปีที่แล้ว +1

      Check the script file that you linked in the index.html....If its correct share me the screen shot of the error what you got in the console....to my mail

  • @manurajput1351
    @manurajput1351 2 ปีที่แล้ว

    Can you tell me in index.html that you have used the script tage for the firebase how to get this link

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Search for firebase CDN link

  • @blazexiytb
    @blazexiytb 2 ปีที่แล้ว

    when i look at console like in 12:47 it says: firebase.js:12 Uncaught ReferenceError: firebase is not defined
    at firebase.js:12:1

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว +1

      follow this order

    • @mafazrahman5213
      @mafazrahman5213 2 ปีที่แล้ว

      I got the same issue.
      how I solved?
      Add the after the closing of body tag.

  • @rohandoshi6337
    @rohandoshi6337 2 ปีที่แล้ว

    I get this error when I use the CDN:
    "It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use."
    It breaks my javascript code (it doesn't run) - any advice on how to fix?

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Its just a waning it will work fine....If you want to avoid that issue, try to use web version 9
      // Import the functions you need from the SDKs you need
      import { initializeApp } from "www.gstatic.com/firebasejs/9.12.1/firebase-app.js";
      // TODO: Add SDKs for Firebase products that you want to use
      // firebase.google.com/docs/web/setup#available-libraries
      // Your web app's Firebase configuration
      const firebaseConfig = {
      apiKey: "",
      authDomain: "",
      projectId: "",
      storageBucket: "",
      messagingSenderId: "",
      appId: ""
      };
      // Initialize Firebase
      const app = initializeApp(firebaseConfig);

    • @nadirsehaba8239
      @nadirsehaba8239 2 ปีที่แล้ว

      @@VetrivelRavi where i should write the script plz??

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      You should write the scripts in your index.html

  • @tranliem06
    @tranliem06 2 ปีที่แล้ว

    Hey what i should do when i have a gender selection in the form

  • @baibhavipandey4814
    @baibhavipandey4814 ปีที่แล้ว

    somebody please help I'm getting firebase not defined error

  • @oblivious1494
    @oblivious1494 ปีที่แล้ว

    Nice tutorial. How to see the saved data on another webpage. Lets say if its a recipe webiste where an user created a recipe than saved it, now he wants to see his saved recipe.

  • @Shalom_Phiri
    @Shalom_Phiri 2 ปีที่แล้ว

    Apparently the variable firebase is undefined on my code, please help

    • @Shalom_Phiri
      @Shalom_Phiri 2 ปีที่แล้ว

      The firebase object I mean

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Make sure that you added the firebase CDN link first and then your local script file next

  • @viveknikam5509
    @viveknikam5509 2 ปีที่แล้ว +1

    I have an error- Uncaught Reference error: firebase is not defined
    Pls reply aspa

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Did you defined the script tag in the HTML

  • @A1Loaded
    @A1Loaded ปีที่แล้ว

    Thanks for the explanation.
    Please, how and where did you get the CDN link? Firebase and CDNs are being updated but none of those updated links seem to work for HTML app. Please hit me up

    • @VetrivelRavi
      @VetrivelRavi  ปีที่แล้ว

      firebase.google.com/docs/web/alt-setup

    • @A1Loaded
      @A1Loaded ปีที่แล้ว

      ​@@VetrivelRavi Thanks a lot but its still not working or am I doing something wrong?

    • @A1Loaded
      @A1Loaded ปีที่แล้ว

      please can you send me an email with your whatsapp number so we can discuss this in detail?

    • @VetrivelRavi
      @VetrivelRavi  ปีที่แล้ว

      vetrivel.galaxy@gmail.com -> Please drop an email I will contact you back

  • @btsophile512
    @btsophile512 2 ปีที่แล้ว

    getting error "firebase: Error(auth/admin-restricted-operation)"

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      please make sure that you add the main app when you are trying to connect the db. please do follow the link stackoverflow.com/questions/69215748/firebase-error-auth-admin-restricted-operation-after-createuserwithemailandpassw

  • @tusharsahni6759
    @tusharsahni6759 ปีที่แล้ว

    sir, can u plz hep me to link firebase to my code, im not able to do

  • @matthewnguyen3335
    @matthewnguyen3335 2 ปีที่แล้ว

    Uncaught TypeError: firebase.database is not a function I am getting this error plz help

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      can you please copy the error code and that complete line in your script file

  • @observerslife.8789
    @observerslife.8789 ปีที่แล้ว

    how to send this message to admin email?

  • @christianbortotto5471
    @christianbortotto5471 ปีที่แล้ว

    hello great video thanks, I tried to customize the fields but it doesn't work anymore. could you give me a hint. I replaced ID on html file and mail file. but it doesn't send anymore.I can only add fields but not edit existing ones

    • @VetrivelRavi
      @VetrivelRavi  ปีที่แล้ว

      please follow through the ID name of the existing fields

  • @mafazrahman5213
    @mafazrahman5213 2 ปีที่แล้ว

    Can we deploy this project in firebase?
    If yes then how?

  • @digitech8007
    @digitech8007 2 ปีที่แล้ว

    I do everything like u do. But cant upload and also not shown the data on console ..why ?

    • @VetrivelRavi
      @VetrivelRavi  2 ปีที่แล้ว

      Change the payment method in the Firebase........
      Choose Blaze mode instead of spark mode then it will upload