How to send emails using JavaScript through EmailJs

hey guys welcome back so in this tutorial i'm going to show you guys how to use um a library i found here called um email.js for you to send email directly using javascript so normally you will want to use them some somewhat language like php or php miller to send you to send emails using their um php or the smtp link using python to send your email so whatever i could tell you that you don't need actually those to send you you don't need any servers like code language to send your emails you could just do that directly using javascript so this is what we're going to be doing now in this tutorial i won't be showing you guys how how this form is made how do you descend on me i'm only going to be talking about the functionality using this email js library here okay so if you go into my folder you go into this folder here you can also get this folder from github directly i might get up here so you can just see this two fires here i just have the html on this status files here it says contains some default styles here okay i also added some animation i just went when the um one day email is being sent through this library okay so all you need to do just come to email gs.com once you sign up all you need to do is create an account once you create an account console with your what your services are once you've done all this what's going through the what's the critical account you could just sign sign or sign up here so i'm already signed signed in you comment to your dashboard you could um they'll be taking you to his default homepage that dashboard okay so i already have a service here called gmail so you could you could also add other services this service is actually the kind of platform that allows you to send email and we have the by default we have gmail aol fast email icloud mail.rule outlook yahoo yandex you could use any of these any of these services in sending your email okay hope that makes sense then all you just need to do right now is to come to email templates okay once you've gotten to this dashboard here come into email template here once it goes into this place immediately i have a animal temperature created so all i'm going to do is create a new template here okay i'm going to give this template so this particular subject is actually the subject when this when the email is being sent from so i'm gonna just put it from the front name here i'm gonna leave it by default here it's a new message from then this will be the message the message which has been sent to the owner of the messenger that is this so name here then the message will be here right so i'm gonna leave this by the defaults then come here you can also add in your email this way you want to visit this email by default i'm going to use my gmail um gmail once you've done that you will leave this blank then come here to um see just save this okay um as you can see you can just check edit some things here i've seen new message from contact form because that's what we're going to be putting using just javascript okay we made it from contacts now once it's done you're going to see these two buttons here playground and test it you will wait to the playground when you click on this it's going to take you to another online editor called codependent io that allows you to test all these inside the editor okay so all i just need to do just to set this value make sure this tool name and from name have been set or you could just empty because this will be done directly using javascript okay so click on destitutes just click on destitute right here i just need to you i need you to fill in these two gap here just to test this okay then click on send test menu so you can see it gives us 800 here that is the particular image of the scene so i'm going to check my email right now refresh this as you can see we have the email here i mean i have new you've got a new message here you've got a new message from the user the battle animation and the message here okay as you can see the subject is actually a new message from contact form right so i'm going to delete this then go back what just leave this open for now then go into this particular home page that is email gs.com then click on docs okay this will actually show you this will show you how this particular setup is in your in your application okay so just click on email js tutorial then you can click on keynote service here let me give you guys one tip more i'm going to duplicate this tab so once you've done this click on image service here you can add default image service for now i'm picking gmail as my email service here right so once you've done that once you create a new message click on it this will show you your service id and also the gmail account which is being connected that is this is my account is being connected okay then i could also come here click on integration here and this will show you how this is being implemented for now i don't want to use any um mpm store while it's not part of my manager i want to do this simply using just javascript so i'm going to click on the browser here so i'll just just copy out the script tag here copy that descriptor here as he said to start his images here's the following code snippet before the head section before the closing head section here i'm not changing this just copy paste the snippet access so just need to just copy all this code here right here then move into your editor go into html you can paste this you could paste this particular code here but now i'm going to be doing this above below here just um leave it here by default um once you've done this then this your access your user id and also your access to token copy this copy this to random id then create a new um a new script i need to put it into comments okay then i need this is user id and also the user token for once you've done this all i just need to do is to watch me as i'm gonna create this one okay and also i'll be using a library library that allows you to to override this system default alert messaging so let me show you what i mean like click on um inspect elements here and i i go into the control tab here i go into the control tab here the browser console and i click on and i type this this function called alarms and putting passing the message here okay now click on enter as you can see it shows me this system default i can use that particular library called sweet alar.js but enables me to write default browser alerts okay so all i just need to do just copy on this copy this particular script source here your cdn then go into my application put a comment then i think everything should be good to go what i just need to do right now is to take in this video taking this particular element input on this button so now to show you how the switch alerts function now right here if you go into the document here click on the document here then go down you can just test you can preview what this actually does instead of me writing a bunch of system school and javascript code to create this simple alert box i can also simply use this particular library to perform to override the defaults and browser box here so i can just click on preview right now and you can see this is actually a simple message if you go down below you will see so many alerts messaging like now for example this um what else do we have here let's look at this as you can see let's look at this awesome so you can see you can also customize the other button here okay i'm going to go back then move down below and click on this because now i need i need actually a success message and an error message and error that message here so i'm going to click on this because it said with this format because there's very many more functions to customize about that for example we can change the text on the custom button to whatever it wants so i'm going to click on this preview button as you can see this is nicely little animation changes okay then you can move down below let's look at this [Music] we also add some promise based functioning to show you guys how this okay so you can actually change this the default value the photo and that message here by changing the value of this button here and that will be done by changing passing in the text value here this because now this hour um yes is actually referencing to this button here we can change this particular icon that shows up when we click on the button by changing this success message to an error message by default they have four types of predefined and default what is it for the icon we have success we have error we also have warning and info okay so i'm going to copy all this just to test this out copy this out then i just down below to create a function for this and i'm going to put this javascript function just to show you guys i'm going to say function sorry not [Music] that says you click the button by changing to successfully send message okay i can see i've already done this then we can then change the button by default and changes to okay then this is it here because we change this icon to arrow okay here now watch this as you can see so since we know this by default we can then create multiple functions for that we have quit this success measure that is when the user successfully sends the message then also an error message that is when visa meets some parliamentarians which has been given by the inputs here so i'm going to change this to error right here i'm um please call in this function then i need um this would be a success on this but i can be successful in this area we want this to be then this text here this just recent message you want the user to uh to get this particular error message when something goes wrong so i'm gonna leave it like something went wrong message could not be sent okay because we got this text by the text but we also need another function when the user tries to submit the form or submit the message without filling in those inputs this input here so we're going to change this to our error let's just say input input empty input empty okay sorry about that i'm so sorry about it noise inputs field are required okay i'll record this let's just change this to oops let me also change this let's change this right now [Music] also just change this right okay so since we've got all these functions set now we need to write the functions particularly send the email so i'm going to put in any function called function called send them this particular function will be responsible for sending the immune okay now all we just need to just grab on this particular element here this particular this input element is specified class name okay for example the person as a customer submits the message as a class name of message most of the email as a customer email and the username as a classroom since we know all this we can then get this get this particular element okay since we have all this particular we can then get this we can have access to this by using the javascript domain method called queries selector okay so i'm going to create this quiz some variables right here you know so let's name this equals a document dot selector you can pass in the particular element so what is the image that's the username first so i'm gonna repeat this paste it four times um let's email the class email and also their message let's just msg as a class name of message also the button right here has a class name button as a class of submits okay and since we got all this we just need to do is to check whenever this particular button is clicked on do you want to show this this alex message if these inputs are empty because since we got that let's try doing the other now so we can also you can add an event listener to the bottom and click events and also a callback function you want to prevent efforts it is default actually prevent the form the the default behavior of the form from being submitted okay so do you want to check some something now gonna say if let's check if the name dot volume is empty name that volume is equal to an empty string that is if the atlantemia is empty right um you can't get the right sign for the all symbols keyboard having troubles right now okay since we have this right there then i can click on this particular space here then shifts and this sorry this right here okay since we got better notes let's down quit the second statement if um email that's value is equal to empty then copy this also or message that value is equal to what's entering so when this particular control flow statement here we don't stresses if everything here becomes true if it went where we want to call this particular function down below let's copy this function here this is right here okay now since we we've done that let's try casting it so when we click on this particular and from here without filling in the input given below you want to turn error to the user let's click on this as you can see now nothing went nothing works right now because why this function hasn't been initiated okay let's let's call the function below send me and let's try once more submit input fields are required good okay then um what we just need to do right now is rather than else else if everything in this particular function returns force that is write another function here but before that let's just um let's um create a let's just we want to change this particular function into validates because all you're doing right now is just validating the inputs here let's create enough function down below to send send me not this so once you copy this right now and i need you to paste it in your send mail function then after this uh what we need to do right now is to change the default values or before that let's try actually try if this particular function runs if this function down below run successfully you want to show this success message here suck this message here okay so let's try doing that right here let's try calling this let's try putting some buttons here and some minutes as you can see it is sure it shows anything less stress scene was the error so that casino is given below okay then all we just need to do is to uh sorry it's called this function send me if everything this particular function here runs successfully you want to call the other success function here success function okay then also you want to try um and like console.log email sorry email sent okay so if all these friends source for this actually work let's try doing this again let's try submitting form oops figures are required okay then these are putting their email and stuff like that and still missing against this serious release message let's try checking out inboxing up here we've got the message video as you can see we got this and this was actually sent from this particular string here so you want to replace this we want to replace this with the values of this object input here okay so let's try going let's go back to [Music] and also the message okay since we have all this sorry yes person here that's the name email a message here let's change this default values to the values name to the parameters above sorry and also the email and the message okay let's try these things right right right ahead of me let me delete this message here now since we know all this is working i actually included some gift animation here and i included this animation that would show up like for two seconds and then moves away so let's try um let's see let's let me comment this out and show you what i mean so this is the gif i mentioned i want to call this while the email is being sent okay so let's try to have access to it using the class name of the give you okay let's do that right away i'm going to copy this paste one more time change it to that changes to that so all you just need to do is to set the style above here set timeouts i'm sorry set time on a function and passing the particular set the timing interval that is two seconds here two seconds then set setting loader dot style dots display should be equal to what flex that will make the buddha visible then also voice phrases also onesie once the um email has been sent i want to display the buddha okay i want to add a style of display now to do the this particular function is send me didn't work let's copy this if send me a function it didn't work all you need to do is call the arrow function here down below [Music] i think something is wrong let's refresh this oh sorry sorry sorry let's try this in the set timeout right away so the loadout is will be shown by the foot once the buddha should he doesn't actually need to deliver his room and once there's a fast metal the loader will slow will be shown that it will be visible yet on the page once if everything here ops here went wrong okay if this but laugh if he's gonna be done force now see if we don't give this particular else we don't do that if everything went well the data will show first after that this particular function will be called once this function is being called this um the success okay if that makes sense let's try one more time okay let's try that one more time let's refresh the page so just let me send message okay let's try to check in the game box right now right away refresh this so we got in kind of it's a good job so let's send the message let's try going back to our helio let me go this okay let's delete this okay since we know all this is working now let's try changing some values here let's jump at least two to three okay and see what when's wrong let's see if actually this pension may be called sent because something is wrong um don't force stop expecting any other scripts down below here okay let's go back to the phone like i said something went wrong message could not be sent just for me now since we know all this is working and their display condition display now i don't know why this particular stuff is displaying okay let's call this particular statement okay display none let's turn this back to two is copy this got this is down below let's try one more time where is this 130. oh you know what you know what i'm gonna do i'm gonna try um using itinerary or operator okay so i'm going to send the email see the send me a function here and it all went well i need you to display the loader here let's call this function here call the error function here let's try doing this since something's wrong without bombing us ah man this is the fortune of programming oh this isn't cool so let's try something else i'm just like gonna look at my codes on github and see what i did here let's see what i did here i did the same thing right away okay let's see something else okay okay okay sorry let's copy this and then put it right away let's see if that works i'm actually calling this function twice let's remove this okay okay let's check something else the error message is not displayed or this just isn't displayed what's wrong with this okay you know what i'm going to do that so all we just know is that this is actually working okay then since all that is working let's check our email inbox and see if actually that if the email is working okay now we got we got a message is that this email js the send method is actually taken in three parameters number one is this service id service is what you get from this this is your service id when you is okay so i hope this tutorial makes sense um i need to find out some solution to some of the problems which you haven't before okay so if this actually makes sense i didn't i don't know i i wasn't able to show you guys how i created this but all you need to do to read these styles this particular failure it's actually a simple firing so there's nothing complex there i'm important in the google phone which is i'm also styling everything here using the the star sync what is installed you html content by default and also i'm also starting the body tag the container itself and those input boxes here and the contacts from here the container that is this particular place here this white background here and the rest are just familiar so i hope this will add some value to you if you want to get it i don't want you guys to try replacing this i wanted to replace this with your asses don't use this because this one's probably gonna upload this to youtube okay so i hope this makes sense i'll i'm gonna see you guys in the next tutorial hopefully so thank you guys for this particular tutorial i'm gonna see you next time thank you

Channel: Benrobo -Tuts

Views: 6,593

Keywords: html, css, javascript, php, mysql, sql, bootstrap, nodejs, expressjs, jquery, api, restapi, web development, ui/ux

Id: XdXo9rravmk

Length: 38min 19sec (2299 seconds)

Published: Mon May 10 2021