HTML/PHP Contact Form Tutorial with Validation and Email Submit

hey guys what's going on it's clever tikki and in this video we're gonna learn how to create an HTML form with PHP validation and email submit let's go ahead and get started right away I'm gonna open up the browser and go to a site called code Penn dot i/o if you haven't heard about this awesome website it's like a paradise for web developers you're gonna absolutely love it okay so once you're on a home page go ahead and click on the search button at the top right corner of the screen and type form or contact form which is where we're gonna be creating this video and you're gonna get a result of seven thousand six hundred forty two pens found for contact form so you're gonna get a result of all kinds of different forms available for you to use I'm gonna let's go ahead and pick the form number four which is a blue form here called html5 contact form and just click on it and this is what the pen it looks like basically gives you raw HTML CSS and JavaScript in this case there's no JavaScript but this is exactly what we need because we're gonna be creating PHP validation rules so and at the bottom here you can preview how the actual form looks like looks pretty good to me so what we're gonna do here is just copy HTML and I'm gonna go back to my NetBeans project and I've created a folder here called form I'm gonna right click on it and choose PHP file and name the file PHP form or just a form dot PHP and I'm gonna go ahead and paste all that HTML inside of this file so that's gonna be form that PHP where the actual HTML form is going to live also I'm gonna create another file in the same folder called and this time is gonna be cascading style sheet file that CSS I'm just gonna name it form also and it's gonna be named form that CS I'm gonna do it all this these comments here go back to the browser and copy the CSS from the pen paste the code inside the CSS file and save it at this point we got all the code we need from code pen so I'm just gonna go ahead and close that and right now let's go ahead and preview what the form looks like in the browser so this this is what it looks like right now because the CSS has not been loaded right now so from our form dot PHP let's include a CSS file using link tag link rel equals stylesheet H ref equals form that CSS because form that CSS is located in the same folder as our form that PHP file in this case and then for the type I'm gonna say text porter slash that CSS and close the tag now the form that CSS should be included and go back to the browser and voila we have a form we have a contact form which is ready to be used okay so if I try it submitting this form right now as you can see at at the right hand side of the screen there is a message being popped up plea please fill out this field and HTML 5 which is what we use in here comes with it's all with its own validation rules basically and it's validating those input fields using the required keyword as you can see all these fields include the required keyword and it it's also gonna validate those input fields using based on what kind of type that field is in this case it's an email so it's going to validate and it's gonna if I enter a wrong email address hold on let me fill out this stuff here so if I enter a wrong email address is gonna give me a message box about the email address being invalid but I don't like these because first of all the phone number like the typed L is not included it's it doesn't work on all the browser's it just works in Safari and I don't know we're just gonna create our own PHP validation rules anyway so let's go ahead and get rid of these required fields they also those message boxes also seem to pop up so in some random places on the screen and I'm not sure how to change that I just haven't played around with it much and for the type or the fields let's just enter text because we don't want any html5 validation rules and add this type equals text for the text area as well and then let's go ahead and go ahead and create another file called form underscore process that PHP in the same folder this is going to be the file which will process the form and it's gonna have all the validation code and emails submit code as well now if I hope in this file here you can see there's already a bunch of code in it and I've included that the link to the in the description in this video where you can download this file with all this code in it now let me just test something out before before we submit I'm gonna use a died function so that this code is not executed yet and before we do that we need to make sure that this file is being called from our from our HTML form page so for the action we're gonna say I'm gonna include a PHP tag here and close it and I'm gonna say server PHP self ok so what this function does or what this global variable does is it's gonna call the page itself so all the PHP code that's on this page is going to be executed when the page is called oh right now you see that there's no PHP code on this page and we want to call this form process that PHP file so what we're gonna do here at the top is we're gonna include that file using include function just like that easy as pie so now when this page is called it's gonna call itself and it's gonna include form underscore process that PHP and this is all the code that's gonna be included right now there's nothing in it and because I used Die construct so it's not gonna execute anything for now I just want to eat guys to see what's inside the this variable called because global variable called post and then yeah just the post so okay so if I go back to the browser and refresh the page you can see that everything is working as expected basically the form has been submitted and it's calling itself and the file the form process is being included but right now there's nothing being submitted because because all of these fields the the post doesn't know about them so in order for us to let the post know about those fields we need to name our fields using keyword name so just like that we're gonna name all of our fields we use double quotes so name is gonna have a name of name and then the email may need email and just add name the phone number phone and let's name the website in a website URL and finally message is gonna be the name for our message field okay I'm gonna control save that go back to the browser and let's go ahead and refresh the page and reload the whole thing now I'm hold on one second what's going on here name it goes name okay okay let me delete this died function maybe that's what's happening okay yeah because because nothing has been submitted yet so I'm just gonna enter my name here my email phone number and my website click Submit and now you can see that all these this array has been printed out with with our variables and values at the top here so everything is working as expected we have our post and we're just printing out printing the post out right now to see what what values and variables it has okay so let's go ahead and let me explain what's going on here and in this code so first of all we want the error messages to be displayed on the form right after the input fields so in order for us to do that we're gonna add span tags here right after the right after the input fields and I'm gonna say span class equals error which is going to be especially formatted span for the errormsgs and then the PHP tags and right now okay so let's go ahead and add all of these after the input fields and the variable name for the email is gonna be email error variable name for the phone number is gonna be phone error and the website is gonna be URL error okay so here's what's happening right now we're setting all these variables to an empty string because when the form is being displayed we don't want these original messages to appear right away so that they they are these variables are being printed out right now but they're empty because the form has been submitted yet once the form has been submitted which is what we check for here and this and the special global variable called underscore server using the request method string parameter once the form has been submitted which is which is what this is saying using the method post then do all the validation and before that all of our errors are empty because nothing has been submitted yet and they're being printed out as empty strings on our form which is exactly what we want so we're not getting any error messages here okay so next we also create these empty variables which is gonna have which is all the variables that are going to contain the actual content that has been submitted and okay so next let's let me go through all these validation rules real fast so when the form is submitted which is what we're checking for here using the method post we want to check if the name is empty if the name is empty we're just gonna say name is required and that's going to be the value of the variable name error and it's gonna be displayed here right after right after the name error right after the input box name and it also checks the email if it's empty and it checks the phone if it's empty and that's it so those are the three fields that are that can be left blank so if I try to submit the form now you can see that the name is required emails required and phone is required and all the variables are being set correctly to name is required email is required and phone is required values and if I check form that PHP this is exactly what's happening here it's been outputted so when a form is submitted we check if it has been submitted using post method and then we check if it's empty if it is set the value to name is required email as required in phone is required so hopefully that makes sense let's move on here okay first of all I copied all most of this code from w3schools comm and it had this test input function as well so this is what the test input function looks like basically it strips out some unnecessary spaces and slashes and it also converts it also escapes all this special HTML characters which is a good practice I guess and it does that to all the fields so you can see how the test input function is being called and on every field here and here and here and then the last thing if everything looks good if the name has been entered then the regular expression is checking if there's only letters and white spaces in the name and if there's like a number in the name it's gonna say only letters and white spaces allowed so that's how that works and everything else is basically the same thing here we use the filter var function and filter validate email which is just another way for validating an email address using built in PHP function called filter bar for the phone number w3 schools didn't have this one so I had to at Stack Overflow comm and this is an awesome regular expression for matching a phone number and it does exactly that it just matches the phone number in different formats and then finally the URL also has this pretty complex regular expression that you don't have to really understand and it displays invalid URL if it has been entered in an invalid way in value RL so that's how all that works and finally there's a message which is we don't want to check if the message has been that if the message is invalid because we want to see any kind of message okay so for the in the forum that CSS let's actually create a class called error and I'm gonna set the color to just the color to red and then all the error message is going to be a red now because we're setting the class to error here in the span class so it's just easier to see the error messages okay so at this point the forum process is being executed and all the validation rules are working great now I've also wanted to include okay so let me show you something if if the fields have been entered correctly but one of them for example email is invalid and I click Submit what happens is all the fields are emptied out we don't really want that or I just prefer all my information to stay intact when one of the fields is invalid so we're gonna create a new we're gonna get add value to our input fields and inside the value which is gonna say we're just gonna output the name the variables that are been entered here which are being set to the empty string but those are the variables that are gonna have information off the post once they're submitted so so I'm gonna do this add this value to all these input fields here after a name and message as well okay so this is gonna be named email it's gonna be named phone and URL and message okay so let's test it out now so as you can see all the variables are still there even after we resubmit our form if we enter all the valid information except the URL for example it says invalid URL but all of our other fields are being printed out because we're setting the values to those variables that have been submitted using post here and here and here etcetera okay that's how that works at this point all the validation rules are working great and we're pretty much ready to submit our form so let's go ahead and add the code to submit the form now okay so we still want to be inside the post statement because we only want to submit the form once once the post once the form has been posted so first of all we're just gonna check if all the errors are empty to make sure there's no error messages so I'm just gonna go through all of them and say if name error equals empty and email error equals empty and phone error equals empty actually it's a double equal sign I'm sorry okay and URL error equals equals empty then we want to send our message so if all the error messages are empty we want to go ahead and proceed with the sending the actual email okay so let's go ahead and construct a message body I'm gonna create a variable named message body and set it to empty and then I want to unset the post submit because there's nothing there's not gonna be anything in it and then let's go ahead and create a for each loop to loop through the post just like that and then I'm gonna use the message button this is a concatenate operator concatenate a string operator and I'm gonna just enter all the key and value inside of this inside of the single variable called message body so it's gonna go through the array and find all this keys and values and it's gonna put everything in one single variable called message body as a string okay next is the actual sending out the message and all the content is ready here first of all if you're doing this on a local host you don't want to make sure go ahead and open up your PHP that I knife file so I'm gonna open that up here and you want to search for SMTP for the SMTP in your PHP ini file you want to make sure that this valley is correct if you're doing it with localhost you want to contact your local host I mean your ISP and make sure find out what your SMTP outgoing mail server value should be they should tell you that also the port is usually 25 and the send mail from should be your email address so once you set all that in PHP that I&I by the way if you're not doing it on a local host you know all this information is gonna be available with your at your web hosting company okay but once you do that if you're doing it on a local host you want to go to services on their windows and you want to go ahead and restart the Apache let's go ahead and restart Apache just gonna take a little bit okay once that's done we are ready to use PHP mail function to send the actual email so we're gonna create a variable name to and enter the email address of the person where we want to send the email to subject equals I'm just gonna name it form submit contact form submit and next is a mail function which takes in three parameters to subject and message body and we already have all these variables available and actually if if this function is successful if the mail has been sent we also want to display a success message we're going to create a variable named success and say message sent thank you for contacting us and now we also want to reset all of our field values back to empty because it's good practice to reset the form field values once the form has been submitted okay so that's that's looking good now let's see let's see if this works now oh actually for the last thing here I want to create a variable success here and also for the form that CSS let's go ahead and add the success class - just to modify the success message a little bit and for the color I want to set it to this color here text-align:center font-weight:bold and font size 14px okay so that's going to be our success message I'm gonna completely reload the form now and get an error message of course what's going on here come on Oh success equals I think I missed the echo operator okay so now there's a blank form and I think we have everything ready to go to send a test message so go ahead and enter all the field information I'm gonna enter a fake phone number don't try calling this one website URL and message hello hello clever techie I would like to subscribe to your YouTube channel okay let's submit this form and for some reason our success message is not being printed out hmm okay because we forgot who had the success message here in our PHP forum or eight HTML form so we're gonna say span class equals success close the stand actually let's put it in a div tag instead and here we want to echo out the success variable okay let's let me reload the form and do this again hello clever keiki how we do like this right okay submit the form and now we're getting the message message sent thank you for contacting us and all the fields have been reset to empty string which is exactly what we want it and I'm gonna open my outlook here press receive message and Borla message is sent hello clever techie I would like to subscribe to your YouTube channel so the message is being sent successfully and the success message is being displayed so everything is working the validation fields are working and all the all the error messages work and all the values of the fields work as well and everything when all the errors are empty it's sending out the message to the email which we specified I hope you guys found this video useful if you did please like share and subscribe and I'll see you next time clever take it out

Channel: Clever Techie

Views: 498,748

Keywords: contact form, php contact form, html contact form, php submit, php validation, php contact form tutorial, html contact form tutorial, php contact form to email, php contact form validation, php contact form validation tutorial, php contact form with validation, html contact form with php, html contact us form, php email sending tutorial, php email form, php email form tutorial

Id: 1CkBsGhux9U

Length: 27min 27sec (1647 seconds)

Published: Wed Nov 02 2016