React: Send email from contact form without server code - Email.js Tutorial

hey what's up everyone so right here i am at my portfolio and at the contact section i added this cool feature where i have a contact form and i can be able to like send a message to my email through this contact form and the cool thing is that i didn't make use of uh any backend code i'm using react and an email platform called email.js so right here if i go ahead and type charles and then right here include an email ciao gmail.com and then right here we have a message test message and i go ahead and send i'll be able to get this email at my uh gmail so right here i have also a cool pop-up message sent and now uh this is how i get it so it is from charles.dev and uh like it's from charles email the user email and then the text message and email sent via email js.com so i want to show you how to implement this feature and it's actually very easy to set it up also if you want to create a portfolio like this one i have a complete course i have both a premium version and a free version here on youtube so i'll leave a link at the description section below so that you can as well create a cool portfolio site just like mine and i'll go ahead and jump into email js and as you can see email js uh can send email directory from javascript no server code are needed okay and you can create an account for free the pricing plan we have a free version where you can get up to 200 uh emails monthly okay and this is good enough if you're just starting out so just go ahead create an account make sure you verify the email and once you log in you'll get into the dashboard it looks like this way and at the email services right here you won't have anything but you can go ahead and add new service now we have gmail outrook yahoo and many others so the most common one is obviously gmail so you'll go ahead and click on gmail and then you'll come here connect account and you will select an account that you want to connect so i'll go ahead and connect to charles right here gmail and make sure you select all the three services that will be listed uh two will be auto selected but make sure you select the third one also and then you'll click continue okay and then after that you'll go ahead and create service and you'll get an email which is a test email to verify the configuration okay so once you do that it will appear here and this is what i have here the next thing that you want to do is to create an email template so you'll just click on uh create new template and you'll get something like these okay so i have clicked on my already existing one so you'll get something like this and right here you in you will include the subject and then right here from name is the name that you will include right here charts dot dev that is why you saw that that message came from charts dot dev so this from name is this one let me show you again uh this one right here and then a new message from this one okay and then right here from now this is the user name like the person who is sending you the email so these name right here and then right here we have email user email that will also be this one right here and then the message that will be the message okay so create an email template similar to this one and uh yeah right here you will include uh which email you want to receive to like once that message is sent where should that message go so it should go to my email right here and then uh yeah that is all you need to do and you can still further you can include block codes you can include italics and uh yeah many many stuff even links okay and then you'll go ahead and save your template once you create your template you can come to docs so i'll open these docs in a new tab and then you scroll at the very bottom we have examples and click on react if you are using react and right here we have like a complete example so you won't even like actually need to do much okay so now i'll open my code and at my code i just have a component called contact i'm studying stuff with stilled components down here so these are just styles don't worry too much about them you can style however you want and now right here i have the contact placeholder so what i want us to do is to copy what we have right here and transfer to our component so i can go ahead and copy the form so i'll write the form right here and then i'll go ahead and paste it here and i'll go ahead at the very top so you can see on submit we are calling this a send email so i'll go ahead and copy this send email right here together with this user f why we are defining const form so i'll copy that and you can go ahead just before the return statement you can paste it here and then another thing that i need to do is to import uh email js from at email.js and also import userf from react so you can just like copy these two and i'll paste them at the very top so you need to install this one at email.js stroke browser okay and i have already done that and you can install the specific function that i'm using so uh right here at email.js uh stroke browser the version that i'm using is 3.4.0 so if things doesn't work as expected on your side uh it might be because of version a difference so to install this one you can just run npm i and then add email js stroke browser so i'm expecting that you are familiar with the react and you know how to perform installation so you run a code like this okay and pmi at email.js stroke browser so once you do this let's explore what we have right here so i'll go ahead and save to autoformat everything and uh let's start from our form and understand how these will work out so now at the name here we have user name so this is the input field for the name we have this username so this must be the same as what we have at our template okay so at the template here so if you want this from username to be there this username right here must be the same with this one right here so if you used something else maybe just name uh make sure that also this one is just name so user email right here must be the same as this user email right here after the name okay and then for the message name message that should also be the same as message right here so if you use a different variables like uh my message make sure that also in your phone you make use of my message okay and then what we are doing here we are firing on submit event and then we are calling send email function right here send email function right here and what we are doing we are making use of e dot prevent default to prevent refresh and then actually we are calling mljs.send form and right here what you have is your service id so how to grab your service id just go to email services and this right here is the id so you can highlight it that is the id uh actually it opened on this pop-up you can just write this one copy that id and go ahead and paste it here and if this code will be fabric you can press this on an environment variable so i'll paste it there and the next thing that we have is your template id so to get your template id go to email templates and this right here is your id this one let's go to settings and this is your template id so you can copy that and you can paste it here paste it there and then all right here we have form dot current so this will get our contact form right here and then email js will know what to do with it okay and how we are getting this form is by making use of the use left hook we are invoking it right here and creating a constant called form and then right here we are saying rate reform and now when you say form dot current uh whatever will be here is our entire form right here and email js will know how to extract the name uh for each of the fields and their values and it will know what to do with them so you don't need to worry about it okay and then right here you need your user id so you your user id you can get it from integration and then when you scroll down here you'll see api keys user id so you can grab this copy that and go ahead and paste it here and then that's all you need to do and your form will be functional so right here we have console.log you can like log the text and stuff so right here let's also say that it was successful so console.log message sent so in my contact form i made use of react justified show the user that that request was successful and then in case of an error you can show the error so i'll go ahead and save this and then i'll open uh this contact form this is the contact form that i have the name the email the message and we have the send so let's try it and see if we can send something to my email so i'll go ahead and say uh my name is ciao email is uh let's say test email dot com uh also let's include the name youtube here to make sure that you are getting the correct message ciao youtube is my name and the message is test message and then i can go ahead and send let's see if we get the logs okay message sent now i'll go to my email and see if we are getting it and here it is our youtube uh test email test message and this is coming from email.js and that is all you need to do to like send uh the message from a form like this one and the settings for this phone i made use of styled components i will upload this card on github and you can get it from there if you want to make use of my own styles right here so i'll see you on the next one please make sure you subscribe for more cool videos just like this one i focus on content around react node.js css and so on so this is my channel i have cool content monster react card operations next gs and many more so check out my channel if you like the content make sure you subscribe and i'll see you in the next one

Channel: Chaoo Charles

Views: 150,644

Keywords: chaoo charles, chaoocharles, chaoo, charles, react send email, emailjs, contact form, react.js tutorial

Id: bMq2riFCF90

Length: 11min 48sec (708 seconds)

Published: Wed Mar 23 2022