Creating A Contact Form With JavaScript / Nodemailer
ฝัง
- เผยแพร่เมื่อ 6 ก.พ. 2025
- 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
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!
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! 🔥🔥
@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
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
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
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!
As of May 2022 Google stopped option for less secure app, but we can setup app password and this works still. Great tutorial.
how
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)
Haha! Thank you mate! Glad it helped!
This is the most useful tutorial on contact form with node.js i could have found. Thank you a lot sir!
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.
i tried all methods , yours is the only one that worked.THANKS!!!
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!
Excellent walk-through! Just what I needed to get my head around both the form front end and server backend. Thanks!
You did a great job with the step by step proceedural code here showing how to effectively debug along the way. Thank you.
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
Sir Conner Bailey,
I pressed the like & subscribe button thrice using my thumb like👍👍👍
Legend
Thank you! I was searching for a video explanation on this exact topic! You helped me a lot!👍
Awesome! Glad it helped and thanks for watching! 😃
Hi Conor, nice work with these tutorials, very clear and easy to follow
Thanks Frank. Really like your channel dude. Great stuff!
great tutorial man. cleared a lot of my misunderstandings up!
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.
Thanks Jose. I may look to do a form validation tutorial in future. Although you should check out Florin Pops TH-cam channel. He has a good form validation tutorial with JavaScript. All the best!
th-cam.com/video/rsd4FNGTRBw/w-d-xo.html
I love you, that was the most perfect tutorial I have ever seen.
This video is gold! Can't thank enough! Wish you all the best!
Thanks Anna! Glad it helped.
@@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?
I'm so lucky to discover this channel bro!❤
Thanks man, I really appreciate your short and straight explanation, by the way it worked on my system.
Thank you so much. I was searching for it the whole day
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?
Awesome class! TKS
great job
Good work
Thanks, found the best video send mails....Again Thank you very much ❤️❤️❤️
25:26 in console.log(req.body) not working because there are more items besides form.so, what to do? Please help 🥺
I’m gonna watch this in it’s entirety soon but does it cover back end input validation as well?
Thanks man, this is something I was specifically looking for.
Nice one Dave! Cheers pal
Thank you very much that was easy to understand and I got mine worked as well. chheeeers
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?
Same question sis
Thanks a lot for this. Do u know how can I read and store msg in nodejs if the user responds to this email??
Nice Video Conor, really clear and consise explanation
Thank you..... Its working 😊
Great tutorial!! the only one I found that worked, thanks men!
Nice one mate. Glad it helped
thankyou. it is really usefull
hello i have a question this tutorial will work in a react app?
Very useful video! Thanks a lot from Ukraine!!!
how did you do that quick paste of .form-container?
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!
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
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.
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.
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.
Same here pls help out😭😭
Thank You so much! This is exactly what I was searching. :D
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.
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
Thanks for doing this video! Super helpful
Really I love this ❤️
Noticed if your using Gmail, you might have to set password as ‘application specific’. You set this up in your gmail account settings.
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.
I am getting 'name' is deprecated for the XMLHttpRequest and I am assuming as a result, I am not getting Email Sent.
when posting the function runs when the form is submitted till the xhr.onload function and stops, any help ?
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 .
you saved my life
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
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
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 🤔🤔
nice video. what about subscription to newsletters? How would you tackle that? any useful tool?
great content ,thank you.
do you have to save the dependecies with --save -dev if you want to put in on a server ?
great content helped a lot man thanks for this great tutorial!
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
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?
@@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!
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
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...
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?
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?
For others with the same issue, please complete all steps of the tutorial before testing the onload function (i.e. first send emails correctly).
thanks so much. really helpful
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
So i want to send the full list of details to the email. Not just the message. How would i do it?
Works great!! Thx so much!
Amazing video! Conor, is there a way to redirect to a success page?! thanks a lot man!
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.
Will this also accept emails from other services like yahoo, hotmail, etc. ?
hello sir
thank you for vedio
Are you have this tamplate by rar file ?
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.
thanks a lot ,, love u brother
man thanks so much, it works!!
FINALLY FUCKIN WORKED !! THX MAN APPRECIATE IT SO FKN MUCH !
Are you able to show me how to do this but with a modal form created with semantic reactjs? it would really be helpfull
Thanks for the video! I am running into a snag where the xhr onload never gets called. Any idea why that might happen?
I have also tried to do the same thing with ajax but I get a 500 internal server error and do not know why.
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?
Thank you very much
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
Hey potatoes 😁
Do you any ideas for christmas gifts for Natacha ?
A secret admirer
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?
Hello!! Everything working but at 26:00, get the alert ('Something went wrong!') ?? can't get the app.post of req. body workin. any help??
Hey mate. Do you have your code on GitHub? I can take a look.
@@ConorBailey Thabk you for the attention. if u could take a look, the project is 'Lab' on my git - miguelfernandesidesign
I have the same issue? Any solutions?
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!
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: th-cam.com/video/zwcvXd3kGbw/w-d-xo.html
I just chose port 5000 randomly. Doesn’t really matter for development. Thanks again.
@@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!
You mentioned storing this in environment variables, could you elaborate? I would prefer to have the password secure.
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.
Thanks man it works
Will this actually work on external server? Like when it's hosted on the Internet? Or does that work only on localhost?
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
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
will this work in React App?
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!
Hey Eva. Did you create the post route? See from 25:00 in the video. Thanks!
@@ConorBailey thank you for your reply! Turned out I had many other small issues in my code :) but it's working now thx!
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?
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.
@@ConorBailey What is the path for the post request in my server?
@@inesborges4857 it’s the app.post route I create at 25:04 in the video. Did you create a route like this?
@@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.
@@ConorBailey I have a ReferenceError: mailoptions is not defined but mailOptions is written correctly. I have changed it. It is still not working
this is very helpful, Hi Conor been looking for your social media handles just wanted to connect if you don't mind.
Hey mate. Thanks for your comment. Im on LinkedIn :D www.linkedin.com/in/conor-bailey/
Can i send images as well?
Do we have to write our gmail password there '28:02' ?? Is there no other way without writing password??
Use environment variables, specifically the dotenv library. You can store your password as an environment variable which will keep it hidden.
I have somthing went wrong and in cosole 404 error method not allowed
🗿god🗿
Thank you so much!!!!!!!!!
hey Sinead. Thanks for watching! Did you get this working in the end?
Thank You !!!! :))