Contact Form Web Application Tutorial Ajax HTML5 PHP

hi and welcome back in this exercise we will demonstrate how to build a modern all-purpose website contact form that uses some new html5 features Ajax and PHP everything happens without reloading the page or navigating to another document to parse the data you can put this form to work on any website that processes PHP and you can modify it for other purposes very easily now if you need to get to the completed code I'm going to put a link to the completed code down in the description text of the video we're going to start with the bare bones of an html5 web document and the bare bones of a PHP script the first thing I'll do is go into the body element and pop the form in and explain it to you very quickly the form has an ID attribute of my form in the on submit event we're going to run a JavaScript function called submit form and then we just put return false after that to stop all the normal behavior that usually happens when a person submits a form because we want this submit form function to handle everything now I just put paragraph elements in place to give all of these input fields some space now the first input field has an ID of n which is short for name then for the placeholder text that's going to be inside of the field we just put the string name that way the user knows that they have to put their name in that field and then we add the required attribute to make sure that they give us a name before they can submit the form the next input has an ID of e which is short for email and it's placeholder text will be email address and we're using the html5 feature of type email that way we get a little bit of validation for the email string that they put in place and I'll demonstrate that in a moment and we also add the required attribute for that field as well then the next field is a text area element and it has an ID of M which is short for message so you have name email and message it's placeholder text will be write your message here and I put the Rose attribute in place just give it a little bit of height but you can do that through CSS I'm not going to add any CSS to this application so that you guys can style it any way you want through CSS and all you have to do is target these IDs or you can target inputs and text areas so the text area also has the required attribute so they are required to type in a message before they can submit the form then the very last input is the submit button it has an ID of my BTN short for my button the type is submit the value which is the text that's going to be showing on the button is submit form then right next to that submit button we have a span element it's going to be empty initially but we're going to populate that with messages for the user while the form data is processing and that's it the form is very very simple okay now let's go into the client-side scripting which is JavaScript so the first thing we'll do in JavaScript is put a function named underscore and this isn't very necessary all it does is it saves up some typing and some space in the application because everywhere you see an underscore being called in the application you can translate that to document get element by ID so it just helps us avoid having to write document dot get element by ID within our script we can just call an underscore like I said it's not very necessary but it saves space time and typing now all we need is this submit form function put in place and then we'll work on the PHP parsing script okay I'm going to quickly explain every single line within this submit form function that way you're not confused about anything and you can modify it expand upon it and use it for other purposes also the first thing we do in submit form function is we target the my submit button and we effect it's disabled property making it true so disabled true that means the user can't press it over and over again and send data many many many times they might accidentally double-click the button which you want to prevent so right they click the button the first time we're going to disable it when this function begins to run then the next line we target this status element right here next to the submit button and we put in its inner HTML property the string please wait dot dot that gives them some kind of indication that that is being processed on the server on the very next line we create a variable named form data which represents the new form data object now the form data object allows us to append new key value pairs into all the data that's going to be transmitted to PHP so we're using the append method on the form data object the first thing we're going to send is a key value pair for the name the user's name so we put the string N and n is going to be picked up as a posted variable in the PHP script and I'll show you that in just a second now the other half of the key value pair is going to be the value so we have the key which is N and the value which is going to be whatever the user typed into that name field in the form so we target that form field and we pass its value property the value of what the user typed in now we do the same thing for the email and the message that they typed in and after the form data object has been given all of the key value pairs it's going to need to send to PHP we create another variable called Ajax and that represents a new xmlhttprequest object then we run the open method on that Ajax object and the first parameter in the open method is post because we want to post the data to the PHP script and then we just put the name of the PHP script that's going to be parsing all of this data which in my case is example parser dot PHP you can name it whatever you want then when the Ajax readystate changes this function is going to fire off all of this code is going to execute so what we do is we check to see if the ajax out ready state equals 4 and ajax that status equals 200 basically that means that the data is finished processing by PHP and PHP has returned data to this Ajax object so what we can do inside of that if condition is say if Ajax dot response text from PHP equals success we target the form and then we affect its inner HTML and we can put any HTML that we want any dynamic HTML that we want inside of the form which pretty much takes away all of the fields that were in the form and they get their response else if the response from PHP is not success then we put into the status elements inner HTML the actual response text from PHP which could be some kind of indication to the user about why the email didn't send or why the data did not process correctly this is just in the event of data processing failure so we target the my button that disabled property and make that false what that does is it reads the button so they can click it again so they can try again basically and then finally we run the send method on the Ajax object and we're passing the form data which contains all of the key value pairs for the name email and message and that's it for the client side of the application now we'll go work on the server side of the application which is our PHP script you render it in your favorite browser and you'll notice that I've added no CSS at all to the document because really that would be individual preference everybody would style this differently so you can just put some CSS in this document and affect all of these elements okay now we'll pop in the very simple PHP script and I'll explain it line by line just like we did for the JavaScript the first thing we're doing in the script is setting an if conditional to see if the posted data for name email and message are all set so we say if is set the posted name if is set the posted email and if is set the listed message then and only then will the rest of this code run if the name of the email or the message is not set then this code will not run so within the if conditional we're going to create local PHP variables for the name the email and the message and we just scoop up the posted data now the reason why you see the nl2br function being run here is so that we can change new lines to break tags that's what that function does it takes any new lines that the user puts in that text area for the message and it turns them into break tags which will help you preserve any new lines that they put in the text area because we're sending an HTML formatted email in this case which basically allows you to put any kind of HTML elements within the message so you can bold things you can underline things very easily put links whatever now the next thing you want to do is create the two variable the two variable represents the email address that you want this message to land in whatever email address you want the message to go to basically you put that right there then we set the from variable and that will just make equal to e which is the user's email address the person that filled out the form we put their email address there then the subject variable you can make whatever you want I just put contact form message then we populate the message itself and you can see I have HTML in that variable that way I can bold this label for name and then I put the name value right next to it then I can put a break tag and I can bold the label for the email address and then put the email address value right next to it and then in a new paragraph which will give it some space under those things we put the message so you can put any custom HTML that you want you can make the email that arrives colored any way you want make it look any way you want using HTML and CSS then the next thing we do is set up the headers variable and in the headers we want to specify who the email is from we want to specify the mime version and we also want to specify the content type and the character set you can see in content type I set text slash HTML which allows us to put HTML within the message and finally we just run the mail function this is what when you run this mail function that's what actually sends the email to whatever address you're sending it to and we have an if condition just to evaluate to make sure that the mail function has run properly so we say if mail function has run properly and we echo success back to the Ajax request if for any reason this mail function fails then we're going to echo the server failed to send the message please try again later you can see within the mail functions parameters we put to subject message and the headers and it's that simple now you can also do other validation and filtration on all of these variables to name the email and the message for instance if you want to filter the name to make sure it only has letters uppercase and lowercase letters in it you can do that using the preg replace function here let me just write it here use preg replace to filter the data okay so there's a little hint for you if you want to filter any of that data for any reason you can use preg replace to do that you can do that for the name email or the message okay now I'm going to put these files on my server and run a test to show you how it works okay so I'm at my website and I'm going to go to example form that HTML and I'll just put in a dummy name Paul Smith well first let me take that out of there and show you if I press submit form without putting anything in we start getting validation automatically because of these nice new html5 features so we hit submit form it says please fill out this field so we put the name back in then if we submit form it says please fill out this field and if I just put in a bunch of garbage into the email thing you can see we get email format validation which is pretty cool so I'll just put Paul at domain.com then submit form says please fill out this field and I'll show you how the line breaks get preserved so I'll put line one period line two period and then I'll go down a double line break and put in line three period and then I'll submit form please wait thanks Paul Smith your message has been sent you can see the whole form goes away and we just give them some kind of response if everything went all right if anything would have happened to gone wrong then they would have had the form still in view on the page and they would have had a message in the status element now here within my email checking application you can see what arrived the name was Paul Smith you can see how our HTML is working because these things are bolded and the brake tags work and then the emails Paul at domain.com and then we had line 1 line 2 and line 3 of the message and that's the gist of it so we're using some Ajax we're using the form data object which the form data object is something that's relatively new and we're using some cool new html5 features to help us validate the form that way you don't have to write a bunch of script to do that you can also do some validation on the PHP side for instance if you want to make sure that the email address has an @ symbol or a dot and things like that you can do that with PHP on the server side of the application so having the page not refresh or not reload you don't have to navigate to a PHP script to parse the data using Ajax helps us make everything a little more streamlined ok I hope you've enjoyed this tutorial and I'll see you next time

Channel: Adam Khoury

Views: 119,255

Keywords: Contact, Form, demo, script, website, Web, Application, Tutorial, Ajax, HTML5, PHP, formdata, mail, email, send, learn, web, development, design, online, free, training, lesson, teacher, student, education, school, video, class, classroom, adam khoury

Id: tMmXzjJWlnU

Length: 15min 19sec (919 seconds)

Published: Wed Jul 13 2016