Build a Contact form using React and Firebase

No video

Build a Contact form using React and Firebase - Hooks, Cloud Firestore

Рет қаралды 49,225

Күн бұрын

In this video, we will learning how to create a contact form using React.js and store those details in Firebase and we will be using the Cloud firestore. Firebase makes it easy to do backend operations, so, If you are interested in learning more Firebase, let me know by leaving a like and I'll make more videos on React and Firebase.
⌨ Source code - github.com/sha...
📕 GUIDE TO DESIGNING BEAUTIFUL USER INTERFACES:
*USE PROMO CODE **awesomeui200* TO GET 20% OFF
📙 Purchase the Book here - bit.ly/purchas...
🖥TOOLS OF THE TRADE:
💻 Laptop - amzn.to/2Wr7Wyg
⌨️ Keyboard - amzn.to/2WqMeux
🖱️ Mouse - amzn.to/392dg0d
📧 Drop me an email for any questions, suggestions etc - shanjairajvlogs@gmail.com
GET IN TOUCH:
If you follow me on Instagram(shanjai_raj) or Twitter(shanjai_raj), drop me a message saying you came from my KZfaq channel. It'll help me to know my audience and connect with each and every one of you.
🎥 Instagram - / shanjai_raj
🐦Twitter - / shanjai_raj
IF YOU WANT TO SUPPORT ME:
🆘 Subscribe - bit.ly/subscribe-and-support
If you have any questions or any inquiries, the best way to reach me is to drop me an email. I will reply to your email as soon as possible.Thanks for watching, and let's meet in the next video.
*Some of the links are affiliate links, therefore, if you use those link to make a purchase, I may get a commission off that referral. It won't cost you any additional money. Thanks for the support.

Пікірлер: 122

@dipakmandal3004 2 жыл бұрын

I have created my first backend successfully with your video watching. Thank u soo much sir for uploading this video.

@pedrojunior4516 2 жыл бұрын

Nice tutorial! For firestore v9 would be: import { collection, addDoc } from "firebase/firestore"; // Add a new document with a generated id. const docRef = await addDoc(collection(db, "cities"), { name: name, email: email, message: message, }); console.log("Document written with ID: ", docRef.id);

@josejimenez7502 3 жыл бұрын

Verry helpful kindly consider a follow-up video demonstrating the addition of form validation upon submit

@rajeshweb7594 3 жыл бұрын

sir This is the an easy explanation that i never got from others..

@ShanjaiRaj 3 жыл бұрын

Thanks Rajesh.

@gerardorodriguezdelgado1065 4 жыл бұрын

This is what I was looking for. Just so you know, the audio quality is no good, but anyway, this was a very clear tutorial. Thank you very much!

@ShanjaiRaj 4 жыл бұрын

Glad it was helpful!

@imakethesites3048 3 жыл бұрын

Great video, thanks! Now I just need to find out how to receive notifications of these form submissions or else have them forwarded to my inbox.

@JuanFlores-be8sl 3 жыл бұрын

You are the man, works perfectly!! Thank you so much. Many blessings to you sir!!

@ShanjaiRaj 3 жыл бұрын

Thanks, you too!

@astackzzzz277 3 жыл бұрын

This was an amazing tutorial! Thanks!

@ShanjaiRaj 3 жыл бұрын

Your welcome Adonis, Glad you liked the video!

@dorinabalaur2226 3 жыл бұрын

omg thankyou so much, i have been searching for a good solution for days and this really helped

@ShanjaiRaj 3 жыл бұрын

Your welcome.. I am glad it helped you. I am working on more videos like this.

@hsuan561 3 жыл бұрын

great work ..... hope to see more videos about react from your channel...

@ShanjaiRaj 3 жыл бұрын

More to come!

@alexleonardorodriguez8829 3 жыл бұрын

wow! this help me a lot bro, thank you so much, very simple and direct ! new subscriber my friend jeje

@ShanjaiRaj 3 жыл бұрын

Thanks a lot Alex... Glad you got some value

@joseph2073 2 жыл бұрын

the cleanest and simplest video to connect backend :) thank you so much.. just remeber : *npm install firebase@8* write this .. else it'll not work and god bless u shanjay :)

@anjalipatel9646 Жыл бұрын

I installed npm install firebase@8 but it is not working any other solution for that

@joseph2073 Жыл бұрын

@@anjalipatel9646 no idea bro .. u can still try with other version

@maiuranloganathan4785 3 жыл бұрын

Thanks for this! Great video

@ShanjaiRaj 3 жыл бұрын

Thanks.

@saitejagatadi9711 3 жыл бұрын

As you are a react developer How your daily work looks like? How you make something happen (coding related) when the tasks are assigned to you

@ShanjaiRaj 3 жыл бұрын

Hi, yeah I am a react Developer. Actually, to answer your question, I am actually, working on making a Day in the life video and show how I work and I get work done. So, I hope that will help you. A Anyway, let me know if there is any help you need

@ayu6770 3 жыл бұрын

Thanks brother this video helps me a lot

@ziklover1 2 жыл бұрын

Thank you so much for this tutorial, helped out a lot.

@tobyroy336 3 жыл бұрын

Really brilliantly explained. Thank you

@ShanjaiRaj 3 жыл бұрын

Your welcome

@MabelEkemezie Жыл бұрын

I love this Thank you so much brother 😎😎

@mrsingleb 3 жыл бұрын

Great Tutorial. How to impliment a notification system?

@crazeislive_cil 3 жыл бұрын

Great work.... you absolutely deserve subscribe.

@ShanjaiRaj 3 жыл бұрын

Thanks bro!. Thanks for the sub!!

@beirbbavs2558 Жыл бұрын

thank you sm you make it so easy

@tejalbhavsar4610 3 жыл бұрын

simply to the point and greate explaination please make more videos on reacat firebase

@ShanjaiRaj 3 жыл бұрын

Thanks, will do..

@errinwright 3 жыл бұрын

20:00 add is better for user signup stuff, unless you want to use set for overwriting

@VikasJo 3 жыл бұрын

Good lesson Shanjai. But i have one question. so, then people write me a message, i get it in firebase Database. so everyday i have to go ant check there are emails for me, or not. So how can i make that the person, who send me an email, i could get to my private email alert or something... :) ? thanks for answer

@joshuaajagbe5096 2 жыл бұрын

Great tutorial. Thanks man.

@abhiavasthi624 3 жыл бұрын

may god bless you buddy.

@franklinlima2571 3 жыл бұрын

Good job! It helped me a lot

@dipakmandal3004 2 жыл бұрын

very nice tutorial.Great video dear raj sir

@pirateworld665 Жыл бұрын

Thanks very helpful 👍🏻

@saitejagatadi9711 3 жыл бұрын

Super explanation

@simdrew07able 2 жыл бұрын

Thank you so much!!!!

@Doom5000 3 жыл бұрын

When I hit the submit button my application won’t store it in the database anybody know why???

@ZeusHunter 3 жыл бұрын

this is good for storing data but not something i was looking for as how will u let the web page owner know that there is a new contact form. i guess you'd have to use Firebase event triggering and set a different Firebase cloud function to send the info to the owner.

@karaokewaala9107 3 жыл бұрын

Thank you so much.

@ShanjaiRaj 3 жыл бұрын

You're welcome!

@diegolozano8539 2 жыл бұрын

Great video man, is there a way to make an inputfield that sends the data as numbers to Firebase instead of a String?

@0xffffffffffffffffffffffffffff 3 жыл бұрын

I get an error in a js alert() - Missing or insufficient permissions.

@mmazzucco 3 жыл бұрын

me too, could you solve this?

@joseph2073 2 жыл бұрын

thanks a lot :)

@fynnlichtenberg 3 жыл бұрын

Thank you so mutch

@ShanjaiRaj 3 жыл бұрын

Your welcome Fynn

@keshavsaini6755 3 жыл бұрын

Thank you bro🔥🔥

@ShanjaiRaj 3 жыл бұрын

No problem

@reyamkareem4807 3 жыл бұрын

Great one thank you

@ShanjaiRaj 3 жыл бұрын

Glad you enjoyed it

@TheNarstonerz 3 жыл бұрын

Hi mate, thank you so much for this video. Now if i need to get these input value from firebase to my email adress, how can i manage this?

@romanakhatun9773 3 жыл бұрын

Thanks a lot. Can you create, when someone sends a message, that message will go directly to Gmail. Just create reactjs language.

@ShanjaiRaj 3 жыл бұрын

Yes I can

@saicharanpogul 3 жыл бұрын

@@ShanjaiRaj If you could make a video on that, once the submit button is clicked the message is directed to the given email(my) and also send the thank you for your contact email to the sender(the user), would be really helpful or can you provide a right resource for what i need.

@STARTUPPROJECTS 3 жыл бұрын

Nice work👍👍

@ShanjaiRaj 3 жыл бұрын

Thanks bro

@shivamvora2285 3 жыл бұрын

what should i do ?

@mraravind1111 2 жыл бұрын

Added to this how do we also notify the recipient via email?

@marcelodelvalle8039 3 жыл бұрын

Bro, how are you? First of all, thanks for the video, it is excellent, very good! I have a problem, in the firebase cloud console, inside the database, in the dates, it returns "null". Why will it be? thanks

@Angela-Gee Жыл бұрын

this code is not working for Firebase v9.. plz upload a new video with correct code

@mohammaddh8655 3 жыл бұрын

thanks a lot

@andresbustamante972 3 жыл бұрын

Thank you crack!

@junecsnp6986 3 жыл бұрын

how to fix it, Module not found: Can't resolve './firebase' , help me, please.

@Kenndy16 3 жыл бұрын

I ran into similar error. What I did is stop the program from running and then do "npm start" again and it works.

@Dallakjan1 3 жыл бұрын

Thanks a lot

@ShanjaiRaj 3 жыл бұрын

You're welcome

@pojabanana3815 2 жыл бұрын

great video! how would we link this to an authenticated user? for eg. a user uses their google account to sign in and submits a form which is unique to them

@bluelion978 2 жыл бұрын

./src/firebase.js Module not found: Can't resolve 'firebase' in Any solution??

@programmingbykillerx9678 2 жыл бұрын

you are probably using v9 via command "npm install firebase" . Use "npm install firebase@8"

@hellasanonumos8583 2 жыл бұрын

@@programmingbykillerx9678 hello there i had also the same problem i cant export and import the 'db', but i installed firebase@8 and solved my problem.Thanks a lot, but where was the issue?Any other solution with the updated firebase?

@tomrolfe8723 2 жыл бұрын

@@hellasanonumos8583 add import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; to the top of the firebase.js and at the bottom export const db = firebaseapp.firestore();

@hellasanonumos8583 2 жыл бұрын

@@tomrolfe8723 Hello Tom, i whrote an answer but i dont know why is not published.You are completely right with your comment that was the solution.Do you have any instagram or social media maybe for future helping each other?Thanks a lot and wish y a nice day

@rajeshweb7594 3 жыл бұрын

Sir instead of database it is showing me that Real time database is it same

@DeepakRangaAcE 3 жыл бұрын

getting this error "TypeError: Cannot read property 'collection' of undefined "

@GMPGIRI 3 жыл бұрын

hi, do you know how to send the data as email when database is updated?

@rajeshjakkawar3338 3 жыл бұрын

Its working 😎😎😎

@zeeamfashion 2 жыл бұрын

i am getting this error Internal/modules/cjs/loader.js:905 throw err; ^ Error: Cannot find module './managers/options' Require stack:

@code3144 3 жыл бұрын

thanks!!

@ShanjaiRaj 3 жыл бұрын

You're welcome!

@ruslanogarkov808 3 жыл бұрын

Man you're simply the best 👏🏻👑 Thank you for your wonderful tutorial. Do you know how to add even the document attachment to this form?

@ShanjaiRaj 3 жыл бұрын

Thanks bro! Yeah you can just have an attachment attribute and then attach the file to the email. Just do a search for it. Thanks a lot bro. Glad you found it helpful

@debabratabasak6031 3 жыл бұрын

Thank you so much

@kamalsinghkhanna8143 Жыл бұрын

how to send data stored in firebase to our email

@saroshahmed7097 3 жыл бұрын

is this data going to cloud??

@jiromusikyan964 3 жыл бұрын

Hi bro good work,,, how you set emoji???

@ShanjaiRaj 3 жыл бұрын

You mean just a emoji text, you can just have it in a span tag

@logospod-cast9574 3 жыл бұрын

Greetings, I followed the steps, but it show me "Module not found: Can't resolve 'firebase' in"

@ShahidiAcoustic 3 жыл бұрын

You ever figure it out? I have the same issue

@logospod-cast9574 3 жыл бұрын

@@ShahidiAcoustic Yes, I was using firebase 9 and all tutorials and youtube guides are using firebase 8.

@akash214singh 4 жыл бұрын

Hey man.....I am beginner in React js.....I learned from Udemy (Maximilian)....any tips for me to how can I get my hands dirty on React....I know every stuff like theoretically but don't know how to start.....I knew everything you did here but wouldn't have done that on my own if I had to do......any tips to master react js and code spontaneously just like you?

@ShanjaiRaj 4 жыл бұрын

Hey Akash, thanks for the comment. To master React is to keep practicing it, but there is more to it. I help people to become better at coding by doing free classes online. If you are interested, send a message to this email - shanjairajvlogs@gmail.com

@shivasrivastava3119 3 жыл бұрын

I am getting this error. Can anyone helps me with this- src\components\contact.js Line 6:28: React Hook "useState" is called in function "contact" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter react-hooks/rules-of-hooks Line 6:28: 'useState' is not defined no-undef Search for the keywords to learn more about each error.

@ShanjaiRaj 3 жыл бұрын

Yeah, that is error is because you are using useState outside of a components, or inside a function. Use it inside of the components but outside the return statement.

@errinwright 3 жыл бұрын

How to Store data under a Logged in User?

@ZeusHunter 3 жыл бұрын

create a new collection called users. if u want authenticated users, there is easy authentication setup in Firebase docs available check that out. then once u get user data, simply do the same like adding all those properties to the object and when u create a document in users collection set document id to username and set all data to the fields like he showed in the video.

@shivamvora2285 3 жыл бұрын

i've make same as you but i get TypeError: firebaseApp.firestore is not a function

@ShanjaiRaj 3 жыл бұрын

Oh ok. Anyway, can you send the main firebase.js file to my mail shanjairajvlogs@gmail.com and I'll try to look at the error, that's how I can see the code.

@shivamvora2285 3 жыл бұрын

@@ShanjaiRaj you use anydesk sir??

@pubududilshan4769 3 жыл бұрын

Form Validation ?

@ShanjaiRaj 3 жыл бұрын

Hi, yeah we can add it. It would be to just simply check if the email and the password is valid. I have made a video about different forms of form validation - kzfaq.info/get/bejne/iqemg6yQramYfZ8.html&pp=sAQA.