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!
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.
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)
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!
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
Thanks Jose. I may look to do a form validation tutorial in future. Although you should check out Florin Pops RUclips channel. He has a good form validation tutorial with JavaScript. All the best!
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.
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
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.
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.
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!
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?
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.
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 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 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
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 🤔🤔
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 .
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
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
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
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?
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?
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
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.
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
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.
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?
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?
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: ruclips.net/video/zwcvXd3kGbw/видео.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!
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
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 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
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!
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.
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!
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
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! 😃
great tutorial man. cleared a lot of my misunderstandings up!
Hi Conor, nice work with these tutorials, very clear and easy to follow
Thanks Frank. Really like your channel dude. Great stuff!
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 RUclips channel. He has a good form validation tutorial with JavaScript. All the best!
ruclips.net/video/rsd4FNGTRBw/видео.html
Thank you so much. I was searching for it the whole day
Sir Conner Bailey,
I pressed the like & subscribe button thrice using my thumb like👍👍👍
Legend
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.
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?
Thanks, found the best video send mails....Again Thank you very much ❤️❤️❤️
Thanks man, this is something I was specifically looking for.
Nice one Dave! Cheers pal
Awesome class! TKS
Very useful video! Thanks a lot from Ukraine!!!
Thank you very much that was easy to understand and I got mine worked as well. chheeeers
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.
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
great job
thankyou. it is really usefull
Noticed if your using Gmail, you might have to set password as ‘application specific’. You set this up in your gmail account settings.
Nice Video Conor, really clear and consise explanation
Great tutorial!! the only one I found that worked, thanks men!
Nice one mate. Glad it helped
Thank You so much! This is exactly what I was searching. :D
Thank you..... Its working 😊
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 for doing this video! Super helpful
Good work
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
I am getting 'name' is deprecated for the XMLHttpRequest and I am assuming as a result, I am not getting Email Sent.
great content helped a lot man thanks for this great tutorial!
FINALLY FUCKIN WORKED !! THX MAN APPRECIATE IT SO FKN MUCH !
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.
Thanks a lot for this. Do u know how can I read and store msg in nodejs if the user responds to this email??
you saved my life
great content ,thank you.
Really I love this ❤️
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😭😭
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!
how did you do that quick paste of .form-container?
thanks so much. really helpful
Works great!! Thx so much!
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).
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.
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 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
thanks a lot ,, love u brother
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 🤔🤔
hello i have a question this tutorial will work in a react app?
when posting the function runs when the form is submitted till the xhr.onload function and stops, any help ?
Thank you very much
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 .
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
man thanks so much, it works!!
Hey potatoes 😁
Do you any ideas for christmas gifts for Natacha ?
A secret admirer
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
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
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 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?
nice video. what about subscription to newsletters? How would you tackle that? any useful tool?
Amazing video! Conor, is there a way to redirect to a success page?! thanks a lot man!
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
do you have to save the dependecies with --save -dev if you want to put in on a server ?
Are you able to show me how to do this but with a modal form created with semantic reactjs? it would really be helpfull
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
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
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.
So i want to send the full list of details to the email. Not just the message. How would i do it?
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
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?
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: ruclips.net/video/zwcvXd3kGbw/видео.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!
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
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!
Will this also accept emails from other services like yahoo, hotmail, etc. ?
Thank You !!!! :))
Thank you so much!!!!!!!!!
hey Sinead. Thanks for watching! Did you get this working in the end?
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?
I have somthing went wrong and in cosole 404 error method not allowed
hello sir
thank you for vedio
Are you have this tamplate by rar file ?
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/
I keep on getting 'Somethning went wrong' and the form input is not logging on the console. Has anyone came across this problem?
yep! i've got it on deployment. currently working through it. did you figure it out?
Hi it showing 500 internal server error
I think using body-parser will be better approach
Cools thanks. Will look into body parser. What are the advantages?
@@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
will this work in React App?