Creating A Contact Form With JavaScript / Nodemailer

hi guys welcome back to the channel so today i've got another video for you and we're going to be creating this um email contact form for our websites okay so it's all set up to send mouse to our even gmail account or kind of any custom email address you want really so just to show you in action um i'll just use the classic example of donald trump donald trump at whitehouse.gov in the email subject can be test message hello from donald trump like so let's find out properly and then if we submit this you can see we get the confirmation of the email was sent and then if i go to my gmail account come to our inbox you can see here so the time is now 109 there's the email received at 109 come in here and we get the um the subject which is message from donald trump whitehouse.gov test message and then the text there okay so we can get it working with gmail i'll also show you how to get it working with a custom email address just to show you i've used temporary passwords for this video and i've also created an actual account just for the purposes of this video guys okay um so if i just change this we'll use a my one two three reg account now so i have an email address called informability.com we'll just adjust who this is being sent to here so i'm sending this to my infoconability.com email now we'll save that if i come back let's just do the um the same example again so i'll say uh i'll just do something different now i'll use my partner's name and we'll say nat gmail.com um say hello connor hello connor how are you today okay and then if i do send message now see our email was sent again if i come to my uh custom domain um email sorry if we refresh this and you can see there's our new message coming just saying hello connor how are you today you can see from that gmail.com and we get the subject there okay guys that this is how you just implement your own custom email contact form on your website so i hope you enjoy it and let's get going cheers okay guys so to get started with this project you're going to need to have node.js installed on your machine okay so if you haven't got that just go to nodejs.org and just follow the relevant download instructions for your machine i'm using a mac os here but there's a windows download available as well we're going to be using node just for our kind of back end just to you know it's going to take our form data and then convert that into an email submission okay so let me just come out of this that's what i've done here i've got vs code open and you can see i've just created a brand new folder here and we're going to just you know make this from scratch so to get a node application up and running if you just go to terminal new terminal and we're just going to install some dependencies here okay so first we want to do is do npm init hyphen y and we're using the hyphen wire just to do the default values okay when we start our project and you can see that's just created this package.json file we're gonna just install two dependencies now so if we just uh do npmi and we're going to install express and we're also going to install node mailer okay which is going to be used to as i said before send the mail from our form data that we collect in the back end so let's just install those two okay and then we just want to install one more dev dependency now so we're going to say npm um i and we're going to say hyphen capital d for dev and then we're just going to say nodemon okay and this is just a dev dependency which is used to refresh our server anytime we make a change to the code so we don't have to go into the terminal manually restart it every time we want to see the changes we've made okay so if you come to our package.json file you can see we have our two dependencies here express and node mailer and you can also see we have the dev dependency nodemon here installed um in the package.json file we just need to adjust the scripts so if we just say dev here and then here this when we trigger this dev script it's going to run the following command which is nodemon uh server dot js now we're going to create this server.js file in a second but this nodemon is what we installed is a dev dependency and this is what we're going to be using in development mode just so our server refreshes automatically okay and we also want just the normal production script which is just going to say start and here do a colon and that's just going to be kind of similar we're just going to say node server dot js okay so that's our production script and that's it for our package.json file now if we come into our um kind of file directory here i'm just going to create a new file called server.js okay like so and the first we need to do is bring in express so we're going to say const express equals require express like so and then we're also just going to undo this going to create an app so we say const app equals and we're going to use that express that we just bought in okay so what this does um it's using this express and this allowed this gives this app variable here access to all the express functions like get requests post requests listen that kind of thing okay and underneath this we're going to create a port variable i'm going to say control equals process dot env dot port or we'll say 5000 okay so what this does when we're in production this port is going to be the uh environment variable pool number okay otherwise in development mode we're saying here use port 5000 okay and underneath that i'm just going to say app dot get and when we send a get request we're going to first add the option of well this is going to be argument for the root directory of our website okay so we just do a single forward slash here and then we pass in the request and the response okay and then here we just say res.send and here we're just going to say hello for now like so and then finally when we send a get request to the root directory it will just send this text hello okay to the browser and then finally we want to just make our server listen on that port that we set up here so in order to do that we'll just say app.listen and we're going to listen pass in that port variable and then we just do a callback function which will um log to the terminal we'll say console.log and we just say backticks here server running on port and here we just do a template literal and just say passing that variable like so okay so now if we just do an npm run dev which is remember is that script we set in this package.json file which will trigger nodemon server.js so this nodemong dependency will be we'll be running this server.js file okay let's do that now npm run div and you can see our servers running on port 5000 now if we go to our browser go to localhost port 5000 and you can see there's a hello rendered to the screen so that's what that's up and running now okay now the next thing i'm going to do in our file directory we're just going to create a folder called public okay and this is going to host a bunch of static files we're going to be using for this project now in order to use these static files we need to just uh add a bit of middleware okay so we can say middleware here and we're going to say underneath here we can say app.use express dot static and here we're just going to place the um file name which we're using to serve our static files which in this case is going to be this public folder okay so just type public in there um and then so if we come into our public folder i'm just going to create a html file called contact form dot html like so i'm also going to create out just um a js folder just to store our static js files create a file in here called app.js and then i'm also going to create within this public directory a css folder as well just to store our styling files so we'll say css and then we'll create a file in here just called style dot css like so okay so now i'm going to come into our contact form let's just get some boilerplate code up and running html in the title i'm just going to say contact us like so and then kind into the uh the body we're going to say create a div called form container form hyphen container and then within this we're going to create a form okay and then we can take this action out we don't need a section because what we're going to be with our form data we're going to send it to the back end using ajax okay so it won't be the usual submit action form method up here all i'm going to do is pass in a class here we'll just say class and i'm going to give it a class of contact form like so then come in the form we're going to say a h2 i'm just going to say contact here like so and then underneath this will say input and the first input is going to be the full name of the person submitting the contact form okay so i'll just say id of name and then after that we'll just say placeholder and we'll just say full name in there like so and then we'll come underneath this the next input is going to be an email input so say type email and again change the name to email and then we'll say placeholder as email as well like so and then come underneath this we'll do another text input and this is going to contain the subject of the message okay so say id subject and placeholder is subject and then finally underneath this we want to add a text area next this is going to be the body of our message we want to send so we'll say um here i can i'll actually take the name out i need a name in there just give this an id of message and we'll just say placeholder message as well like site um so let's just um come back to our server for a second because now we want to uh send this contact form html file when we visit this root directory of our site okay so i'm just going to change this res dot send to send file and here the first argument it takes in is we need to just uh add the path to the uh this contact form html file so we first need to add the name double underscore name okay that gets the current directory we're in and then after this we just concatenate this with the um the full path the rest of the path so from the root that from the directory we're currently in we want to go to the public folder and then to this contact.html so i just say forward slash public here and then forward slash contact form dot html like so and now if we come back to our browser refresh you can see our contact form is rendered to the page this looks a bit weird at the moment so i just want to make some a few adjustment adjustments in the html i'm going to come after each input here and just add a break like so okay break line element here and let's just do that after the text there as well and now if we refresh you can see they're all nicely trained underneath each other now one thing you're missing actually is the um final thing which is a submit button so we'll say submit here and then i'm going to say class because it's a class of submit and then we'll just say value and that's going to equal send message like so so now we should have our button and there it is okay so that's pretty much it um we just need to add a couple more things so i'm just going to quickly go into our style.css and just i just want to link this up to our contact form.html so here i'm just going to just say background color of red for now don't worry we will change this and then if we come to our contact form in here in the head section i'm going to say link and then we're just going to link to that style.css so all you have to do here is just say forward slash css forward slash style dot css okay and then if you come to our server we just need to add one more piece of middleware i know we don't sorry not for now what happens is here we can just say force our css as expressful no to search for this in this in the public folder okay in the in the in this public folder created here because we're using this piece of middleware called static express static so it knows to apply all these static files by referencing here like this in our html file okay so if i refresh this now you can see our background's red okay and then finally um let's just do a script source and here we're going to link to this um this js file here so here we can just say forward slash js for this js folder and then we can say app.js like so okay and then if you come in here for now just do console.log hello like so and then if we refresh go to the console you can see how hello is there in the console okay so um let's just i just want to change that font as well let's just get some google fonts on the go just to make it look a bit better google font pop-ins and then i'm just taking this regular 400 version we'll select that style get these link tags here we'll put these in our head section as well like so and then also we need to see that cnn css selector here and then we'll put that in our main global settings as well i'm also going to just adjust the margin to zero padding zero and box sizing of border box okay for our global settings so now if we refresh you can see our fonts applied and we get none of the default margins anymore so that's all working okay so that's pretty much it for our contact form.html next thing we want to do is work on our app.js file okay so the front end we wanted um actually now let's get this let's do the css first let's get the css tied up just so our form looks nice let's do that okay so if we come to star.css um underneath the uh global settings i just want to adjust let's make this a bit bigger so it takes up half the window okay i just want to adjust the html and the body elements just set the background color to this f4 f4 f4 which is kind of a light gray and then come underneath this we're going to select our form container okay and we're going to position that relative and we want uh 20 left from the screen a width for 60 and then a height of 100 viewport height just so it fills the screen vertically and i'm going to give this a background color of white okay so now you can see kind of get that sort of styling effect there going and underneath that let's select our contact form come underneath here say contact form we're going to position this absolute to the parent container which is this white section when it 10 from the top 10 from the left to give it a bit of white space i'm going to give it a width of 80 of this white container here and then a height of 600 pixels okay so now you can see when we refresh we get that kind of nice white space and then underneath this we're going to next select our input elements and our text area element which is these these parts here okay so if we um just do a width of 100 of the container so it's 80 so all these will fill out now and then we have a margin top just of two ram just to space these uh input boxes out and then we'll have a border of none just to remove this default black border and then we'll just apply a black border bottom to each element okay so just to show you how that looks now you can see we get a nice space in and we get the kind of borders okay so that's looking better and then finally what we want to do is just adjust that submit button okay so to submit i've just selected the dot submit here we're saying border 1px solid black padding of one rem align the text to the center background color of white cursor pointer and then when we hover our button we just want the opacity to go 0.0.6 just to get make it a bit see-through okay now if we refresh you can see our changes have been applied so that's that form okay and now coming into our app.js file the first we need to do here is select our contact form okay i'm going to move this console log we'll say const contact form equals and we're going to say document dot query selector and then we'll say dot contact hyphen form like so okay and then underneath this just going to add an event list into this form now we're going to say contact contact form dot add event listener and here we want to listen for the submit event okay and that's when this button down here is clicked okay so once that's clicked just do a comma and then my callback function will say pass in the events list function and then in here we're going to say e dot prevent default okay and what this does usually the default behavior when this form is submitted is it will uh refresh the page okay or it will have changed the uh the location of the page so this default prevents that okay because we're going to be sending our data via ajax uh as opposed to doing the usual form uh submission method okay so this will all work in the background and then we'll have to do any kind of page refreshing or page reloading so that's the benefits of ajax okay and then here let's just make sure this is working we can say console.log submit clicked like so so now if we refresh this come to our console in the browser and then if i go to the console here yeah press submit you can see we get that submit clicked okay so that's all working now come underneath this we don't need that console log anymore we can delete that um i'm just going to select the input elements okay so what we're saying here is um actually we can take this we can put this at the top actually i'll put these out the function so here i'm going to say let name equals document dot get element by id name she'll remember come here you can see our name input has the id of name the email input has the id of email subject has the id of subject and our message has the id of message so that's what we're doing here we're just selecting those elements okay name email subject message and we're using the document.getelementbyid method and just passing in the names there okay so now what we can do after this is we're just going to say let form data equal and we're going to create a javascript object and here we're going to say name first that's going to be name dot value okay like so and then we're going to say email and that's going to be email dot value like so and then we're going to say subject and that's going to be subject dot value and then finally we're going to say message and that's going to be message dot value okay so now if we come underneath here and if we just console.log that form data just to make sure we're getting the required fields so now if we refresh this if i just type in my favorite donald trump and then we'll just do a fake address here and then we'll say test message and then we'll just say message uh we'll just say yeah text whatever whatever you want and then if we come here press send message if we go to the console you can see we get our form data there logged in that um kind of javascript object okay so we have our name uh donald trump email donald trump white house message message text and we have our subject which is text message that's all picking up great now what we need to do with this data is obviously send it to our backend or our express uh our node server just to process this and then send this d send this via email to our relevant email address okay so we're going to be using ajax to send this data as i said before so let's get it up and running now coming back to our submit function we're going to say um let xhr equal new xml http request okay so we're creating a new xml http request uh instance here and then this comes with a bunch of methods okay so we're saying xhr dot open first and here this takes in two arguments okay this takes in the method we're going to be using so in this case we're going to be using the post method okay like so because we're going to be posting this data to our back end okay and then the second argument this takes in is the url we want to post to so we're just going to pass this to our root directory for now so we're just passing this hyphen okay um forward slash sorry not happen like so and then underneath here we're just going to do another method called x8 xhr dot set request header and here we want to set the content type header okay and we want to set this to application forward slash json like so because we're going to be sending this object and it's obviously the best way to send this object is via json format okay so we're going to convert this into json to send okay and then by the way guys this uh xhr method is kind of an old school way of doing it you could use the fetch api but i kind of like this way is i prefer doing it this way okay so after this we're just going to say xhr dot unload okay and this function will trigger once we receive a response from our back end okay so we'll say that equals the function like so and then two equals in there and in here we're just going to basically say console.log uh xhr dot response text okay that will log the response receipt from the server and in here we're just going to do an if statement we'll say if xhr dot response text equals success okay we'll pass that back if our email successfully sent we'll say alert and just say email sent and then what we want to do after that is just say name dot value equals empty string email dot value equals empty string subject dot value equals empty string and message dot value equals empty string like so okay and then obviously what that will do that will just clear this form okay once we receive a response so it will just uh delete all this text we have a nice blank form to work with okay and then underneath this we can just say an else alert something went wrong just let the user know that the um the email wasn't sent okay and then the last thing we need to do underneath this is just do our send method okay so we want to be able to send this data to the back end so we'll just say xhr dot send and here we'll just say we want to obviously pass this this form data which we create up here okay so we'll say in here form data now we can't send a json object to the back end like this okay we have to it has to be sent in string format so there's we have this method so we can say json dot string of fire okay and then we can wrap that form data in this json.stringify method okay and that's pretty much it for our frontend javascript okay now we just need to adjust our server.js file just to be able to receive this information and obviously that we need to add a piece of middleware so we're going to say underneath here app dot use and we're going to say express dot json like so okay um and then so once that's done we can now let's just create another route we need to create a post route for this route now okay so we're going to say app.post and then here we're going to post to this route and then here we're going to say request response okay now in this route i just want a console log that should be a comma console console.log the request.body okay and remember as we're sending this data from the front end in a json format you can see in our app.js we use this application.json content type our server as we're using this piece of middleware now express.json our server will be able to read that json in the request.body okay so if we refresh this now i'm just passing my name for now conveyor gmail test message hello oh then we send that you can see we get our data we get our data passed back to our server now so we have our name connor bailey and our message okay so that's great we can read that next we need to do this data is obviously use node mailer next to send it to our we're going to start with the gmail account and then i'll i'll show you how to do it with a custom email account as well okay so let's just we'll come underneath this this console.log here and i'm going to say here const transporter equals um and we'll say node mailer we need to bring in nodemailer first as well sorry guys so let's do that we just come to the top of our server.js file and just say here cons no mailer equals require nodemailer okay like so and now we can say here const equals constant transporter equals node mailer and then we're going to say uh dot create transport okay and what this does is this just um this is a method we use just to pass in our kind of um actual email details which you're going to be using to send the email okay so here we'll say open bracket and this takes in an object first we need to add is the service we're using so in this case i'm just going to say services gmail i'm going to use my gmail account and then underneath this we're going to say all and this is just going to take in our authorization credentials okay that's another object and here the first thing i'll say is user and that's going to be my email address now i did set up just a test email address just for the purposes of this video okay so i will change the password after but i don't mind showing it for now for this video okay so my email i'm using is connor nodemail test gmail.com i'll create an off uh sorry password sorry so we said we say pass here and then just type in your password in this case i'm just using password one zero one like site okay it's not very secure um if he was doing this in the live production app you'd want to store this in environment variables so no one can access this but i won't be showing that in this video okay just for simplicity okay so that's it for our transporter next we want to do underneath this is just say const male options okay so say const now options like so and that's going to equal another object and in here we'll state we'll pass in like basically who the emails from who it's going to the subject and uh the actual message as well so we'll say from first okay and remember this is going to be so in our request.body you can see we have these fields here so the from field is going to be request.body.email which will pass in this email here which the user would pass in on the form okay so we'll say request dot body dot email like so and then underneath this we'll say two and this would be um kind of the email address that you want the form submission to be sent to okay so in this case i'm just going to use the same email i stated up here which is kind of um node mail test so we'll just say that for now like so and then underneath this we'll say subject okay and in here i'm just going to create a i'm going to do backticks okay and then i'm just going to say here message from request.body.email colon and then i'm going to pass the request.body.subject okay and these two are both passed in with template literals like so okay and then after that i'm just simply going to say text that's the bulk of our message and here i'll just say request dot body dot message like so okay and then finally the last method we need to do to get this email sent is we're going to say transporter dot send mail okay and this takes in the mail options which we created here okay and then it takes in um a callback which uh it can receive an error or we get the uh the sending info okay so in here i'm going to say if error then we can say console.log the error first thing and then underneath that we'll just say res.send error like so and then else we'll say console.log um and then i can say here just copy this over to make it quicker say email sent and then just provide the uh info dot response text okay or the response and then underneath that i just want to send a success rest.send the text success okay so now if we come back here if we uh just type in this details again so i'll say actually let's use a donald trump say donald trump do this a fake white house night uh email or say test message message from donald okay and then if we send that you can see we get this in here and you can see here and we get the details that the message was sent okay and you can see here we get this alert saying the email was sent okay as we're sending that success message back to our front end and you remember we said here if the xhr dot response text equals success then we can alert the user the email was sent and then when we press ok you can see the values have been cleared now let's check our gmail account if i go to you can see i'm logged in as this no mail test already i just go to gmail.com okay and then you can see here 12 53 which is yeah one minute ago we get our email message from donald you can see our subject is message from donald trump whitehouse.gov test message okay so that's it that's our nodemail i'm working for gmail um also if this isn't working for you let me just go to the nodemailer web website if this isn't working for you you may need to just adjust your gmail settings okay they do say um it's kind of there are it is quite tricky sometimes gmail do block these kinds of emails so what you have to do here is um you'll come to this link and then you'll have to just um the default option is allow less secure apps off you'll just have to turn this on okay and then you should be able to start receiving emails once you've allowed less secure apps to to email your account okay so that's just uh just something to think about now before that's it for gmail okay the next thing i want to do is just show you how to do this with i have my own custom domain name okay so um let me just uh go into that now um i have a let's just go to one two three reg i have a customer name registered at this one two three reg dot com uk so if we um just make this big us log in here go to my control panel go to my email i have this email called info connerbailly.com um and i've just set a temporary password for now as well just to show you this how this works uh let me just delete these okay so what i'm going to do is i'm just going to come to my server.js file and all we need to do if you're using a different kind of service we just need to change this this transporter okay so in order to use my uh one two three reg email i'm just gonna comment this out this gmail set in and then if you come underneath here okay so i've just uh i didn't have a transporter here and you can see i'm just using the host for this one two three reg okay so i'm using this one two three reg service um and the host is this smtp.123 reg.uk um i had to use the port587 this was stipulated on their website as a port to use and then i've just passed in my off uh details again so this is just information.com and i've just set a uh a temporary password for the sake of this video which i will be changing after okay so now if we save that if i come back to my uh app um let's just refresh this okay let's type in another name just say um which is my girlfriend's name natasha svetty can it okay nat gmail.com and we'll just say hello connor and then we'll just say hello how are you like so if we send that you can see our email was sent and then if i come to my emails here refresh okay so that doesn't appear to have worked let's just see what's going on there hmm should have worked ah it's because sorry i forgot to change in my mail options i need to change this email as well that should have gone to my gmail account yeah sorry guys i need to just change this password this email down here as well let's just change that to info conor bailey.com i don't want to go to my gmail account okay let's try that again so if we come back to our contact form uh we'll just do the same thing as before we'll say that gmail.com hello connor hello how are you send that see that's been sent now if you come back to our inbox you can see there's our message appear there okay if you open that you can see here we are get the actual email that's been sent from that gmail.com and to info okay and there's a message okay so that's pretty much how you use the node maker dependency guys and how you create how you can create these kind of um the email submission forms in your websites i hope you found this video useful um if you have any questions please feel free to drop me a comment or a message and i'll try my best to answer but yeah thanks again guys and i'll see you next video cheers

Channel: Conor Bailey

Views: 21,427

Keywords:

Id: 30VeUWxZjS8

Length: 37min 9sec (2229 seconds)

Published: Sun Nov 29 2020