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

hey what's up everybody this is hayden adams with a designer who codes i've got this contact form that i built in the previous video and it looks good but i wanted to do is i wanted to actually function and when someone fills this out i want an email response as a part of it only that but i want this to be super sleek for the user to make this as easy as possible so what i have as a result if i fill this out what does it get as a result is one automated message that says sweet message received and if i go into my email what i get as a result is this email that says hey here's what they had to say hayden adams steve johndoew.com and this is a test and also said reply to steve johndoew.com i'm going to show you how you can turn a basic contact form into one super sleek working contact form in this video i'm going to go over a couple things first we're going to actually get the form to work and send email the second part is i'm going to add a honeypot to catch spammers and after that i can turn off the caption to make it a smoother process for the end user after that we'll clean up the email that comes through and finally we'll add a success page that tells the user hey success is here rock and roll scooby-doo alright so what i have here is a basic form design i built in bootstrap 5. the reason why i use bootstrap 5 is i want to make sure that it is 100 responsive so matter who uses it on a mobile tablet or desktop they can use this form so this is why i have it all in html and html only so to get started i have to use some sort of email software online in order for me to email this form i'm going to use the tool if i bring it over called form submit because this is a great free tool that we get to use to then send responses from our form i'm going to copy this action where it says form i'm going to copy the action and i'm going to copy method post into this project this project already has the form tag already set to go so what i can do is i'm going to drop it down here i'm going to change your at email.com i'm going to enter in my email address which is going to be hayden at nautilus designs i'll use my other email address to make sure this is working so i'm going to save this project i'm going to refresh the page and test to see if i can send this through form submit i'll say hayden adams and i'll do john john doe dot com and we'll say this is a test and like magic if i hit submit oh unable to submit the form make sure you open this page to a web server so i have to add this html document onto a web server the great part about it is github provides web server through github pages so i'm going to head over to github i'm going to bring this over here and i'll create a new repository and in here i'm going to call this one the form submit demo by saying form submit demo to my github account you can use whatever web server you want i'm just going to use github pages because it's easy to refresh the page over and over again i'm going to come down and say create repository and right here what i can do is i can upload an existing file really easily through github so i can drag and drop my project which is super cool i'm going to drag and drop this file it's going to add it in i don't need to make any notes since it's just my project commit the changes process the file and almost like magic we have our file uploaded so by default github is not really a web server until we make it a web server i'm going to head over to settings and down here under pages i'm going to go is i'm going to say main and i'll click on save what this will do is this will turn my github repository into a website i'm going to command click and see if this kicks into gear this sometimes takes a few minutes to get started and here it is hello world so let me try this one more time and see if this works i'll say hayden adams and we'll do john john doe.com and we'll do this is a test hit submit hey oh check my email so i have to do is i have to activate my email for this to work what i'm going to do is i'm going to come over to my email and what i get as a result is i get this email that says hey thanks for using form submit you are one click away from activating this form i'm going to click on activate form and through form submit the form is activated now one thing to notice what i can also do is i can use a random string to replace your naked email address in the action attribute of your form how awesome is that so i'm going to copy this long string and what i'm going to do before i forget is i'm going to come over my index file and take out my email address and drop in this random string as long as you keep this form on this web server as it shows right up here it's going to know that that email address is attached to this address of your website i'm going to save this file just to keep it the right way and i'm going to now go ahead and resubmit the information so if i close it oh actually i already did so let me do it one more time to make sure it's working so what i'll do is i'm going to go back and i'll reopen hello world contact me oh you don't have to do also is i have to re-upload that file so i did change the action so what i'm going to do is back in github i'm going to add a file and upload files and from here what i'm going to do is go to index.html drag and drop and commit the changes the reason also why i like using github is in case i want to see if i did something or not i can double check my code as i'm going along in this project we can see the code has changed inside line 17. what i'll do is come back my hello world appear i'm going to refresh the page to make sure it is kicked into gear and i'll do this one more time hayden there we go and we'll do john john doe johndoe.com this is a test now when i submit what should happen oh i'm almost there i haven't got it quite yet i have to help fight spam so i'm gonna say i'm not a robot and perfect this form was submitted successfully returned original site and like magic what i get as a result is an email that says hey someone just submitted your form on hayden5.github.com but there's no information yet down below that's because we haven't connected these fields so if we go back to our page we haven't told these fields what to say so form submit submits them properly so what i have to do is i have to give them some names because right now they're aimless if i come back to the index file i'm going to search for first name so this first name has a label first name and the input type text and class but after the class i'm going to add name equals name even though it says first name four submit wants one form to be called name and since i have broken it up from first name and last name after the class down here i'm going to say name equals last let's do a capital letter last name and then down below for the email i have to say name equals email and we have one more field actually two more we've got the phone number and i will say name equals phone and the comments down below i'm gonna say name comments questions that way form submit will know what the name of the fields are when they're being submitted i'm going to save this again and once again i'm going to have to go back up into github and add a file upload files and drag and drop the changed file again i have to work off of a web server otherwise this won't work at all that's the power of github pages i'm going to commit the changes and like magic maybe taking its sweet time for this file what did i do there we go apparently five extra lines of code just totally threw it into a tizzy i can double check to make sure it's there and we have name name and name now let's test it one more time what i am going to do is i'm going to come over to chrome just to make sure that those changes have been kicked into gear it does take at times a few minutes to kick in when you just drag and drop it so if i refresh it as i can see well in github the changes haven't made it's still taking a few minutes longer to kick into this one and after a few refresh the page takes about one or two minutes to actually refresh i can see the name is in my source code so we know that this page has been updated i'm going to say first name is going to be hayden last name is adams we'll say john john doe dot com and this is a test now when i submit almost there i still gotta fight this spam and the form was submitted successfully now when i come back into my email i can close this one up what i get as a result if i bring this one over here we go is now it says name hayden last name adams i emailed from john john doe i didn't put a phone number in so it's going to be left empty and this is a test what i'm going to do later on is notice these underscores they kind of bugged me i'm going to fix that later on in the code but what really bugs me is that captcha because if i don't need it i don't want it because to a user standpoint i want this to be as seamless as possible in order to take the captcha out i have to add a honeypot so what i want to do is inside the code and a honeypot is designed to catch spammers who read just the code and nothing but the code so under the form road g3 g's for gutters in bootstrap 5 i'm going to add something brand new right here i'm going to add a honeypot and i'm going to say in this case honeypot just so i note what's going on so what the honeypot is going to do is it's going to catch any spammers that go into my code and try to fill the form out so i'm going to say input and in the input the type's going to be text and then i'm going to say is the name is going to be quote underscore honey and to make it invisible to the normal user i'm going to say style equals display colon none that way the normal user won't see this project when it comes to this field when it comes to the actual project if i save it if i come back to my basic let's go find that file there it is you can see it's nowhere to be found so the honeypot needs to go first and then after the honeypot i can take off the captcha because to me the spammers almost always go through the honeypot so the captcha's not that quite relevant so what i'm going to do is i'm going to say disable captcha i'll make a note of what this is and i'll say input type equals hidden for this one name will be underscore captcha and the value of this field is going to be false that way we can turn off that caption to make it a little bit easier for the user since we've added an extra layer underneath the hood let's save this and re-upload it to github pages so i'm going to come back to github come over here go back to my code add a file upload the file becoming a little repetitious let's see how fast this one goes now commit the changes processing the files that went a lot faster so again what i'm going to do is i'm going to come back i'm going to move hello world over here which is my desktop version and what i'll do is i'm going to come back over and i don't need that one where did my url go there it is moving around too fast now we're online and again i am going to check the code just to make sure that that code has come through if i refresh the page it shows honeypot and disable captcha i'm good to go on this project through github pages refresh the page just to make sure it's working and what i can do again is say hayden there we go john john doe johndoe.com this is a test when i submit it notice how i didn't get the captcha that showed up for someone to click this form of submitted successfully returned the original site and like magic what i get as a result is this email that shows up as hayden adams john and john doe there's no phone number and this with the capital h to boot showed up as well to be able to send people through this a lot easier without having to worry about the captcha part but i'm a stickler for design and this little underscore is driving me crazy where it says last underscore name and comments underscore questions that has to do with the form submit using a space as an underscore so i want to do is i want to fix that on my code just so it has a little extra cleanup going on right here inside my code if we then come back down here when i have a space it defaults to an underscore so i'm going to add a non-breaking space or in this case i'm going to say ampersand nb sp semicolon that's code for a space so if you think about it five lump pieces of code equals one space if i copy this along with last name i'm going to come down to comments questions and paste the non-breaking space as well right here what i get as a result if i go through the process one more time add the file upload the file and we'll drag and drop commit the changes it's going a lot faster that one upload to seem to take a little bit longer for some reason so while we're right here let's go back and we will copy making sure i get the right url and i'm going to hit command option u to make sure i see the code just making sure that code has changed and the last nbsp name is there so i'm going to add the non-breaking spaces into the code just so it shows up in the email and what i get as a result i'm going to say hayden adams john john doe dot com just a test with no spaces no actually underscores there we go when i click on submit what i get now as a result come on email just taking it sweet time for a second now i get that space with no underscore and the same with the comments and questions perfect we're almost done the last thing i want to do here is i want to add a success page because to me this little form submit looks good but i want my own version of a success page so inside my code i'm going to add a direction to the success page at the very top where all of my little notes are after disable captcha what i'm going to do is i'm going to say input and in here i'll say type equals hidden so no one sees it and in here the name is going to be underscore next and after that i'm going to say a value now what's the value going to be this is the long url of your website you can't just type in something like success as it's not going to work so in this case my website if i think about it if i come over to github pages is hayden5.github.io form submit demo i'm going to use that in the value and i'm going to say success that html now i have to create a success page as well so what i'll do is i'm going to save this index page and i'm going to come down to my finder and duplicate the index to say success what i like to do a lot for a contact page or an index page is basically take out the form and replace it with some sort of message so let's just do a little cleanup on aisle five up here oh what do i do oh i know i did it wrong making sure i should always have things in place so i just made one critical error as i like to have my page up but i went too fast too soon i didn't close this input so if i come back over here hit the greater than symbol refresh the page crisis averted i always make sure like to save it and look at it before it duplicated that being said we're taking the format anyways so that error message is going to go away i'm going to come down and what i want to do is i want to take out everything from form to close form so i'm going to scroll down until i find that closed form and i'm going to write in a p tag after contact me i'll say success we will get back to you very very soon so what i get as a result of this page is not the index anymore but i haven't set up so it's going to go to success dot html it'll look the same with that big contact me but it's going to say success go back to you very very soon by adding the where'd it go the value of that location i know it's going to work so we have to upload both files now to github so what i'll do is come back over here one more time i'm going to add the files or upload the files i'm going to drag both the index and the success in here and when i commit the changes process both the files shouldn't take very long we're all set to go and what i'll double check is do a little extra cleanup get rid of a couple of these tabs or one more right here again i want to make sure that that did refresh successfully so i want to double check and there it is oh you know i should probably do i'll do it later but i should have made a note to say that this is essentially the success message link cool it's working so now you refresh the page and do one more time i'm going to say hayden adams and we'll do john john doe dot com and this is a test when i submit voila no captcha no automated message i created my own contact success message on my page and like magic what i get one more time if i bring over this email is i get a submission to my email address that says all of this two things to note before we finish up if i come back to the index page make sure that you have the word required on the name and the email those are the two pieces of information that form submit needs so don't forget the word required on the name and email if you want to know how i built this contact form i have a separate video focusing on bootstrap 5 and contact form design right here i'll also put a link in description below for the source code if you want to download this file as always i'm handy adams with a designer who codes

Channel: A Designer Who Codes

Views: 93,010

Keywords: html form to mail, html contact form, contact form, how to create a contact form, html form to mail contact form to email the fastest way contact page with php mail, how to send mail from html form, contact form to email, how to connect contact form to email in html, how to send contact form to email from website

Id: Yg6POD0M30w

Length: 22min 18sec (1338 seconds)

Published: Tue Aug 03 2021