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

[@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]

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]

You're very welcome!

[@mknightdev]

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]

You are so welcome! I'm stoked to have helped you.

[@JacktheLightningRipper]

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]

Oh sweet! You are so welcome.

[@jontarbuck3087]

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]

You are very welcome.

[@tlontheparkplaceprince4053]

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.

[@CompSciCentral]

Such a good tutorial. You are an amazing instructor, seriously.

[@ADesignerWhoCodes]

I appreciate that. Thank you!

[@MustafaSheikh]

you make really good and useful tutorials . simple and easy to follow for a non-dev :)

[@shaadhashmi6773]

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]

Oh I've been in that panic before. So happy it helped you.

[@shaadhashmi6773]

@@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!

[@WestonObermeyer]

This is a really, really good tutorial. Thank you

[@ashrefb]

The best video I watched that really helped me in 2022 I think. thank you so much man!

[@ADesignerWhoCodes]

Wow. That's such an awesome comment. You are so welcome.

[@mayanknagpal5989]

Your presentation is very smooth and professional. Loved your video Thank you for sharing such informative content.

[@ADesignerWhoCodes]

You're so welcome! Stoked it helped you.

[@whirlwindmc1]

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]

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]

David did you have to pay for the upgrade on Github when you reached the 'pages'?

[@ministryofanti-feminism1493]

@@Bruce_Yes He clearly did. Though rather unhelpful that he didn't mention the fact.

[@KHANSOFFICIAL]

Atlast، a free service to get mail 😇😌 Thanks man⁦❤️⁩

[@ADesignerWhoCodes]

You're so welcome!

[@tuku_mann]

Wow, that's the project I was dreaming of! Thank you soooo much!

[@somehobo6861]

This was a great video! thanks for sharing! Love from Egypt!

[@ADesignerWhoCodes]

So welcome. Hello to Egypt.

[@dnel3000]

Thanks for this. Any updated info/coding on the honeypot? I'm still getting some spam on a daily basis

[@ADesignerWhoCodes]

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/

[@arsh10x]

I'm glad I found this video. It's a life saver!!!

[@ibeattheone]

Love you! Super, super helpful!!!

[@ygamespro9156]

you are the best , thank you realy, i was looking for this tutoriel, & because you i find it , thank you

[@mr.j366]

You are da best bro keep it up

[@dteqtivetuts3234]

Don't know why I always assumed there has to be backend work. This saves so much time. Thanks.

[@ADesignerWhoCodes]

If it's too complicated, take a step back and see how it can be easier. That's kinda how I think about it.

[@piyushyadav7764]

You are great man...this is the thing which I needed.

[@ADesignerWhoCodes]

Sweet! You're welcome.

[@CodingJourney]

Excellent tutorial!! 🙏💙💙🙂

[@ADesignerWhoCodes]

You're welcome.

[@thegoat2936]

Hello, it's a beautiful tutoriel but i have a question. Can I use it in a real online web application ??

[@viakhnine]

A Designer Who Codes is a cool cat.

[@ADesignerWhoCodes]

Awww man. Thank you

[@the_black_gull-d8j]

Wonderful tutorial!

[@hjhornoz]

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]

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.

[@funwithraya]

Thank you very much. I tried it and it worked perfectly.

[@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]

That’s sweet! You’re so welcome

[@petrzajkas337]

Awesome!! thanks mate it worked just fine

[@anthonyreyescdjr]

Great Tutorial and Great service.

[@RedCayGaming]

Awesome tutorial!

[@ADesignerWhoCodes]

Thank you!

[@nataliafrontend]

Thank you for this tutorial, very helpful!

[@ADesignerWhoCodes]

You are so welcome

[@catherineleimbach1331]

Thanks so much, you are amazing!!

[@JamesyLive22]

This is so useful, thank you so much

[@ADesignerWhoCodes]

Glad it was helpful!

[@carloautor]

Where to get the Honeypot? And where is the configuration for honeypot?

[@haekalbp2314]

Excellent! Thank you sir!🙏🏿👍🏿

[@ADesignerWhoCodes]

So welcome!

[@ChristianWarrior1]

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]

There’s also Netlify forms. That’s what I generally use. But I enjoy giving all the options.

[@gauravmalik4693]

Hey Brother! 👋 I'm really thankful to you for helping us. Love from India 🇮🇳

[@ADesignerWhoCodes]

Thanks! Always love to hear where people are writing in from.

[@kayevm7645]

This is very powerful! Thank you very much!!!!

[@ADesignerWhoCodes]

You're so welcome!

[@chasmboi]

THANKS THANK YOU SO MUCH YOU ARE AMAZING

[@tomaskucera3510]

Amazing! Thanks man!

[@ADesignerWhoCodes]

Welcome.

[@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.

[@صفاقحطانيوسف]

Nice. Thanks a lot actually. It worked, you explained it well. Thank you

[@ADesignerWhoCodes]

Stoked!

[@craftyadmin9201]

Hey Man, I cant thank you enough for this wonderful presentation, thank you. regards

[@ADesignerWhoCodes]

You're welcome.

[@lloyd_talks]

Great presentation job! Very useful.

[@ADesignerWhoCodes]

Thank you very much.

[@vitaligolev2953]

Thank you very very much!

[@morenatirana4539]

AMAZING !!!! Thank You !!!

[@notknowing8978]

Great video! Thank you.

[@adamforgac8853]

awesome! everything works

[@muhammadbangkit7528]

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]

In theory. But double check the docs to be sure.

[@CompSciCentral]

I'm looking for the same solution. It appears from the docs that it can be done with AJAX.

[@sathvikmalgikar2842]

thanks man u r a legend

[@ShinyBob]

THANK YOU SO MUCH !👍👍

[@ADesignerWhoCodes]

Welcome!!

[@Preshhbeats]

Thank you so much sir 🎉

[@ADesignerWhoCodes]

So nice of you

[@abrahambayland9232]

Can u show me another tutorial because i did not see the persons message in my gmail.

[@Maru-ge6jn]

This was very good, thank you sir!

[@ADesignerWhoCodes]

You are welcome!

[@JuniorFast]

I have my own html already created I uploaded and followed steps and my file failed please help.

[@thatguy6664]

Excellent, thanks!

[@momentum6780]

Can this be used on online server also ?

[@matrix1929]

Great video, thank you

[@michreano]

Thank you so much for this.

[@ADesignerWhoCodes]

You are so welcome!

[@DylanKazunaga-h9j]

THANK YOU SO MUCH!!!!!!!!

[@ADesignerWhoCodes]

You are so welcome.

[@innashavrina9447]

Do you know any easy solution for newsletter too?

[@ADesignerWhoCodes]

Convertkit is your friend. Convertkit.com

[@aishwaryac7041]

I have got verified mail message to my mail but me not getting activation link mail what to do

[@JaseRuns]

Thank you!

[@jaydonisrael]

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!

[@GnarlyEmoji]

My formsubmit did not work.

[@haigoto46]

Hay, where do you enter the CAPTCHA key code and secret code?

[@man-g-puro]

does the version of bootstrap may be the reason why it is not working?

[@ADesignerWhoCodes]

Make sure you are using Bootstrap 5.

[@Zolarmew]

I'm not receiving the activation email from them :(((

[@jacobkelcy4087]

I put in my info haven't gotten email for source code. btw amazing tutorial been looking for something like this for ages.

[@edgaraslisenkovas1935]

Hello, everything works, but when I want success page it won't work, is it only html because I using php ?

[@Mehdiabd2233]

Heeey please can you help me You see when its said you using formsubmit how do i remove it

[@no-ih6dw]

nc work❤. In success page, is it possible to make it a modal for success message, how i can do that because in your code value = success.html

[@codingwithdas]

Thanks alot it's working

[@suhail_kc]

Thank you for the video 👍

[@ADesignerWhoCodes]

You're welcome. Happy to make it.

[@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.

[@lindokuhlephiri6553]

For me it does not show activate form in my email

[@dezaku6612]

did you find any fix?

[@abdullahimran8761]

*success page not working he just show the form submit thankyou page*

[@schraderwebsolutions5713]

How is the deliverability of this form? Will it hit the email inbox consistently? Thx!

[@ADesignerWhoCodes]

I haven't had an issue with it yet.

[@marleenloohuis2111]

Thank you very much. Great explanation. Subscribed! I found out that '_next' is replaced by '_redirect'.

[@anjielozapata2804]

sir can you make part 3? design the form using css. thank you

[@ADesignerWhoCodes]

Not a bad idea. Let me see what I can come up with.

[@anjielozapata2804]

@@ADesignerWhoCodes thank you! I will wait for it :)

[@haigoto46]

Why I get "Whoops, looks like something went wrong."

[@ADesignerWhoCodes]

Unfortunately you'll have to check the docs for it. Wish I could tell ya.

[@রহস্যেরমায়াজাল-ধ৩ঝ]

love it!

[@yekyawtun8126]

Does it use OAuth 2.0?

[@ADesignerWhoCodes]

Nope. Nothing to login to

[@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]

Possibly. Haven’t tried that yet.

[@illmatic08]

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]

That's odd. Are you getting a 404 error? Don't forget to try incognito mode to ensure pages aren't cached.

[@Dt-8398]

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]

Oh and I’m using git hub pages.

[@ADesignerWhoCodes]

I'm not entirely sure. Unfortunately I didn't encounter that issue.

[@ExtremeCleanoutSolutions]

I tried to buy your code for $3.00 and it did not work

[@ADesignerWhoCodes]

I changed things around. Email me from my site and I’ll help.

[@cyphermediaschool]

awesome very helpful

[@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]

nvm i just needed to give it a bit of time to fully go thru. thank you for the tutorial!

[@sundarapandim1104]

Sir... Plz post video about WhatsApp button and call now button on website bottom side.. Plz post video and sourcecode sir

[@traughdaddy]

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?

[@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]

Netlify.com or firebase are free

[@resurekt97]

I don't know why it only has to be index.html, why can't it be contactform.html...?

[@ADesignerWhoCodes]

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]

@@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]

@@resurekt97 if you are using git hub pages, give it about 30 min to get the URL working.

[@TheArcticKitten]

@@resurekt97 having the same issue, even after it's uploaded with firebase

[@mahamfatima1177]

Hey what if i host my website on a separate domain, will this still work?

[@ADesignerWhoCodes]

Sure. Any domain should work.

[@pankajravi9146]

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]

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.

[@alexanderwardaya5075]

Thanks

[@ADesignerWhoCodes]

Welcome Alexander.

[@dinhphu28]

Thanks a googol!