Creating A Contact Form With JavaScript / Nodemailer

Hi Guys,
Today we are going to be creating an email contact form using Nodemailer. I will be showing you how to set this up using a Gmail account as well as a custom email address.
Thanks for watching
Conor

[@radovanbotik]

Hey Conor, Thank you very much for this tutorial. This has been the first time I touched anything remotely close to backend, I spent entire evening trying to implement this, watched 5 different tutors but this is the one I was actually able to follow. I conquered this on my 3rd rewatch after getting little bit more familiar with nodemailer documentation, so thanks to YOU my contact form is running strong without 3rd party services! 🔥🔥

[@my.code.studio]

@radovanbotik im tryin to add this contact form to my website and just haye 2 questions 1. how to hide the credentials of the email and pass and 2. can i run this together with my html css website. sorry im a beginner

[@Jay-dy4dh]

Me after days of searching: A video which is detailed, no ads and has exactly what I need doesn't exist Conor Bailey: Hold my Beer... (Old meme but true)

[@ConorBailey]

Haha! Thank you mate! Glad it helped!

[@maxvegra4628]

MATE MATE MATE MATE MATE! where was you?? after three days finally found you and my problems got fixed ohhhhh my GOD! thank you pretty much.. appreciate man. best of luck!

[@IrajFatima-d7b]

I had been stuck with this form for three solid days and I tried 5 tutorials from youtube and used 3 AIs but nothing worked. your method worked well. Thannkyouuu so muchhh

[@rshelfo1]

I would like to say that this has been one of the most informative videos a novice dev like myself has ever watched. Everything just worked perfectly, and you. covered every aspect, rather than just the app, or the form etc. Thankyou, please keep doing what you are doing

[@lukelittler60]

Most informative for a complete beginner, this is the first ever JavaScript I've worked with don't understand it much yet but this is exactly what I needed for my demo website for college a functioning contact form. All the others just show you how to make one in html and CSS, like where does the info get sent to man. This guy solved that for me!

[@davidsuchan1641]

This is the most useful tutorial on contact form with node.js i could have found. Thank you a lot sir!

[@liu-river]

As of May 2022 Google stopped option for less secure app, but we can setup app password and this works still. Great tutorial.

[@prasobh1996]

how

[@michealocathain944]

Excellent walk-through! Just what I needed to get my head around both the form front end and server backend. Thanks!

[@forrestvanduren3440]

Interesting I always assumed when I sent emails to companies using these forms that it was actually sent from my email. Kind of funny that it's just an email they're sending to themselves. I guess you would need access to each person's actual email accounts to have it sent from their account itself though, so this actually makes a lot of sense. Thanks.

[@dieviktoria]

Thank you! I was searching for a video explanation on this exact topic! You helped me a lot!👍

[@ConorBailey]

Awesome! Glad it helped and thanks for watching! 😃

[@scriptkeeper8243]

You did a great job with the step by step proceedural code here showing how to effectively debug along the way. Thank you.

[@coding-uj3kl]

i tried all methods , yours is the only one that worked.THANKS!!!

[@claytorresgaming7212]

Finally! After searching the internet of a Nodemailer Tutorial that includes a Frontend implementation example! Thank you for this, it really helped me with my project! Keep doing more videos like this. Subscribed!

[@Frankslaboratory]

Hi Conor, nice work with these tutorials, very clear and easy to follow

[@ConorBailey]

Thanks Frank. Really like your channel dude. Great stuff!

[@a.ssportschannel3609]

@@ConorBailey hy sir i have face an issue to send email can u help me please

[@peterkabiru5144]

Thank you Conor, well explained on this one. I'm a beginner but It feels good to div deeper and get to know exactly how things are done in the back. I like things from scratch

[@Ahmedahmed-qg5ep]

Thank you so much. I was searching for it the whole day

[@sudodr]

I'm so lucky to discover this channel bro!❤

[@thunderbolt4777]

great tutorial man. cleared a lot of my misunderstandings up!

[@charlesadah5929]

Thanks man, I really appreciate your short and straight explanation, by the way it worked on my system.

[@tasteoftheair]

This video is gold! Can't thank enough! Wish you all the best!

[@ConorBailey]

Thanks Anna! Glad it helped.

[@tasteoftheair]

@@ConorBailey I want to use this feature from the video for my website, really have nothing to add or to change. Can I do it?

[@matijabarbir3466]

I love you, that was the most perfect tutorial I have ever seen.

[@davebudah]

Thanks man, this is something I was specifically looking for.

[@ConorBailey]

Nice one Dave! Cheers pal

[@mcmalphacent-4582]

Sir Conner Bailey, I pressed the like & subscribe button thrice using my thumb like👍👍👍

[@ConorBailey]

Legend

[@joseluisvegavargas5275]

this is great, it work 100% guaranteed. I used this method for my Contact me form. Could be great have a video about how to do validation form.

[@ConorBailey]

Thanks Jose. I may look to do a form validation tutorial in future. Although you should check out Florin Pops KZbin channel. He has a good form validation tutorial with JavaScript. All the best!

[@ConorBailey]

kzbin.info/www/bejne/qKTHZXmEfLmFeNk

[@kensleylewis4601]

With this exact setup, how can we integrate either Google Recaptcha v2 or v3 into this project? Can you come out with a video on how to do that?

[@sofibilal193]

Thanks, found the best video send mails....Again Thank you very much ❤️❤️❤️

[@nicolasgula1353]

Great tutorial!! the only one I found that worked, thanks men!

[@ConorBailey]

Nice one mate. Glad it helped

[@vickytemp3878]

Thank You so much! This is exactly what I was searching. :D

[@autopilot6942]

Thank you very much that was easy to understand and I got mine worked as well. chheeeers

[@TarikulIslam-nj7vr]

Thank you..... Its working 😊

[@nickfischer8205]

Thanks for doing this video! Super helpful

[@philipjobran2716]

FINALLY FUCKIN WORKED !! THX MAN APPRECIATE IT SO FKN MUCH !

[@tetianabronitska6688]

Very useful video! Thanks a lot from Ukraine!!!

[@tootyrnt5533]

Quick question, why did Gmail show the email sender as yourself but the custom email showed the email sender as what you put in the form field?

[@iprogram4486]

Same question sis

[@zoltancaputo9562]

Awesome class! TKS

[@sayakrana3984]

25:26 in console.log(req.body) not working because there are more items besides form.so, what to do? Please help 🥺

[@samarthpandey510]

great content helped a lot man thanks for this great tutorial!

[@ET_Bermuda]

Works great!! Thx so much!

[@samsonoduori7816]

thanks so much. really helpful

[@md.fakweruddinmazumder4668]

Thank you very much

[@aitoufkirbrahim9278]

great job

[@maniac1441]

thankyou. it is really usefull

[@randomcell708]

Nice Video Conor, really clear and consise explanation

[@rominaprograma]

you saved my life

[@kensleylewis]

This was a fun learning exercise. There are some really good tips to take from here. But I would say that if forms are the task at hand, validation and sanitization should be the most important aspect to centralize the project around. From there everything is gravy.

[@tobiasbenson3234]

i guess Im asking the wrong place but does anyone know of a tool to get back into an instagram account..? I stupidly forgot the login password. I love any tricks you can give me.

[@adamearl333]

how did you do that quick paste of .form-container?

[@hiphiphorhayy]

I’m gonna watch this in it’s entirety soon but does it cover back end input validation as well?

[@balazshorvath9057]

Hi! First of all really great tutorial, great content, you explained perfectly. My question is that what do i have to do differently if im running on the web, not on the localhost? Thank you for your answer!

[@lktech8199]

Really I love this ❤️

[@anwartobji1410]

great content ,thank you.

[@codeitraw5241]

man thanks so much, it works!!

[@puneethchidambar2128]

Thank you it's a great video. I'm not getting the mail ID which filled in the contact form. instead I'm getting the mail ID used for user and password. text and Subject are coming to mail properly. please help me on this.

[@iprogram4486]

Same here pls help out😭😭

[@francisabounader331]

hello i have a question this tutorial will work in a react app?

[@SM-kk1xs]

Thanks a lot for this. Do u know how can I read and store msg in nodejs if the user responds to this email??

[@SO-xs6wu]

Good work

[@user-tt6nc6mo7k]

You really did go old school with the XHR lol. I'm a bit confused as to why its necessary to provide the password of your email address? I have created a php script in the past to handle contact form submissions and did not need to enter an email password.

[@sajjjadhossain1907]

thanks a lot ,, love u brother

[@gavincoulson3900]

loved the vid! didn't fully understand why you went the fetch route when the action route would do the same thing no? unless my newbie ways are leading me astray haha.

[@deadvilla2612]

I am getting an error when trying to run npm run dev [nodemon] 2.0.12 [nodemon] to restart at any time, enter `rs` [nodemon] watching path(s): *.* [nodemon] watching extensions: js,mjs,json [nodemon] starting `node server.js` [nodemon] clean exit - waiting for changes before restart can you help me

[@noahg2]

when posting the function runs when the form is submitted till the xhr.onload function and stops, any help ?

[@oliverturp8667]

If I had two different forms, would I need to make all this twice or could I use the same server for two different forms?? Looking to set up a contact form like this but also a feedback form too 🤔🤔

[@nandhakishan3096]

Hi i Want to send the resume as part of the mail , but as we are converting the response into string it is becoming unusable in the back end. Do you have any solution for this

[@syrahsommeliers]

Amazing video! Conor, is there a way to redirect to a success page?! thanks a lot man!

[@eddyozz]

Noticed if your using Gmail, you might have to set password as ‘application specific’. You set this up in your gmail account settings.

[@ukaszzbrozek6470]

There is no point of targeting all those fields in form. You could get all that data from the Event object. It should contained it as dataForm that can be send instead of JSON. You could also use fetch on the FE witch is way easier to use.

[@adityarai344]

Thanks for the tutorial I really enjoyed it! I had a slight issue while running the app.js file. The onload function does not seem to fire, and I am unable to clear the form fields are submitting. I tried console logging inside the onload function to check if its firing or not and its not showing up in the console which confirms my doubt. However, I am successfully able to send the emails. Any ideas on what I am doing wrong?

[@j3ro3n16]

For others with the same issue, please complete all steps of the tutorial before testing the onload function (i.e. first send emails correctly).

[@Mast3rOfPupp3ts13]

Thanks for this, it was exactly what i needed. But i am having trouble getting the req.body.message to show up in the emails. The emails are being sent which is good, but theres just no message

[@ConorBailey]

Hi mate. Did you use the app.use(express.json) middleware? What gets logged when you console log the req.body in your server code?

[@Mast3rOfPupp3ts13]

@@ConorBailey yes I have app.use(express.json()). the name:, email:, and message: does get logged correctly. Everything seems to be ok, i get the success log in the browser and receive the email. But it never shows the senders email or message. It only shows my own gmail when i receive the message. Also, i was wondering if theres any downside to turning off the gmail less secure app access setting? I will only be using this for my portfolio page. Thanks for getting back to me ***** Hey Connor, i actually just got it to work lol I have 0 idea what i did differently , but i think it might have been something to do with nodemon. i changed a few things, made sure to end the server before starting it up and trying again and it worked. Thanks again!

[@unknownyoutuber5759]

Can you please help me i have a similar problem i just can’t get the email and the subject instead i just get the req.body.email nothing else i really need to finish this soon my deadline is tomorrow and i have no idea what to do

[@crusaderpr7683]

need help when i enter npm run dev it cant find the server.js i check the package and the writing is fine when i try run the server this message pops up [nodemon] app crashed - waiting for file changes before starting...

[@bartoszjasinski9485]

Hi. I have watched your tutorial several times and thank you. I am just in a trouble of receiving actual massage ( I receive only subject on my gmail ) . Also have struggle with receiving the '' email sent'' confirmation and clearing page. Would you advise me something ? thank you .

[@trax7214]

Thanks man it works

[@MicroUrb]

I am getting 'name' is deprecated for the XMLHttpRequest and I am assuming as a result, I am not getting Email Sent.

[@my.code.studio]

im tryin to add this contact form to my website and just haye 2 questions 1. how to hide the credentials of the email and pass and 2. can i run this together with my html css website. sorry im a beginner thanks for the help videos are good thank you for uploading

[@syit_334_vaibhav3]

create a .env file in your project and paste your password and email there as a variables and use those variables on your contact form

[@alexandrecveticanin5188]

Hey potatoes 😁 Do you any ideas for christmas gifts for Natacha ? A secret admirer

[@thodoris2243]

nice video. what about subscription to newsletters? How would you tackle that? any useful tool?

[@richard1403]

how would you do this by removing the form keeping only the send button to trigger an email and then building a templated email that never changes but pulls the clients email from a database

[@mimitecrazy]

do you have to save the dependecies with --save -dev if you want to put in on a server ?

[@GhostRanger-zj1lg]

Are you able to show me how to do this but with a modal form created with semantic reactjs? it would really be helpfull

[@Ireland1981]

Thank you so much!!!!!!!!!

[@ConorBailey]

hey Sinead. Thanks for watching! Did you get this working in the end?

[@ajaypartapdhaliwal7346]

Hey, i used ur method and it seems to be working when i used npm dev run and localhost however i tried using firebase to run this and it wouldnt let me send out the emails any idea why?

[@mohammadvahedi4965]

Thank You !!!! :))

[@inception252]

pls tell me why putting password in source code? do i have to put my real email password in source code? what if i put different password in source code?

[@HueMannKind]

Thanks for the video! I am running into a snag where the xhr onload never gets called. Any idea why that might happen?

[@HueMannKind]

I have also tried to do the same thing with ajax but I get a 500 internal server error and do not know why.

[@ConorBailey]

Hey mate. Do you have your code posted on GitHub? I could take a look. Have you set the method to “post”? And is this set up as a route on your server?

[@resurekt97]

So i want to send the full list of details to the email. Not just the message. How would i do it?

[@Newviewgraphics]

your middleware is not working on my end?? wondering if there is a different syntax?? I get two errors saying ',' expected and ':' expected. why is this??? can you help @ Conor Bailey

[@MamamimPlodtook]

I have done follow your video and everything is work fine. But when I deploy my site to Netlify is not working it show error "email cannot sent" I am new for coding and i want to know how to fix it.

[@carlosduque8767]

Will this also accept emails from other services like yahoo, hotmail, etc. ?

[@OmarMoaZein95]

hello sir thank you for vedio Are you have this tamplate by rar file ?

[@itsern6983]

Thank you very much, it helped me a lot! Just a few question, how can I do to hide the password in my code and thus securise it? You talked about variable environment, did you make a tuto about it? And why did you choose the PORT 5000 and not another one for the localhost? Have a good day!

[@ConorBailey]

Hi mate. Thanks for your comment. Use the dotenv library to set up environment variables. You can use these to hide sensitive information in your code. There’s a tutorial here: kzbin.info/www/bejne/sKjGp4uaaNB6mNk I just chose port 5000 randomly. Doesn’t really matter for development. Thanks again.

[@itsern6983]

@@ConorBailey Thank you very much for your answer. And how can I do to put it on my FTP server when the hmtl file is in the "public" folder, I modified the htaccess file but it loads only the html file but not the CSS and JS (it works very well on my localhost server but not on my OVH) ? Thanks again to you!

[@therealdemonlord8061]

You mentioned storing this in environment variables, could you elaborate? I would prefer to have the password secure.

[@adrianozuna4009]

You store the password in the environment variables so that you don't have your password all over you code. Let's say you don't use environment variables to store passwords, and then you decide to push you code to github. In that case you wouldn't be able to hide that password since it's in your code itself, not as an environment variables. I know my explanation is really bad, but basically if you want to store it safely, use the environment variables.

[@jihadnawzad8899]

Failed to load resource: the server responded with a status of 404 (Not Found) i get this error message can you help me to fix it please I really need to finish connecting my form tonight

[@makandriival8507]

will this work in React App?

[@nero6022]

🗿god🗿

[@evaprzybyla8955]

hey I am testing on my localhost, receiving 405 method not allowed error... how to solve this ? (it's POST method giving the error .... ) thx for help!

[@ConorBailey]

Hey Eva. Did you create the post route? See from 25:00 in the video. Thanks!

[@evaprzybyla8955]

@@ConorBailey thank you for your reply! Turned out I had many other small issues in my code :) but it's working now thx!

[@bhagyashreekolhe1895]

Hi it showing 500 internal server error

[@inesborges4857]

in my xhr.open(method, url) I don't think it is working because my folder structure is different. My app.js is inside a folder named js and my index.html is outside that folder in the main root. How do I fix this?

[@ConorBailey]

Hi Ines. What is the path for the post request in your server? This is the path you need to add to the xhr.open method.

[@inesborges4857]

@@ConorBailey What is the path for the post request in my server?

[@ConorBailey]

@@inesborges4857 it’s the app.post route I create at 25:04 in the video. Did you create a route like this?

[@inesborges4857]

@@ConorBailey Yes I did create a route like that. When Ii try to send an email it says to me that something went wrong. Btw I am using hotmail.

[@inesborges4857]

@@ConorBailey I have a ReferenceError: mailoptions is not defined but mailOptions is written correctly. I have changed it. It is still not working

[@onyedikachierugo4120]

this is very helpful, Hi Conor been looking for your social media handles just wanted to connect if you don't mind.

[@ConorBailey]

Hey mate. Thanks for your comment. Im on LinkedIn :D www.linkedin.com/in/conor-bailey/

[@jsart_pl]

Will this actually work on external server? Like when it's hosted on the Internet? Or does that work only on localhost?

[@mrbobbilly2]

Only works with localhost, you need to do a bunch of configurations if you want to use this on a deployed app with custom urls, especially if you want to use it with gmail or Github

[@aniketpanchal206]

Can i send images as well?

[@ranadebnath5421]

I think using body-parser will be better approach

[@ConorBailey]

Cools thanks. Will look into body parser. What are the advantages?

[@ranadebnath5421]

@@ConorBailey sir,. Actually I was trying to send mail ..by watching you video .. and really it helps me lot .. but then I think that I can avoid the extra code which you write in front-end js file .. to do this I just use body-parser , name of the input, and nodemail

[@tutorialswithshushanarora4569]

can you give source code? I'm getting a small error with my code.