How To Make Working Contact Form With JavaScript | Receive Form Data On Email
Vložit
- čas přidán 11. 12. 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:
◼️ CZcams: goo.gl/tTFmPb
◼️ Facebook: goo.gl/qv7tEQ
◼️ Twitter: / itsavinashkr
◼️ Instagram: / iamavinashkr
2024 Updated tutorial: 👉czcams.com/video/-HeadgoqJ7A/video.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🙏🏻
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
czcams.com/video/C0H8D74f-Ys/video.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!
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 I needed this in my personal project. Quite simple steps to follow.
YOU are a great teacher I hope you do well in your future
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 😅!
Very Informative. Can you please also tell how to add recaptchaV2/V3 on this form?
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
Easy & Knowledgable .. Thanks buddy
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
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
Thank you so much brother, It's helps me a lot. ❤
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❤
hello, the username and password you entered, is it for your gmail account or smtp account ?
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
Thank you so much sir .I'm learning alot from you.
Love from Bangladesh.....
I think that this is the world easiest way for html contact form
Heads off to you😇
Thnk you very much
Start at 11:06 if you have a styled form already
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
🤣
He is a great teacher . Very well explained. !!!!!!!!!!!!!!!!!!11
Before We have to create a gmail host address or simply write our email and password in that section ?
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.
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?
Been waiting for this video for a while. Thanks for the tutorial!
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
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!
Thank you, thank you very much.
Thank you so much for this concept
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
czcams.com/video/C0H8D74f-Ys/video.html
Please use a php contact form or send me an email and send you a right code.
Same issue
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!
Love from Chennai.. Awesome tutorial I learning daily a new one...
Thanks Sasi
Thanks for the tutorial !
Only elastic email is supported as an SMTP host ?
Same,.
A 'return' statement can only be used within a function body in line 10
Can you send me the code you have
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
Thanks for the video! What should I use for my personal website then?
I did it but it didn't worked.can you explain this in a long video
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
This was so awesome!!!!!!
Super useful project ever sir, 👍 thank you so much 👍😘
Most welcome 😊
@@GreatStackDev It doesn't work at all.
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
a very useful one thank you
Watched many videos yet couldn't get any useful info. Thanks a million bro.
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
Does this work in hostinger SMTP and credentials or do I have to set one up for hostinger at elasticemail pls help
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?
Can you bring complete project based on laravel 8.
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
저도 좀 알려주세요 궁금해요
i can't thank you enough, you really helped me on this
Great explanation . Can u plz start ReactJs tutorial please
This is NOT a secure way of sending emails, beware, brothers.
Why man ???
Yes
@@deadgamer011you are giving away your password
watching from Thailand ♥ Thank you for teaching
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
thank you for such a useful tutorial
Thanks bro now I'm confident
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
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?
Thankyou so much ❣️
In this section
what does reset and return false stand for?
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
Your sharing really , a good stuff man.thanks a lot...
thanks Upendra
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
great, i have a nightmare with my contact form for weeks now. hope this works for long. thanks
Love From Bangladesh 🥰
Super helpful :)
Do I need to put my website online at some hosting to make this work? Or it will with opening browser locally?
Thank you so much fro your helping.
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.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!
Question: Can we put the same email for Username and To please tell me
Do we need a hosting software to send form to our email address ??
Great tutorial though I have some questions, If you have a host server and a domain (hostpapa for example) is there a way to get secure SMTP token from them? i just concern that token may expire some day if that service goes out. Also noticed this costs 15 dollars a month.
if you have web hosting you can go with PHP to get form data on email, It won't require any SMTP: czcams.com/video/Iv93yjdvkWI/video.html
amazing thank you its very informative....
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
Wow Awesome
thank you very much
Thank You Bro
Mai wait kar rha tha ❤❤❤❤
Pro from somalia I am your fan
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 >?
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.
Brother ,I am getting pop up message like successful registered but I am not getting any mail what can I do noe
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.
Embedding SMTP credentials (username and password) in the client-side code is a security no go!
This was so helpful Thanks alot
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
Hello, i have a question, how can i make a page for placing orders using html, css and js?
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
czcams.com/video/C0H8D74f-Ys/video.html
thanks a lot, ❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤❤
the that. you enter in username and password is it from elatic loin or actual mail id data
thank u so much .. and how to send that data to more than one person/Gmail ?????? please reply
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.
Thank you sir
you are welcome!
A 'return' statement can only be used within a function body
what does this mean? someone please help me
I have this
'SecureToken' or 'Host' property is required'
What should I do now?
Thank you so much Sir
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
Amazing content🔥🔥🔥
Flappy Birds Game Using Python With Source CODE
czcams.com/video/C0H8D74f-Ys/video.html
Please make a video on feedback form same like this way
if i have to recevie mail like this Is esensial to sign in the elastic website?