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

แชร์
ฝัง
  • เผยแพร่เมื่อ 11 ธ.ค. 2024

ความคิดเห็น • 194

  • @rebelleaf
    @rebelleaf ปีที่แล้ว +4

    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 ปีที่แล้ว +11

    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.

  • @jontarbuck3087
    @jontarbuck3087 10 หลายเดือนก่อน

    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 :-)

  • @mknightdev
    @mknightdev 2 ปีที่แล้ว +1

    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 ปีที่แล้ว +1

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

  • @MustafaSheikh
    @MustafaSheikh หลายเดือนก่อน

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

  • @JacktheLightningRipper
    @JacktheLightningRipper 2 ปีที่แล้ว +1

    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.

  • @shaadhashmi6773
    @shaadhashmi6773 2 ปีที่แล้ว +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 ปีที่แล้ว +1

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

    • @shaadhashmi6773
      @shaadhashmi6773 2 ปีที่แล้ว +1

      @@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
    @WestonObermeyer หลายเดือนก่อน +1

    This is a really, really good tutorial. Thank you

  • @ashrefb
    @ashrefb 2 ปีที่แล้ว +1

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

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 ปีที่แล้ว

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

  • @dteqtivetuts3234
    @dteqtivetuts3234 2 ปีที่แล้ว +1

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

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  2 ปีที่แล้ว +4

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

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

  • @CompSciCentral
    @CompSciCentral 2 ปีที่แล้ว +10

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

  • @KHANSOFFICIAL
    @KHANSOFFICIAL 3 ปีที่แล้ว +1

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

  • @hjhornoz
    @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
      @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.

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

  • @mayanknagpal5989
    @mayanknagpal5989 2 ปีที่แล้ว +5

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

  • @whirlwindmc1
    @whirlwindmc1 3 ปีที่แล้ว +5

    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  3 ปีที่แล้ว +1

      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.

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

  • @somehobo6861
    @somehobo6861 ปีที่แล้ว

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

  • @tuku_mann
    @tuku_mann 2 ปีที่แล้ว

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

  • @arsh10x
    @arsh10x ปีที่แล้ว

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

  • @funwithraya
    @funwithraya ปีที่แล้ว

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

  • @tchippat7634
    @tchippat7634 ปีที่แล้ว

    Very well explained he could be a great teacher.

  • @piyushyadav7764
    @piyushyadav7764 2 ปีที่แล้ว

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

  • @mr.j366
    @mr.j366 5 หลายเดือนก่อน

    You are da best bro keep it up

  • @ygamespro9156
    @ygamespro9156 2 ปีที่แล้ว +1

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

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

  • @ibeattheone
    @ibeattheone ปีที่แล้ว

    Love you! Super, super helpful!!!

  • @petrzajkas337
    @petrzajkas337 ปีที่แล้ว

    Awesome!! thanks mate it worked just fine

  • @viakhnine
    @viakhnine 2 ปีที่แล้ว

    A Designer Who Codes is a cool cat.

  • @chasmboi
    @chasmboi ปีที่แล้ว

    THANKS THANK YOU SO MUCH YOU ARE AMAZING

  • @CodingJourney
    @CodingJourney 3 ปีที่แล้ว +2

    Excellent tutorial!! 🙏💙💙🙂

  • @thegoat2936
    @thegoat2936 2 ปีที่แล้ว +1

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

  • @dnel3000
    @dnel3000 3 ปีที่แล้ว +1

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

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  3 ปีที่แล้ว

      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/

  • @marleenloohuis2111
    @marleenloohuis2111 6 หลายเดือนก่อน

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

  • @the_black_gull-d8j
    @the_black_gull-d8j ปีที่แล้ว

    Wonderful tutorial!

  • @صفاقحطانيوسف
    @صفاقحطانيوسف 2 ปีที่แล้ว

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

  • @catherineleimbach1331
    @catherineleimbach1331 2 ปีที่แล้ว

    Thanks so much, you are amazing!!

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

  • @sathvikmalgikar2842
    @sathvikmalgikar2842 ปีที่แล้ว

    thanks man u r a legend

  • @RedCayGaming
    @RedCayGaming ปีที่แล้ว

    Awesome tutorial!

  • @carloautor
    @carloautor ปีที่แล้ว

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

  • @nataliafrontend
    @nataliafrontend ปีที่แล้ว

    Thank you for this tutorial, very helpful!

  • @adamforgac8853
    @adamforgac8853 2 ปีที่แล้ว

    awesome! everything works

  • @tomaskucera3510
    @tomaskucera3510 2 ปีที่แล้ว

    Amazing! Thanks man!

  • @craftyadmin9201
    @craftyadmin9201 2 ปีที่แล้ว

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

  • @anthonyreyescdjr
    @anthonyreyescdjr 2 ปีที่แล้ว

    Great Tutorial and Great service.

  • @haekalbp2314
    @haekalbp2314 3 ปีที่แล้ว +1

    Excellent! Thank you sir!🙏🏿👍🏿

  • @kayevm7645
    @kayevm7645 2 ปีที่แล้ว

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

  • @abrahambayland9232
    @abrahambayland9232 ปีที่แล้ว

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

  • @JuniorFast
    @JuniorFast ปีที่แล้ว

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

  • @vitaligolev2953
    @vitaligolev2953 ปีที่แล้ว

    Thank you very very much!

  • @morenatirana4539
    @morenatirana4539 2 ปีที่แล้ว

    AMAZING !!!! Thank You !!!

  • @Preshhbeats
    @Preshhbeats 8 หลายเดือนก่อน

    Thank you so much sir 🎉

  • @Mehdiabd2233
    @Mehdiabd2233 ปีที่แล้ว

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

  • @ShinyBob
    @ShinyBob 2 ปีที่แล้ว

    THANK YOU SO MUCH !👍👍

  • @Zolarmew
    @Zolarmew 2 ปีที่แล้ว

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

  • @ChristianWarrior1
    @ChristianWarrior1 9 หลายเดือนก่อน

    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  9 หลายเดือนก่อน +1

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

  • @edgaraslisenkovas1935
    @edgaraslisenkovas1935 ปีที่แล้ว

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

  • @haigoto46
    @haigoto46 2 ปีที่แล้ว

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

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

    love it!

  • @aishwaryac7041
    @aishwaryac7041 ปีที่แล้ว

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

  • @DylanKazunaga-h9j
    @DylanKazunaga-h9j ปีที่แล้ว

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

  • @momentum6780
    @momentum6780 ปีที่แล้ว

    Can this be used on online server also ?

  • @GnarlyEmoji
    @GnarlyEmoji 2 ปีที่แล้ว

    My formsubmit did not work.

  • @JaseRuns
    @JaseRuns 9 หลายเดือนก่อน

    Thank you!

  • @codingwithdas
    @codingwithdas ปีที่แล้ว

    Thanks alot it's working

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

  • @notknowing8978
    @notknowing8978 3 ปีที่แล้ว

    Great video! Thank you.

  • @michreano
    @michreano 2 ปีที่แล้ว

    Thank you so much for this.

  • @Maru-ge6jn
    @Maru-ge6jn 2 ปีที่แล้ว

    This was very good, thank you sir!

  • @man-g-puro
    @man-g-puro 2 ปีที่แล้ว

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

  • @abdullahimran8761
    @abdullahimran8761 ปีที่แล้ว

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

  • @innashavrina9447
    @innashavrina9447 ปีที่แล้ว

    Do you know any easy solution for newsletter too?

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  11 หลายเดือนก่อน

      Convertkit is your friend. Convertkit.com

  • @lloyd_talks
    @lloyd_talks 3 ปีที่แล้ว

    Great presentation job! Very useful.

  • @matrix1929
    @matrix1929 2 ปีที่แล้ว

    Great video, thank you

  • @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?

  • @schraderwebsolutions5713
    @schraderwebsolutions5713 2 ปีที่แล้ว

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

  • @muhammadbangkit7528
    @muhammadbangkit7528 2 ปีที่แล้ว +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.

  • @JamesyLive22
    @JamesyLive22 3 ปีที่แล้ว

    This is so useful, thank you so much

  • @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 :)

  • @thatguy6664
    @thatguy6664 3 ปีที่แล้ว

    Excellent, thanks!

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

  • @lindokuhlephiri6553
    @lindokuhlephiri6553 2 ปีที่แล้ว

    For me it does not show activate form in my email

    • @dezaku6612
      @dezaku6612 2 ปีที่แล้ว

      did you find any fix?

  • @sundarapandim1104
    @sundarapandim1104 ปีที่แล้ว

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

  • @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?

  • @mahamfatima1177
    @mahamfatima1177 2 ปีที่แล้ว

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

  • @yekyawtun8126
    @yekyawtun8126 ปีที่แล้ว

    Does it use OAuth 2.0?

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

  • @cyphermediaschool
    @cyphermediaschool 2 ปีที่แล้ว

    awesome very helpful

  • @SuhailkcOfficial
    @SuhailkcOfficial 3 ปีที่แล้ว

    Thank you for the video 👍

  • @balavishnutejaswi6394
    @balavishnutejaswi6394 2 ปีที่แล้ว

    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

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

  • @ExtremeCleanoutSolutions
    @ExtremeCleanoutSolutions 8 หลายเดือนก่อน

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

    • @ADesignerWhoCodes
      @ADesignerWhoCodes  8 หลายเดือนก่อน

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

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

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

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

  • @ollysalanson9452
    @ollysalanson9452 2 ปีที่แล้ว

    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  2 ปีที่แล้ว

      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.

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

  • @sleeping4cat
    @sleeping4cat 3 ปีที่แล้ว

    Does it work with gmail?