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

Подписаться 3,6 тыс.

Просмотров 48 тыс.

50% 1

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/shanjairaj7/React-...
📕 GUIDE TO DESIGNING BEAUTIFUL USER INTERFACES:
*USE PROMO CODE **awesomeui200* TO GET 20% OFF
📙 Purchase the Book here - bit.ly/purchase-designing-ebook
🖥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 RU-vid 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.

Опубликовано:

2 авг 2020

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 123

@prim_plup 3 года назад

But how can i get it to send to my email not just firebase?

@pedrojunior4516 Год назад

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);

@dipakmandal3004 Год назад

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

@ziklover1 2 года назад

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

@imakethesites3048 2 года назад

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.

@josejimenez7502 2 года назад

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

@JuanFlores-be8sl 3 года назад

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

@ShanjaiRaj 3 года назад

Thanks, you too!

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

@beirbbavs2558 9 месяцев назад

thank you sm you make it so easy

@astackzzzz277 3 года назад

This was an amazing tutorial! Thanks!

@ShanjaiRaj 3 года назад

Your welcome Adonis, Glad you liked the video!

@joshuaajagbe5096 2 года назад

Great tutorial. Thanks man.

@hsuan561 3 года назад

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

@ShanjaiRaj 3 года назад

More to come!

@rajeshweb7594 3 года назад

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

@ShanjaiRaj 3 года назад

Thanks Rajesh.

@tobyroy336 2 года назад

Really brilliantly explained. Thank you

@ShanjaiRaj 2 года назад

Your welcome

@dipakmandal3004 Год назад

very nice tutorial.Great video dear raj sir

@ayu6770 3 года назад

Thanks brother this video helps me a lot

@maiuranloganathan4785 3 года назад

Thanks for this! Great video

@ShanjaiRaj 3 года назад

Thanks.

@MabelEkemezie 10 месяцев назад

I love this Thank you so much brother 😎😎

@franklinlima2571 3 года назад

Good job! It helped me a lot

@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

@pirateworld665 Год назад

Thanks very helpful 👍🏻

@tejalbhavsar4610 3 года назад

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

@ShanjaiRaj 3 года назад

Thanks, will do..

@simdrew07able 2 года назад

Thank you so much!!!!

@crazeislive_cil 3 года назад

Great work.... you absolutely deserve subscribe.

@ShanjaiRaj 3 года назад

Thanks bro!. Thanks for the sub!!

@saitejagatadi9711 3 года назад

Super explanation

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

@gerardorodriguezdelgado1065 3 года назад

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 3 года назад

Glad it was helpful!

@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

@abhiavasthi624 2 года назад

may god bless you buddy.

@mrsingleb 3 года назад

Great Tutorial. How to impliment a notification system?

@keshavsaini6755 3 года назад

Thank you bro🔥🔥

@ShanjaiRaj 3 года назад

No problem

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

@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

@errinwright 3 года назад

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

@joseph2073 2 года назад

thanks a lot :)

@karaokewaala9107 2 года назад

Thank you so much.

@ShanjaiRaj 2 года назад

You're welcome!

@reyamkareem4807 3 года назад

Great one thank you

@ShanjaiRaj 3 года назад

Glad you enjoyed it

@STARTUPPROJECTS 3 года назад

Nice work👍👍

@ShanjaiRaj 3 года назад

Thanks bro

@mohammaddh8655 3 года назад

thanks a lot

@andresbustamante972 3 года назад

Thank you crack!

@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

@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

@fynnlichtenberg 3 года назад

Thank you so mutch

@ShanjaiRaj 3 года назад

Your welcome Fynn

@mraravind1111 2 года назад

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

@GMPGIRI 3 года назад

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

@Dallakjan1 3 года назад

Thanks a lot

@ShanjaiRaj 3 года назад

You're welcome

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

@rajeshjakkawar3338 2 года назад

Its working 😎😎😎

@code3144 3 года назад

thanks!!

@ShanjaiRaj 3 года назад

You're welcome!

@zeeamfashion 2 года назад

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

@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

@saroshahmed7097 3 года назад

is this data going to cloud??

@shivamvora2285 3 года назад

what should i do ?

@kamalsinghkhanna8143 Год назад

how to send data stored in firebase to our email

@debabratabasak6031 3 года назад

Thank you so much

@Doom5000 3 года назад

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

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

@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

@rajeshweb7594 3 года назад

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

@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

@DeepakRangaAcE 2 года назад

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

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

@lousilverman4284 3 года назад

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

@mmazzucco 3 года назад

me too, could you solve this?

@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

@akash214singh 3 года назад

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 3 года назад

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.

@Angela-Gee Год назад

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

@logospod-cast9574 2 года назад

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

@ShahidiAcoustic 2 года назад

You ever figure it out? I have the same issue

@logospod-cast9574 2 года назад

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

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

@sureshkumar000 Год назад

Please validate the email

@pubududilshan4769 2 года назад

Form Validation ?

@ShanjaiRaj 2 года назад

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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-TAvPI_HC4Mk.html&pp=sAQA.