Connecting Firebase to a HTML Form

No video

Connecting Firebase to a HTML Form | Firebase Tutorial

Рет қаралды 130,104

Күн бұрын

In this video we will take the responsive contact form we built in the last video and hook it up to a firebase backend to store submissions in a firebase database.
#html #css #js #ui #ux #firebase #firebasedb #googlecloud
---------------------------------------------------------------------------------------------------------------------
Source Links:
..........
Project File:
GitHub:- github.com/Vet...
Follow us on:
codewithvetri....
---------------------------------------------------------------------------------------------------------------------
Suggested Videos
Animated Landing Page : • Animated Fashion Desig...
Bootstrap 5 : Full Screen Image Background : • Bootstrap 5 : Full Scr...
Sliding Sign In & Sign Up Form | Rsponsive : • Sliding Sign In & Sign...
Glassmorphism | Neumorphism : • Glassmorphism | Neumor...
---------------------------------------------------------------------------------------------------------------------
CDN Links:
Firebase "cdnjs.cloudfla..."
---------------------------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------------------------
Social Media:
Facebook:
/ velvetri452
Instagram:
@vetrivel_ravi
Linkedin:
/ velvetri
---------------------------------------------------------------------------------------------------------------------
Music :-
Song: Lost Sky - Dreams [NCS Release]
Music provided by NoCopyrightSounds
Free Download/Stream: ncs.io/Dreams
Watch: • Lost Sky - Dreams | Tr...

Пікірлер: 236

@VetrivelRavi 11 ай бұрын

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

@Anime_Empire_2.0 2 жыл бұрын

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 2 жыл бұрын

Thanks mate.....Glad you like it

@fidelmudzamba2029 2 жыл бұрын

which version are you using

@christianbortotto5471 Жыл бұрын

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

@christianbortotto5471 Жыл бұрын

I can only add fields but not edit existing ones

@_chinocabron Жыл бұрын

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 28 күн бұрын

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

@gabzydaisy 2 жыл бұрын

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

@VetrivelRavi 2 жыл бұрын

Glad you enjoyed it!

@kasunkanchanamusik 10 ай бұрын

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

@inariiii Жыл бұрын

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

@VetrivelRavi Жыл бұрын

Appreciate it mate....

@ThePenguinclasses Ай бұрын

Relly helped me in my internship!

@beaubreau Жыл бұрын

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

@VetrivelRavi Жыл бұрын

Glad it was helpful!

@agilitydeveloper7627 2 жыл бұрын

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

@VetrivelRavi 2 жыл бұрын

Glad I could help

@nicolassuarez2933 Жыл бұрын

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

@limendime3720 Жыл бұрын

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

@VetrivelRavi Жыл бұрын

Glad it was helpful!

@daniellemansfield1532 11 ай бұрын

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

@mdshamsurrahmanarif6783 2 жыл бұрын

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

@VetrivelRavi 2 жыл бұрын

Glad I could help

@araputrevor5103 Жыл бұрын

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

@VetrivelRavi Жыл бұрын

You are very welcome

@chetan6896 4 ай бұрын

Clearly explained and I executed successfully 🔥

@sanatanchakravarty3941 Жыл бұрын

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

@VetrivelRavi Жыл бұрын

Awesome, Glad I could help you

@macieq44 Жыл бұрын

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

@SUGGUYASWANTH Жыл бұрын

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

@i_Mordercag1 6 ай бұрын

Music nostalgia :)

@billyfrcs19 2 жыл бұрын

Thanks Indian guy on youtube.

@VetrivelRavi 2 жыл бұрын

Appreciate it thank u

@NaturalBeautyEverywhere 2 жыл бұрын

excellent video. 100% working

@VetrivelRavi 2 жыл бұрын

Glad to hear that

@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

@VetrivelRavi 2 жыл бұрын

Glad it was helpful!

@denhamk 10 ай бұрын

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

@IrfanShaikh. 5 ай бұрын

Nice Explanation. Thanks for the help...

@creativetutorial69 2 жыл бұрын

Your explanation is about great quality Thankyou :)

@VetrivelRavi 2 жыл бұрын

So nice of you

@minhhoahuynh6625 10 ай бұрын

thanks bro very much from VietNam 43 .

@animefusion474 11 ай бұрын

Great tutorial and in detail. Thank you bro.

@serdartoren 11 ай бұрын

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

@PeterOne24 Жыл бұрын

Very helpful highly recomended this chanel

@VetrivelRavi Жыл бұрын

Glad you think so!

@PeterOne24 Жыл бұрын

@@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.

@rahultomer126 Жыл бұрын

thank you for this tutorial really amazing for beginners

@adrianfernandez1621 Жыл бұрын

Very helpful. Well done 🎉🎉🎉🎉

@faygio 9 ай бұрын

Thanks brother, this is very useful.

@rmaravind940 Жыл бұрын

Informative video ever helped me a lot bro Tamil🔥🔥

@VetrivelRavi Жыл бұрын

Glad to hear that

@miguelvelascodev Жыл бұрын

you are awesome man, thank you so much !

@Coder_of_Bihar_0005 6 ай бұрын

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

@Atulpai2004 23 күн бұрын

Thank youuu

@MdAzad-hc3le 6 ай бұрын

Thank You So Much Sir

@jadida2288 Жыл бұрын

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

@dharmendrasingh-tb2qw Жыл бұрын

Thank you sharing a knowledge

@gopixus Жыл бұрын

Good explained, thanks

@crakkistim Жыл бұрын

Good tutorial! Thank you so much

@YPTechDATIA 2 жыл бұрын

very nice i was looking for this tutorial

@VetrivelRavi 2 жыл бұрын

Glad I could help

@DouglasMbugua 5 ай бұрын

nice tutorial! Thanks alot

@alphagaming5432 5 ай бұрын

Thank You so much It Helped me

@bhavinravalia9285 Жыл бұрын

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

@VetrivelRavi 11 ай бұрын

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

@rufusodion8878 19 күн бұрын

Thank you so much

@user-jv9hs2dh2i Жыл бұрын

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

@usamashaikh3366 2 жыл бұрын

Thanks Man

@VetrivelRavi 2 жыл бұрын

Glad I could help

@rajyadav8415 2 жыл бұрын

thanks bahiya for this awesome content❤❤👍👍

@VetrivelRavi 2 жыл бұрын

Most welcome 😊

@amazingbrain4057 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.

@VetrivelRavi 2 жыл бұрын

Will do soon

@velsmusics326 Жыл бұрын

thank you so much for your beutiful video

@GreenGames2k 4 ай бұрын

Thankyou for your work

@rizvi424 Жыл бұрын

helpful tutorial thanx sir

@bintouongoiba1217 9 ай бұрын

very good, thanks you !

@themigliore 2 жыл бұрын

it works for me, thanks

@VetrivelRavi 2 жыл бұрын

Great!...

@ginacarvajal6763 10 ай бұрын

Thank you very much.

@DrMorax 9 ай бұрын

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?

@anastasiaivashchenko6338 2 жыл бұрын

WOW! Great tutorial!

@VetrivelRavi 2 жыл бұрын

Thank you! Cheers!

@sahilzore867 Жыл бұрын

thanks buddy nice videos

@petyrevengestories 2 жыл бұрын

Thanks, it was great

@VetrivelRavi 2 жыл бұрын

Glad you liked it!

@sumantech10 Жыл бұрын

thank you so much

@kensleylewis 2 жыл бұрын

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

@VetrivelRavi 2 жыл бұрын

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

@VetrivelRavi 2 жыл бұрын

Yes i do check this video kzfaq.info/get/bejne/iKeHe7uDubG4eKs.html

@steviefrank5651 Жыл бұрын

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

@user-ti6rr6no4m 6 ай бұрын

same here, there's issues on initialize firebase

@ShreyasGandhi-ij3qz 4 ай бұрын

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

@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.

@ragavidurai23 15 күн бұрын

Hey its really working 🎉thank you but i had a doubt how can you take the cdn link

@ashamurmu 10 ай бұрын

Thank you!

@kuristo8115 3 ай бұрын

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

@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?

@iamkrishnendudas 2 жыл бұрын

You've only use the Firebase Real-time database, then why you've created a Firestore database??

@VetrivelRavi 2 жыл бұрын

Sorry I didn't mean to...Just want to show it....

@alexandracynthia5223 Жыл бұрын

thank u very much, it works very well! now i need an example about how to show firebase information on a html page please help me

@user-ts2dr1os1c 2 жыл бұрын

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 2 жыл бұрын

always maintaining the scripts in separate file would better

@sudharshinijothikumar4909 14 күн бұрын

thankuuuu

@sg8nj Жыл бұрын

Amazing👍

@VetrivelRavi Жыл бұрын

Thank you! Cheers!

@saqeebpatel4279 4 ай бұрын

How can we display the saved in the database in a web page?

@etherealize 5 ай бұрын

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

@raffph Жыл бұрын

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

@phamquan1358 5 ай бұрын

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

@ahmadsy1000 Жыл бұрын

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

@simothedeveloper Жыл бұрын

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

@Wangui.. Жыл бұрын

Mine is not showing the databaseurl pls help

@evrythingforyou5490 2 жыл бұрын

best onee....

@VetrivelRavi 2 жыл бұрын

Thank you

@DoomDashDevil 2 жыл бұрын

Thanks :)

@VetrivelRavi 2 жыл бұрын

No problem!..Happy coding

@viveknikam5509 2 жыл бұрын

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

@VetrivelRavi 2 жыл бұрын

Did you defined the script tag in the HTML

@Toussaintiradukunda Жыл бұрын

thank u soo much

@sreemedhaetta350 9 ай бұрын

do we need to install any extensions in vs code?

@kadevil5840 Жыл бұрын

thanks a lot bro

@VetrivelRavi Жыл бұрын

Always welcome

@vishalaurora9631 Жыл бұрын

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

@justinalmodovar8978 8 ай бұрын

how can i put image to the firebase

@user-bj2ue8wn5t 11 ай бұрын

Bro firebase is not defined error came here what need to do

@rohandoshi6337 Жыл бұрын

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 Жыл бұрын

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 Жыл бұрын

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

@VetrivelRavi Жыл бұрын

You should write the scripts in your index.html

@baibhavipandey4814 9 ай бұрын

somebody please help I'm getting firebase not defined error

@sazedurrahman1594 2 жыл бұрын

Wow!

@VetrivelRavi 2 жыл бұрын

cheers mate

@coffee9028 Жыл бұрын

thanks

@VetrivelRavi Жыл бұрын

Welcome

@denhamk 10 ай бұрын

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 10 ай бұрын

need to see the code...

@denhamk 10 ай бұрын

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

@arinjayaggarwal19 2 жыл бұрын

Nice

@VetrivelRavi Жыл бұрын

Thanks

@tranliem06 Жыл бұрын

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

@A1Loaded 11 ай бұрын

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 11 ай бұрын

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

@A1Loaded 11 ай бұрын

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

@A1Loaded 11 ай бұрын

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

@VetrivelRavi 11 ай бұрын

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