Тёмный

Create a Working Contact Form in HTML that emails you (w/ spam prevention too!) 

A Designer Who Codes
Подписаться 12 тыс.
Просмотров 96 тыс.
50% 1

Опубликовано:

 

11 сен 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 197   
@rebelleaf
@rebelleaf Год назад
I was going bonkers trying to solve this situation for my site. Went through a few tutorial with no luck. This video though was exactyl what I needed. Clearly spoken, step-by-step. Thanks!
@mythstory2901
@mythstory2901 2 года назад
I really want to thank you. I was looking for this kind of tutorial for almost weeks and now I finally found this just because of you. it helps me a lot. Once again thanks a lot, please make more tutorial videos like this.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You're very welcome!
@JacktheLightningRipper
@JacktheLightningRipper 2 года назад
Thank you for this presentation. I have been combing the internet trying to find the best way to make a contact function for my website for almost half a year. This helped out a ton.
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Oh sweet! You are so welcome.
@shaadhashmi6773
@shaadhashmi6773 2 года назад
I am a developer who just knows how to design. I am a front end developer and plan to learn backend languages like javascript. But for a project that I needed to put on the internet as soon as possible; it also required backend. My site did not have many things that required a backend but I just had a contact page which had to be connected to a backend. I searched it on youtube and saw dozens of video but each time I either got an error or it didnt work. I wasted my 2 hours in this. I also had some other front end work remaining which would easily take 2-3 hours. I got panicked that I will not be able to do it before my deadline but then I found this video as a life saver without writing a single line of backend code I brought life to my contact page. Thanks a lot sir. I subscribed to your channel liked the video and shared it and from now on I will follow you on a regular basis. I pray that you go viral on the internet. Thanks. Regards Shaad Hashmi.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Oh I've been in that panic before. So happy it helped you.
@shaadhashmi6773
@shaadhashmi6773 2 года назад
@@ADesignerWhoCodes thanks for the reply sir. I have uploaded the contact form on the internet. you can see it at techfreak.epizy.com/contact.php please I request you to write something in the form. I will be so happy if I recieve something from you. Just a wish no force sir. Thanks from the bottom of my heart!
@CompSciCentral
@CompSciCentral 2 года назад
Such a good tutorial. You are an amazing instructor, seriously.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
I appreciate that. Thank you!
@mayanknagpal5989
@mayanknagpal5989 2 года назад
Your presentation is very smooth and professional. Loved your video Thank you for sharing such informative content.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You're so welcome! Stoked it helped you.
@whirlwindmc1
@whirlwindmc1 2 года назад
Soooooooo helpful! I was wanting to see if it was possible to achieve an email submission with form redirect and all I could find was having to use php but this video saved me a lot of work and looks very seamless. Thank you so much
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You are so welcome. Ya the php way was the default way for years but there are new and better ways now. Stoked it helped you!
@Bruce_Yes
@Bruce_Yes 2 года назад
David did you have to pay for the upgrade on Github when you reached the 'pages'?
@ministryofanti-feminism1493
@ministryofanti-feminism1493 2 года назад
@@Bruce_Yes He clearly did. Though rather unhelpful that he didn't mention the fact.
@jontarbuck3087
@jontarbuck3087 7 месяцев назад
Thank you so much for taking the time to create this video, it was exactly what I was looking for. You have saved me a lot of time :-)
@ADesignerWhoCodes
@ADesignerWhoCodes 7 месяцев назад
You are very welcome.
@ashrefb
@ashrefb 2 года назад
The best video I watched that really helped me in 2022 I think. thank you so much man!
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Wow. That's such an awesome comment. You are so welcome.
@tlontheparkplaceprince4053
@tlontheparkplaceprince4053 2 года назад
Hell yea! This was great and was exactly what I was looking for. I was searching forever to find something like this. Keep doing your thing, designer that codes! It is appreciated for real.
@KHANSOFFICIAL
@KHANSOFFICIAL 3 года назад
Atlast، a free service to get mail 😇😌 Thanks man⁦❤️⁩
@ADesignerWhoCodes
@ADesignerWhoCodes 3 года назад
You're so welcome!
@mknightdev
@mknightdev 2 года назад
Thank you again! I came here from your form video that you mentioned at the end of this one and fits my needs perfectly.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You are so welcome! I'm stoked to have helped you.
@dteqtivetuts3234
@dteqtivetuts3234 2 года назад
Don't know why I always assumed there has to be backend work. This saves so much time. Thanks.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
If it's too complicated, take a step back and see how it can be easier. That's kinda how I think about it.
@saurabhbhambry
@saurabhbhambry Год назад
Thanks a lot for this tutorial, this was exactly the kind of solution that I was looking for. I'm an iOS developer and just wanted something straightforward for implementing a functioning contact form without any extra serverside backend work.
@tuku_mann
@tuku_mann 2 года назад
Wow, that's the project I was dreaming of! Thank you soooo much!
@gauravmalik4693
@gauravmalik4693 2 года назад
Hey Brother! 👋 I'm really thankful to you for helping us. Love from India 🇮🇳
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Thanks! Always love to hear where people are writing in from.
@hjhornoz
@hjhornoz 11 месяцев назад
Thank you so much. I am currently self studying and your video is a great help in achieving my goal. Hope to learn more from you :)
@ADesignerWhoCodes
@ADesignerWhoCodes 11 месяцев назад
Oh stoked. Click on the videos tab in my channel and you can find all of my videos. I'm re-launching my online course too.
@mr.j366
@mr.j366 2 месяца назад
You are da best bro keep it up
@ygamespro9156
@ygamespro9156 2 года назад
you are the best , thank you realy, i was looking for this tutoriel, & because you i find it , thank you
@CodingJourney
@CodingJourney 3 года назад
Excellent tutorial!! 🙏💙💙🙂
@ADesignerWhoCodes
@ADesignerWhoCodes 3 года назад
You're welcome.
@marleenloohuis2111
@marleenloohuis2111 3 месяца назад
Thank you very much. Great explanation. Subscribed! I found out that '_next' is replaced by '_redirect'.
@traughdaddy
@traughdaddy 2 года назад
My url comes up red whenever I place it in the html. When I click the https link it takes me to the site that says your form should include method= “POST” which it does. Any idea what I’m doing wrong?
@somehobo6861
@somehobo6861 Год назад
This was a great video! thanks for sharing! Love from Egypt!
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
So welcome. Hello to Egypt.
@arsh10x
@arsh10x Год назад
I'm glad I found this video. It's a life saver!!!
@viakhnine
@viakhnine 2 года назад
A Designer Who Codes is a cool cat.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Awww man. Thank you
@tchippat7634
@tchippat7634 10 месяцев назад
Very well explained he could be a great teacher.
@piyushyadav7764
@piyushyadav7764 2 года назад
You are great man...this is the thing which I needed.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Sweet! You're welcome.
@cyanidecypher
@cyanidecypher Год назад
Great video, thank you! I was also able to use formsubmit to set up an Attach Files option so that users could send in images.
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
That’s sweet! You’re so welcome
@jacobkelcy4087
@jacobkelcy4087 2 года назад
I put in my info haven't gotten email for source code. btw amazing tutorial been looking for something like this for ages.
@thegoat2936
@thegoat2936 2 года назад
Hello, it's a beautiful tutoriel but i have a question. Can I use it in a real online web application ??
@dnel3000
@dnel3000 2 года назад
Thanks for this. Any updated info/coding on the honeypot? I'm still getting some spam on a daily basis
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
I know only as much as Netlify provides in their docs. One thing to consider is adding the additional captcha. Here's the official documentation: docs.netlify.com/forms/spam-filters/
@ibeattheone
@ibeattheone Год назад
Love you! Super, super helpful!!!
@funwithraya
@funwithraya Год назад
Thank you very much. I tried it and it worked perfectly.
@conormeehan8295
@conormeehan8295 3 года назад
Thanks so much, really needed this video. However that honeypot did not stop spammers, had to put the captcha back on.
@ADesignerWhoCodes
@ADesignerWhoCodes 3 года назад
Good to know. So far it has been catching all of my spam, but unfortunately I can't control the spammers out there.
@VladimirPlavac
@VladimirPlavac 2 года назад
Same, the form has been online a couple days, and I've already received 4 spam e-mails...
@jaydonisrael
@jaydonisrael 2 года назад
Thank you Haydn for this tutorial! I used it in my project. My question is when a user enters an Invalid email address and clicks on the submit button, the user gets directed to FormSubmit's page that reads: Invalid email address You entered email. That is an invalid email address. Please correct the form and try to submit again here. You are using FormSubmit logo How can I change this page to an alternative URL? I looked into the docs on FormSubmit's website and I couldn't find that option. I used _next to create a "Thank You" page successfully, but I couldn't find documentation for an "invalid email" page. Thanks so much for this video!
@craftyadmin9201
@craftyadmin9201 2 года назад
Hey Man, I cant thank you enough for this wonderful presentation, thank you. regards
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You're welcome.
@haekalbp2314
@haekalbp2314 2 года назад
Excellent! Thank you sir!🙏🏿👍🏿
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
So welcome!
@muhammadbangkit7528
@muhammadbangkit7528 2 года назад
Great video man, I want to ask can I change the _next into only alert notification? So that the users only get alert notification that says 'your forms submitted' not the whole HTML file, thank you
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
In theory. But double check the docs to be sure.
@CompSciCentral
@CompSciCentral 2 года назад
I'm looking for the same solution. It appears from the docs that it can be done with AJAX.
@petrzajkas337
@petrzajkas337 Год назад
Awesome!! thanks mate it worked just fine
@andresgodoy2526
@andresgodoy2526 Год назад
Any advice for the file uploading. I used the code given, and it says I should be able to upload more than one file, but when I try it the email that is sent to me only includes the most recent file that was uploaded.
@RicardoHenriquez-jr9kw
@RicardoHenriquez-jr9kw Год назад
Wonderful tutorial!
@ChristianWarrior1
@ChristianWarrior1 6 месяцев назад
Unfortunately form submit is very slow sometimes depending on the server traffic. Sometimes it feels like it takes forever to send an email from a webpage contact form
@ADesignerWhoCodes
@ADesignerWhoCodes 6 месяцев назад
There’s also Netlify forms. That’s what I generally use. But I enjoy giving all the options.
@JuniorFast
@JuniorFast 9 месяцев назад
I have my own html already created I uploaded and followed steps and my file failed please help.
@anthonyreyescdjr
@anthonyreyescdjr 2 года назад
Great Tutorial and Great service.
@JamesyLive22
@JamesyLive22 2 года назад
This is so useful, thank you so much
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Glad it was helpful!
@emekaokerue2337
@emekaokerue2337 Год назад
Thank you so much. You are amazing!
@carloautor
@carloautor Год назад
Where to get the Honeypot? And where is the configuration for honeypot?
@user-uj9ir7mh2s
@user-uj9ir7mh2s 2 года назад
Nice. Thanks a lot actually. It worked, you explained it well. Thank you
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Stoked!
@chasmboi
@chasmboi Год назад
THANKS THANK YOU SO MUCH YOU ARE AMAZING
@natalianatalia3677
@natalianatalia3677 Год назад
Thank you for this tutorial, very helpful!
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
You are so welcome
@kayevm7645
@kayevm7645 2 года назад
This is very powerful! Thank you very much!!!!
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You're so welcome!
@sathvikmalgikar2842
@sathvikmalgikar2842 Год назад
thanks man u r a legend
@aishwaryac7041
@aishwaryac7041 Год назад
I have got verified mail message to my mail but me not getting activation link mail what to do
@adamforgac8853
@adamforgac8853 2 года назад
awesome! everything works
@morenatirana4539
@morenatirana4539 Год назад
AMAZING !!!! Thank You !!!
@edgaraslisenkovas1935
@edgaraslisenkovas1935 Год назад
Hello, everything works, but when I want success page it won't work, is it only html because I using php ?
@abdullahimran8761
@abdullahimran8761 Год назад
*success page not working he just show the form submit thankyou page*
@notknowing8978
@notknowing8978 2 года назад
Great video! Thank you.
@JaseRuns
@JaseRuns 6 месяцев назад
Thank you!
@tomaskucera3510
@tomaskucera3510 2 года назад
Amazing! Thanks man!
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Welcome.
@RedCayGaming
@RedCayGaming Год назад
Awesome tutorial!
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Thank you!
@abrahambayland9232
@abrahambayland9232 Год назад
Can u show me another tutorial because i did not see the persons message in my gmail.
@lloyd_talks
@lloyd_talks 2 года назад
Great presentation job! Very useful.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Thank you very much.
@Mehdiabd2233
@Mehdiabd2233 Год назад
Heeey please can you help me You see when its said you using formsubmit how do i remove it
@thatguy6664
@thatguy6664 3 года назад
Excellent, thanks!
@user-bx1pg9sw2n
@user-bx1pg9sw2n 2 года назад
love it!
@vitaligolev2953
@vitaligolev2953 Год назад
Thank you very very much!
@matrix1929
@matrix1929 2 года назад
Great video, thank you
@Joey_-id5uw
@Joey_-id5uw Год назад
Hey.. Thanks for this video man, it's really amazing. Anyways I got into some issue, like for some reason I can't receive an activation email, idk if I'm the only one that faced this.. Any hope I can get a support from you or anyone willing to help.. Thanks
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Unfortunately I can’t troubleshoot everyone’s technically issues. In a perfect world, yes. I’d reach out to the company and see what is happening. That’s the best suggestion. Sorry you’re having issues.
@Joey_-id5uw
@Joey_-id5uw Год назад
@@ADesignerWhoCodes Thanks..
@Joey_-id5uw
@Joey_-id5uw Год назад
@@ADesignerWhoCodes It finally worked
@AlanMartinez-xb3hf
@AlanMartinez-xb3hf Год назад
@@Joey_-id5uw what did you do to make it work?
@Maru-ge6jn
@Maru-ge6jn 2 года назад
This was very good, thank you sir!
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You are welcome!
@shitbreak2k
@shitbreak2k Год назад
loool this is so good and easy too use TNX!
@illmatic08
@illmatic08 2 года назад
I got everything working on my personal website with this, however when i used the contact form on mobile, it is failing to load my success page, do you have any idea why? Also thank you very much for this tutorial it was super helpful
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
That's odd. Are you getting a 404 error? Don't forget to try incognito mode to ensure pages aren't cached.
@codingwithdas
@codingwithdas Год назад
Thanks alot it's working
@user-xq1gg3zp2q
@user-xq1gg3zp2q 11 месяцев назад
THANK YOU SO MUCH!!!!!!!!
@ADesignerWhoCodes
@ADesignerWhoCodes 11 месяцев назад
You are so welcome.
@Preshhbeats
@Preshhbeats 5 месяцев назад
Thank you so much sir 🎉
@ADesignerWhoCodes
@ADesignerWhoCodes 5 месяцев назад
So nice of you
@michreano
@michreano 2 года назад
Thank you so much for this.
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
You are so welcome!
@ExtremeCleanoutSolutions
@ExtremeCleanoutSolutions 5 месяцев назад
I tried to buy your code for $3.00 and it did not work
@ADesignerWhoCodes
@ADesignerWhoCodes 5 месяцев назад
I changed things around. Email me from my site and I’ll help.
@adisaster8734
@adisaster8734 Год назад
everything is perfect thank you! but my success page leads to a "NET::ERR_CERT_COMMON_NAME_INVALID" idk how to fix this? do i need to add the success page to my dns and create a new ssl to include it? im basically using tumblr to "host" my website
@adisaster8734
@adisaster8734 Год назад
nvm i just needed to give it a bit of time to fully go thru. thank you for the tutorial!
@joefairplay2837
@joefairplay2837 3 года назад
Why would anyone send all their communications to a third party website for processing? This is stupid.
@ADesignerWhoCodes
@ADesignerWhoCodes 3 года назад
I mean technically you just sent your communications to a third party website by commenting and creating an account on Google. If it makes you feel uncomfortable, you don't have to use it. I just put out these videos as an option.
@joefairplay2837
@joefairplay2837 3 года назад
@@ADesignerWhoCodes No. Technically I just posted a public message on a social media site where there is no presumption of privacy. Much different than routing my private emails through an unknown.
@fastLinkNg
@fastLinkNg 2 года назад
I like this guy
@IzabellaAndDanika
@IzabellaAndDanika Год назад
I’m not sure
@AvidAfrican
@AvidAfrican Год назад
And which way can you send it for it to be encrypted? Nothing is hidden in this world lol! We are all under their watch.
@Zolarmew
@Zolarmew Год назад
I'm not receiving the activation email from them :(((
@haigoto46
@haigoto46 2 года назад
Hay, where do you enter the CAPTCHA key code and secret code?
@GnarlyEmoji
@GnarlyEmoji 2 года назад
My formsubmit did not work.
@sundarapandim1104
@sundarapandim1104 Год назад
Sir... Plz post video about WhatsApp button and call now button on website bottom side.. Plz post video and sourcecode sir
@ShinyBob
@ShinyBob 2 года назад
THANK YOU SO MUCH !👍👍
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Welcome!!
@glasscow9965
@glasscow9965 Год назад
Can I add multiple email addresses to the section for those who receive the form when it is submitted? And do I just separate with a comma?
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Possibly. Haven’t tried that yet.
@SuhailkcOfficial
@SuhailkcOfficial 3 года назад
Thank you for the video 👍
@ADesignerWhoCodes
@ADesignerWhoCodes 3 года назад
You're welcome. Happy to make it.
@momentum6780
@momentum6780 Год назад
Can this be used on online server also ?
@philipp2202
@philipp2202 10 месяцев назад
good question. Can anybody answer it please?
@kolakeman-gpuro6916
@kolakeman-gpuro6916 2 года назад
does the version of bootstrap may be the reason why it is not working?
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Make sure you are using Bootstrap 5.
@pankajravi9146
@pankajravi9146 3 года назад
hello Haydan , i am a developer , I have 3 websites and i want to use your method of receiving mails as it is excellent, how many websites can Github support ?? i configured it on 1 other it's not working to create a repository in main ...there is no main option...
@ADesignerWhoCodes
@ADesignerWhoCodes 3 года назад
In theory, unlimited. Main is the default branch. If it is an older repo, the default was master, but they changed it for a more neutral tone. I've got a few older repos that still use master I'll eventually get around to switching. Thanks! I just try and find the easiest path.
@dinhphu28
@dinhphu28 Год назад
Thanks a googol!
@balavishnutejaswi6394
@balavishnutejaswi6394 Год назад
Hey Thank you for the video But I have a small issue Since I dont have a paid Github Account I cannot use Github Pages I tried running the HTML on a local server But I keep getting the error Connection Timed out
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Netlify.com or firebase are free
@Dt-8398
@Dt-8398 3 года назад
Nice video. But I’m having an issue when I click send I do not get the default confirmation page/captcha, What could be causing this?
@Dt-8398
@Dt-8398 3 года назад
Oh and I’m using git hub pages.
@ADesignerWhoCodes
@ADesignerWhoCodes 3 года назад
I'm not entirely sure. Unfortunately I didn't encounter that issue.
@lindokuhlephiri6553
@lindokuhlephiri6553 2 года назад
For me it does not show activate form in my email
@dezaku6612
@dezaku6612 2 года назад
did you find any fix?
@schraderwebsolutions5713
@schraderwebsolutions5713 2 года назад
How is the deliverability of this form? Will it hit the email inbox consistently? Thx!
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
I haven't had an issue with it yet.
@jayhemyt
@jayhemyt Год назад
please send me the source code on Github or drive
@haigoto46
@haigoto46 2 года назад
Why I get "Whoops, looks like something went wrong."
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Unfortunately you'll have to check the docs for it. Wish I could tell ya.
@anjielozapata2804
@anjielozapata2804 2 года назад
sir can you make part 3? design the form using css. thank you
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
Not a bad idea. Let me see what I can come up with.
@anjielozapata2804
@anjielozapata2804 2 года назад
@@ADesignerWhoCodes thank you! I will wait for it :)
@innashavrina9447
@innashavrina9447 9 месяцев назад
Do you know any easy solution for newsletter too?
@ADesignerWhoCodes
@ADesignerWhoCodes 8 месяцев назад
Convertkit is your friend. Convertkit.com
@ollysalanson9452
@ollysalanson9452 Год назад
Hoe do you find tools like form submit? Is it knowledge you gather over time or is there a resource list where you can look for solutions?
@ADesignerWhoCodes
@ADesignerWhoCodes Год назад
Hmmm. Just as I hear about things I start to use them. I use FormSubmit _only_ if I'm not using Netlify. And sometimes just a Google search.
@resurekt97
@resurekt97 2 года назад
I don't know why it only has to be index.html, why can't it be contactform.html...?
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
It can be whatever you want. Index is just the first page to any website and we’ll I don’t have any other pages. 🤷‍♂️
@resurekt97
@resurekt97 2 года назад
@@ADesignerWhoCodes I tried that though. And when I clicked my GitHub pages link to the form it gave me a 404 error. I'll try it again soon. 👍
@ADesignerWhoCodes
@ADesignerWhoCodes 2 года назад
@@resurekt97 if you are using git hub pages, give it about 30 min to get the URL working.
@TheArcticKitten
@TheArcticKitten 2 года назад
@@resurekt97 having the same issue, even after it's uploaded with firebase
Далее
How to put an HTML website online (on the Internet)
29:37
How Strong is Tin Foil? 💪
00:26
Просмотров 32 млн
Top 10 CSS One Liners That Will Blow Your Mind
13:34
Просмотров 952 тыс.
Send emails from a HTML Contact Form
12:40
Просмотров 386 тыс.
Send Email using HTML + JavaScript (EmailJs Tutorial)
16:30
Subtle, yet Beautiful Scroll Animations
5:04
Просмотров 1,7 млн
How Strong is Tin Foil? 💪
00:26
Просмотров 32 млн