How To Make Working Contact Form With JavaScript | Receive Form Data On Email
ฝัง
- เผยแพร่เมื่อ 5 ก.ย. 2024
- Learn How To Make Working Contact Form With JavaScript | Receive Contact Form Data On Email Using HTML CSS And JavaScript
👉 Please check latest tutorial: • How To Create Working ...
❤️ SUBSCRIBE: @GreatStackDev
In this video we will create a contact form with the help of HTML and CSS, then we will make this contact form working so that we will receive the contact form enquiry on our email id with the help of SMTP JS
---------------------------------
recommended course:
❤️ Complete website Using HTML and CSS
✔️ 8 Complete website step by step
✔️ Source Code Download
✔️ 76 Lectures, 12 Hours Video
✔️ Course Completion certificate
👉 easytutorialsp...
-------------------------------------
Recommended Videos:
Learn Complete HTML and CSS from basics:
► • HTML And CSS Tutorial ...
Make A Complete Website for college using HTML & CSS:
► • How To Make A College ...
How to make a Business website step by step:
► • How To Make Website Us...
How to make personal resume website step by step:
► • How To Make A Website ...
How to make an Ecommerce Website Design:
► • How To Make eCommerce ...
How to make travel website design with HTML CSS Bootstrap:
► • How To Make A Website ...
-------------------------------------
Affordable web hosting (coupon- EASYTUTORIALS)
👉 easytutorialsp...
My recommended tools and tutorials
👉 easytutorialsp...
-------------------------------------
◼️ Source code link is shared in community post for all my coding videos exclusively for channel members (only channel members can see)
Join Channel Membership:
► / @greatstackdev
----------------------------------
Image credit:
unsplash.com/
-------------------------------------
Like - Follow & Subscribe us:
◼️ TH-cam: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
2024 Updated tutorial: 👉th-cam.com/video/-HeadgoqJ7A/w-d-xo.html
Still doesn't work for me. Are you certain that this solves the problem?
In google account settings I can only find “2-step verification.” I created an app password with it but it still comes up with the error message
if you have authentication error this one solve the issue
instead of ("Message Sent Successfully") just add (message) so you will get the alert of error message if any
@easytutorials I am not getting the email in my gmail, i can only see the email from the Log on the elastic email
Sir u r really amazing. I see your videos and, I am building a website including the topics of your videos to my requirements. I can go on smoothly by your toturial and even I am a beginner to Web development. I like ur videos so much. Thankyou
For those who asked themselves why it was working Months ago but not now...Due to hacking attacks SMTPJS is no longer trusted by every mail provider besides one no name commercial provider, furthermore has Google changed their privacy rules...to third party programms its no longer permitted to access the email via smtp, but it works perfectly fine with other ones like outlook and gmx
Dammn.
All these bloody bastard hackers just be making things harder for humans.
please check the pinned comment, it will work with gmail
Can you help me? I really dont understand how i make a securetoken with outlook because the smtpjs token doesnt work (probably because of the hacking attacks)
Its not working for me, what exactly do i have to do @xilado4254
Since May 30th 2022, Google has changed its política about the access from no secure apps.
Well explained, that's the magic of JavaScript
But I'm not receiving any mail
must read
SAme followed step by step and got nothing
@@jr2ceo607 me too
Did anybody In this thread find a solution
Hello I sir I'm from 6th class. I have done a full website course (30%) in my school but I'm interested in more things I'm requesting u to plz make a full html, css and javascript course it will be liked
🤣
Watched many videos yet couldn't get any useful info. Thanks a million bro.
I tried this, its not working. When I click on the send button, it just reloads. No message that indicates if it is sent. And also I don't receive the message in my email. Please, what should I do to correct that
I'm having an issue it shows a message at the top saying "Client was not authenticated, Authentification required"
@@kapkoder4009 FIRST GO TO YOUR ACCOUNT THEN GO TO SECURITY AND ENABLE LESS SECURE APP ACCESS THEN REOPEN THE WEBSITE IT WILL BE SOLVED
@@HiteshKumar-en4ym Thank you Brother
really simple no headache!
It did not work, do we have any other workaround?
Thank you I needed this in my personal project. Quite simple steps to follow.
Literally am going from using Ableton to soft and tNice tutorials helped trendously as a beginner. Thank you so so much for tNice tutorials!!
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
Same here bro from logic to web development XD
Omg same, I have like 15 years of Ableton experience and started web dev like 6 months ago. Hope your learning is going well!
Embedding SMTP credentials (username and password) in the client-side code is a security no go!
If you have your password in the JS code, then isn´t it just easy to hack? I haven´t completed a project using this method for subscription form but it seems weird to me that the password is in the JS code.
I was struggling with this concept so much, you explain everything perfectly. Thank You!!!!!!!!
its a prank
Not working 😭
@@ananddivine3785 check my answer below
@@francofyzz1340 check my answer see if it helps above
Thanks for sharing this knowledge with us I really appreciate your work. Please I have a request, can you please teach us how to create a form that sends confirmation code and pin when properly filled out? I hope to hear from you soon, keep up the good work :)
those are server side functionalities you can use firebase it eases the need to learn server side languages
@@LodDOmniscient thanks for this responses... can you kindly share a video tutorial that can teach how to use that on google with me here or my email if you dont mind
LOVE from Nigeria....thank you always sir.
You are very welcome
@@GreatStackDev can I get Id by name. Not by email. Is it compulsory to be email.
@@GreatStackDev And for the local host or server. The password is it my gmail password
Start at 11:06 if you have a styled form already
Great!!
I think that this is the world easiest way for html contact form
Heads off to you😇
Thnk you very much
OMG, the last part was amazing, thank you for all the info!
Thank you for sharing such a useful knowledge with us🙏🏻
Very helpful in the setup, but I have another host for SMTP other than Elastic Email. How can i get/make a JavaScript address to allow my other host?
Incredibly amazing. Thank you so much for this great tutorial. Im learning alot from you. I want to be a great developer like you also one time soon. Amen to that for me🙏🏾
keep practicing and you get there bro!
I don't like it at all. I need help
and 1 year later what did u become?
@@DejanPavlovic-tu8vj nice pov 😅!
You’re the best teacher on here from video last I have watched so far thank you and keep the good works I have learnt a lot from you videos
hello, the username and password you entered, is it for your gmail account or smtp account ?
YOU are a great teacher I hope you do well in your future
I have an issue. While the alert("Message sent successfully") is showing, no actual mail gets to my email. Do you have any idea, why that is the case? I have copied your HTML code exactly doing something different only in CSS.
I am having the same issue
In my case not even showing alert also not getting email
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
Please use a php contact form or send me an email and send you a right code.
Same issue
it is very very amazing thank you so much sir i am trying for 2 months to make this type of message sender but you have posted the video thanks alot sir❤
Thanks for the content! I'm having an issue: the "return" statement in the form tag is generating an error. "A 'return' statement can only be used within a function body". Do you know how to fix this?
facing same problem . can you find any solution then reply me bro
i also plz help me
I also got this problem but notice that it doesn't create any kind of problem in your code. It still working well
I have the same problem.
@@md.tanvir8066 must read!
Can you please make a working search engine within website with java script.
Only elastic email is supported as an SMTP host ?
Same,.
Super useful project ever sir, 👍 thank you so much 👍😘
Most welcome 😊
@@GreatStackDev It doesn't work at all.
Very Informative. Can you please also tell how to add recaptchaV2/V3 on this form?
great, i have a nightmare with my contact form for weeks now. hope this works for long. thanks
It shows the error that "Only elasticemail is supported as an SMTP host".
He shows how to use ElasticeMail instead of Gmail at the end of the video. SMTPJS only supports ElasticeMail nowadays
@@essayedgar Thanks a lot buddy!
yes then if you fix code there is nothing
For most of you that’s complaining that it’s not working your can use emailjs it works perfectly I use that too and for security you can add a little protect with dotenv
Can you please elaborate
Never do this on the client side, you have to do this on the backend otherwise you will leave a big security issue
what do you mean by that? Can you explain?
@@lei2101 he hard coded the smtp credencials on the client side. even if it was a limited api, it should create some kind of url with some kind of hash with expiration and limitations, something like aws recommends for client side uploads to aws s3
@@GMP93 thanks
Do you know any tutorials on how to add it to the backend? I'm new at all of this
저도 좀 알려주세요 궁금해요
I wish to thank you for all these wonderful video tutorials. They are very easy to follow and I can be able to achieve the end result smoothly without any problem. However, only with this particular tutorial, I'm facing a bit of a hick-up here where, I fill the form and when I click on the submit button, the success message shows up but the message does not show up in my email inbox. That is the only problem. How can I fix this up? Thanks.
A 'return' statement can only be used within a function body in line 10
Can you send me the code you have
watching from Thailand ♥ Thank you for teaching
how did u explained this complex thing in a very short form.. I am struggling for this since days... OMG your awesome mannn!!!!! keep it up!
No its not but dng with elastic email. I does! actually i fllwd anthr video, i got this frm there
when adding
it shows error:
A 'return' statement can only be used within a function body.
and also I cant see any of error or sent messages.
i followed every step again and again but still no luck please help!
This is what I meant with my comment above. Like the other video about building a so called responsive website
I'm so grateful to easy tutorials.🙂😀
Glad you like them!
@@GreatStackDev Please Help me as i am not getting ant email in my gmail and i have created d elastic email account
Thank you so much sir .I'm learning alot from you.
Love from Bangladesh.....
Mailbox name not allowed. The server response was: Envelope FROM ' Sender_Email (user's) ' email address not allowed.
this is my error I'm getting also.
@@erikmoxley5927 Yeah Buddy You just have to use your own EMAIL ADDRESS in FROM section ... The email address You've login in ElasticMail.
probably this is the first time I am facing hard time to do the coding because here not everything is detailed what he did in the easy tutorials.
I did it but it didn't worked.can you explain this in a long video
He is a great teacher . Very well explained. !!!!!!!!!!!!!!!!!!11
Can you please add subtitles to the videos? Maybe I can understand what you are saying with automatic translation into Turkish. I love watching your videos. Thank you
How if i help you is oky or not
You make it all look so easy. I've triple checked, it isn't working for me as a test on gmail. I don't get any error messages and only when I added a "message" in the field did I get anything. It said successful but I've not received any email. I've tested it on several email accounts.
What ever happened to using mailto: on a submit button?
@Elias Productions then there should have been a message of the rejection or a request on the password, I would think. Thanks
This is NOT a secure way of sending emails, beware, brothers.
Why man ???
Yes
@@VYR4Zyou are giving away your password
It's not safe because it from front end, this most done with back end lik php, You can see the source code for your email and password
Love from Chennai.. Awesome tutorial I learning daily a new one...
Thanks Sasi
it's not working just reloads the page when i clicks on submit
Same mine too
I cant wait to get SMTP credentials from inspect element :)))
But password is exposed to frontend anyone can see by inspect
do you know how to imporve that?
code obfuscation can be one method but now a days smart people deobfuscate js code easily
any other method
@@coderceo9324 smtp js is providing a way to authenticate user by providing a security key instead of plain credentials. This plus js obfuscation is ✌🏻
Just send the email to a email address hosted on your own server instead of gmail and have your servers email address forward the email to your gmail address which you can access on your phone/pc.
guess you didn't see the video until the end where he says about the data encryption
@@codasticpark they just saw half of video
Do we need a hosting software to send form to our email address ??
Can you bring complete project based on laravel 8.
Before We have to create a gmail host address or simply write our email and password in that section ?
This is not working I even did the app password thing. Everytime I click send the page gets refreshed please help me
same, did you get it fixed?
@@ashleybangbang6807 No
Elastic mail bhi work nahi kr raha bro mera kisi ko pata h kya problem ho skti hai?
Thanks bro now I'm confident
Okay the Tutorial was great and easy however it put your mail id at risk. Dear viewers kindly don't use this if you going to put your website online.
whats that, you mean the email adress u use?
@@jamesyancharas I meant the API information. If anybody inspected the source they can find this API information easily. Once they do they can use the username and password
i can't thank you enough, you really helped me on this
For everyone struggling with this, make sure you check what errors the console outputs when you submit the form. You should be able to fix most, if not all of your issues this way. If not, ask me and I'll try to help!
sup, can you help me with this "The SMTP server requires a secure connection or the client was not authenticated. The server response was: Authentication required"?
@@Wes.loyalty Sure, I actually had this issue myself too. You get that error message when you’re trying to send an e-mail from an unverified e-mail account.
As you can imagine, it’d be pretty damaging to society if one could send an e-mail from someone else’s e-mail name. So they require you to verify it through ElasticeMail. The video actually explains this incorrectly which caused us to have this issue. Verify a domain (if you own it) or a specific e-mail, then use that e-mail (or domain) in the “From” field. Then add the input from your website’s “email” field into your body
Hello sir, can you please explain me what I have to fill into the gaps username and password? From which account are the username and password?
@@nourserwy856 Hi, sure. It’s the username & password for your ElasticeMail account. If you intend to make your website publicly accessible, make sure to encrypt your username & password
Uncaught SyntaxError: Invalid shorthand property initializer
This is the error showing in console. please help
Now only elasticemail works, but thanks bud, it was helpful!
what are the changes that are required when using the elasticemail? its not working for me
@@azora.s elasticemail works but I kept getting this error once I click on send
"The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.5.1 Authentication Required"
Hey thank a lot for this tutorial. I've been following all the ways in this video. And in my case, I got the alert that "Message sent succesfully". But I don't see in my Gmail inbox. I may have missed something...
same...
Easy & Knowledgable .. Thanks buddy
Your sharing really , a good stuff man.thanks a lot...
thanks Upendra
Heyy, i got a problem! It says: Only elasticemail is supported as an SMTP host!
I got the same problem. You need activate elacticemail
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
Hi bro i tried it but it's not working, i fill the form and when i submit it said message has been seccussfuly send but i go to my inbox and i found nothing
what is the problem >?
Thank you so much brother, It's helps me a lot. ❤
14:53
Which username password will add on there ?
I mean actual email id with password or smtp js signing username password
thank you so much for this great tutorial,i m having issue understanding the smtp username and password,how it work together with gmail recipient address.
Amazing very technical... This is not understandable for normal people like me.
Please make working login form as well
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
Thank you so much fro your helping.
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
Thanks for the video! What should I use for my personal website then?
Thank you so much for this concept
Thank you sir
you are welcome!
Hello team, people are facing issues with the SMTP , you should explain it step by step, that is the only unique quality of the project
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
In this section
what does reset and return false stand for?
Jahapanah tussi great ho
'From' property is required , anyone help !!!
it was a great video tutorial but after I put my google credential in the js it stop alerting the top window and the form stop doing anything, not sending, not transmitting, nor receiving an email,. thanks for the video though.
am trying to sign up on your website but it sends There was a problem creating your account. Check that your email address is spelled correctly yet the email is right
please full video about password and additional email
My like was no 10,000 🎉🥳👍🏾
Thank you sir
Mene form page to baba liya hai
But mail nahi ja rha hai
Uske liye domain chahiye kya
Mail me send kr rha hoo bt nahi ja rha
Bahut baar try kiya plz rply
yes SMTP configured PHP server is requires for send email. But can test it on free web hosting 000webhost
Thank you so much sir for this helpful video 😊
Sir after send button , it gives the error of a secure connection or the client was not supported. Sir please tell 🙏🏻
yes
Tips
This is how I solved the problem
*I went to manage your Google account
*Then I went to security
*Then I went to create app password or something like that ... Just scroll down
*Then they'll ask you to write the name of the app then you input a custom name
*They'll show you a password... Make sure that you copy it cus that's the password you're going to use in your code... It's going to be a mixture of letters and numbers though
Then try again
I hope this helps ✌️
@@emmanuelezeigbo659 I can't find anything like create app password
@@oluwatobiadewoye6089 go to security and scroll down
@@emmanuelezeigbo659 Thank you very much, it worked 👏🏽
Bro it is very useful
Question: Can we put the same email for Username and To please tell me
I have a question. When the web app is online and you access the source code, doesn't that mean that you can view the email and the account of the host and which it makes it vulnerable? And other people can view your email and your password.
Dragoș Axinte, I have clearly said in the video, use gmail smtp on local server only from learning purpose, don't upload it on online. For online uses go with third party SMTP and encrypt the SMTP details
If you do wanna use this online, paste this code snippit into the very bottom of your 'body' section. while probrobly not foolproof, I havent found a way past it so far.
"
document.addEventListener('contextmenu', event=> event.preventDefault());
document.onkeydown = function(e) {
if(event.keyCode == 123) {
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'I'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.shiftKey && e.keyCode == 'J'.charCodeAt(0)){
return false;
}
if(e.ctrlKey && e.keyCode == 'U'.charCodeAt(0)){
return false;
}
}
"
(The SMTP server requires a secure connection or the client was not authenticated. The server response was: Authentication required) mere me ye error aa rhi hai isko kaise sahi karen ye alert box me likh kr aa rha hai
Unfortunately this doesn't work anymore. Smtp only allows usage through their elastic email service and Google blocks any send attempts.
how to get around this?
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
Thank you,, very helpful, One thing more, do you know how to add a captcha? You know that bots or worst malwares could be sent.
thank u so much .. and how to send that data to more than one person/Gmail ?????? please reply
Hi I am unsure what details I have to enter in the host and username password section? what do you mean by this?
Probably your email id and password
Respected Sir,
Kindly Post Video about "Website Home page web banner slides -5 slides moving horizontally by clicking left or right arrow icon"... Post html css javascript code or make live video and post it...
Hello! I do love your videos a lot and it has really been working for me a lot. most of my completed project was done with your videos I watch... thanks for that. but pls, this contact form, I tried mine following your video but it isn't working. pls, how can you be of assistant. i need to submit this project by Wednesday. I hope to here hear from you soon and thanks in advance
Flappy Birds Game Using Python With Source CODE
th-cam.com/video/C0H8D74f-Ys/w-d-xo.html
It says "Authentication Required"
thank you for such a useful tutorial
the that. you enter in username and password is it from elatic loin or actual mail id data
The SMTP server requires a secure connection or the client was not authenticated. The server response was: 5.7.0 Authentication Required. why showing this error 😭😭
Hi Sonu, Go to google account settings. Then go for 2 factor authentication setting page, there will be an option called "App Password". Just create an app password and use that new password in the code. don't use original password. It will solve the issue
@@GreatStackDev Same problem with me , then solution you gives works....100%
sir how can i use it for my website hosted on github since i do not own it's domain
you can try the contact form made in this tutorial: th-cam.com/video/0YFrGy_mzjY/w-d-xo.html