How To Make Working Contact Form With JavaScript | Receive Form Data On Email
HTML-код
- Опубликовано: 11 дек 2021
- 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
👉 easytutorialspro.com/go/course/
-------------------------------------
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)
👉 easytutorialspro.com/hosting/
My recommended tools and tutorials
👉 easytutorialspro.com/
-------------------------------------
◼️ 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:
◼️ RUclips: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
2024 Updated tutorial: 👉ruclips.net/video/-HeadgoqJ7A/видео.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
Thank you for sharing such a useful knowledge with us🙏🏻
Thank you I needed this in my personal project. Quite simple steps to follow.
OMG, the last part was amazing, thank you for all the info!
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
ruclips.net/video/C0H8D74f-Ys/видео.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!
YOU are a great teacher I hope you do well in your future
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
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
Easy & Knowledgable .. Thanks buddy
Thank you so much brother, It's helps me a lot. ❤
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
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 😅!
Thank you so much sir .I'm learning alot from you.
Love from Bangladesh.....
He is a great teacher . Very well explained. !!!!!!!!!!!!!!!!!!11
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.
Very Informative. Can you please also tell how to add recaptchaV2/V3 on this form?
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❤
I think that this is the world easiest way for html contact form
Heads off to you😇
Thnk you very much
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
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.
Thank you so much for this concept
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
🤣
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
Been waiting for this video for a while. Thanks for the tutorial!
Thanks for the tutorial !
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!
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?
Before We have to create a gmail host address or simply write our email and password in that section ?
i can't thank you enough, you really helped me on this
hello, the username and password you entered, is it for your gmail account or smtp account ?
A 'return' statement can only be used within a function body in line 10
Can you send me the code you have
Thank you, thank you very much.
Love from Chennai.. Awesome tutorial I learning daily a new one...
Thanks Sasi
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!
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
ruclips.net/video/C0H8D74f-Ys/видео.html
Please use a php contact form or send me an email and send you a right code.
Same issue
Super useful project ever sir, 👍 thank you so much 👍😘
Most welcome 😊
@@GreatStackDev It doesn't work at all.
Thanks bro now I'm confident
Only elastic email is supported as an SMTP host ?
Same,.
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
thank you for such a useful tutorial
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
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
@@GustavoPiucco thanks
Do you know any tutorials on how to add it to the backend? I'm new at all of this
저도 좀 알려주세요 궁금해요
Thank you so much fro your helping.
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
watching from Thailand ♥ Thank you for teaching
a very useful one thank you
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
I did it but it didn't worked.can you explain this in a long video
This was so awesome!!!!!!
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
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.
it's not working just reloads the page when i clicks on submit
Same mine too
thank you very much
great, i have a nightmare with my contact form for weeks now. hope this works for long. thanks
Can you bring complete project based on laravel 8.
This is NOT a secure way of sending emails, beware, brothers.
Why man ???
Yes
@@deadgamer011you are giving away your password
Thanks for the video! What should I use for my personal website then?
Embedding SMTP credentials (username and password) in the client-side code is a security no go!
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
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?
Your sharing really , a good stuff man.thanks a lot...
thanks Upendra
Thankyou so much ❣️
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"?
@@An.-Jo 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
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
Mai wait kar rha tha ❤❤❤❤
amazing thank you its very informative....
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
Thank You Bro
Great explanation . Can u plz start ReactJs tutorial please
This was so helpful Thanks alot
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
Bro it is very useful
Super helpful :)
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?
Love From Bangladesh 🥰
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.
Pro from somalia I am your fan
Awesome man
Thank you so much Sir
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
Thank you sir
you are welcome!
I cant wait to get SMTP credentials from inspect element :)))
Thankyou bro thankyou very much❤❤
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
thanks a lot, ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
Honestly thank you so much I did find it amazing the way you made it look so easy you are fantastic thank you again for sharing your knwoledge.🙏🙏🙏
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
Wow Awesome
this is the best vid of ur yt
thanks
Jahapanah tussi great ho
My like was no 10,000 🎉🥳👍🏾
Great video thank you
Glad you enjoyed it
Does this work in hostinger SMTP and credentials or do I have to set one up for hostinger at elasticemail pls help
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.
In this section
what does reset and return false stand for?
Amazing content🔥🔥🔥
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
Nice useful
Thank you
Flappy Birds Game Using Python With Source CODE
ruclips.net/video/C0H8D74f-Ys/видео.html
When adding the SPF record am I supposed to delete my old Spf records? Wil this route my emails through elastic? will my emails continue to go thru my google workspace account? Im only doing the elastic account because I want to block my password from the code, if there is another way I would like to know. Thanks so much for you work!
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"
Amazing very technical... This is not understandable for normal people like me.
Do I need to put my website online at some hosting to make this work? Or it will with opening browser locally?
Please make a video on feedback form same like this way
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.