Create a Contact Form with PHP

in this video we're going to be creating a simple contact form you can see it here at the moment we've just got two text fields and a text area the idea here is the user fills out the form click Submit and this is sent through to an email address with the relevant data so let's go ahead and give this a go I'm going to go ahead and type in my name I'm gonna type in a valid email address now this form field here will be validated so the user will have to provide a valid email address and also a message as well so hello there just for example I'm going to go ahead and click on submit that's been submitted we've got this confirmation message thanks for contacting us an important point here is that we can't then go ahead and refresh the page to resend it because we're essentially seeing this sent variable here we'll talk about that in a moment though and we've now received an email from Alex at PHP academy' - org which is the email address that we supplied and we've also got the message in here now the good thing about this is we've said we've supplied the email address that's been provided and we've put this into the from field so we can basically hit reply and this will then send this back to the email address that the user has provided so essentially it's just a really really quick way to get a contact form submission sent to an email address and then the ability to go ahead and reply to that email directly so that's basically it let's just quickly take a look at what happens when we don't enter anything which is here we have a message here sort of like an error message that the name email and message are required so let's go ahead and fill that in but just sort of put Alex in the email field for example and then just hello in here when I click Submit we get that's not a valid email address so we're validating this field here now the other good thing about this is that you'll notice that these form fields have retained their values we've refreshed the page but we haven't actually got rid of these values which browsers will do by default so we're keeping these values as well so we'll be discussing all of these points and creating a base a contact form so in the next part we'll be starting to write the mark-up and then we'll look at some PHP code okay so we're over into our text editor we've got a basic outline of an HTML document here and likewise in our browser there is no information here at the moment we literally just have a blank page so what we're going to be doing is we are going to be creating the form then we're going to be creating the ability to process the data that's been sent and this will be above the doctype here and then we'll output any errors or confirmation messages down here so the first thing to do really is to create the form so we have a form here now we're going to have an action and a method and I'll explain what these do the action is basically the page that we are sending this to now we're gonna leave this blank and the reason we're going to leave this blank is that means that all of the data will be submitted back to the same page so we can display the errors on the same page just slightly above the form the method describes how the data is being sent in this case it's going to be post we use post data for data that could be long in length and also that doesn't want to be that we don't want to be shown within the query string in the URL you might have if you've ever seen a question mark and then something and then an ampersand and then another value so we're gonna be sending it via post and then accessing it via post in PHP as well so within here we're going to have a series of paragraphs and these are going to hold the fields and their labels so the first input field we're gonna have an input the attribute here is type which is going to be text this is for the name by the way we have another attribute called name and in this case it's gonna be name now this is the name that identifies the field that we're going to pick up in PHP we're also going to apply an ID to this because we're gonna have a label just above here that's gonna identify the label that belongs to which field so label 4 equals name I can end that label and then in here we can just say name so we're gonna have a blind break after that let's go ahead and take a look at what that's done we've got a name and then a field here perfect that's what we want and again this label just identifies the connection between this field and this label okay so the next paragraph down we're going to go ahead and we'll start with a label again and this is going to be the users email address or the customers email address and that's can be labeled for email so now this input type here or this input field here has a type of text the name of this is going to be email and the ID of this is also going to be email so we can connect these two here the next paragraph down is going to be the message now this is slightly different because we're not going to be using an input type on input we're gonna meeting a text area so we could still going to create our label just make sure that's ended and the four here is going to be message we're going to give the text area an ID of message and we have that message that I've just forgotten a line break up there so go ahead and add that in and we also need a line break there okay so the text area is slightly different it's just a opening tag and a closing tag and of course we need a name for this which is going to be message and we also need an ID as well which is going to be message well we don't need an ID but since we're using labels we want to connect them ok so last but not least is the actual submit button itself so we're going to have an input type of submit this is just gonna have a value we don't really need to give this a name so I'm just gonna say submit so after all of that let's go ahead and refresh the page and now we have name email and message we can go ahead and click Submit which has forwarded aspect to the same page she didn't really notice a change if you watch this I cannot hear there you'll see it sort of changes basically reloading the page and sending that data so now that we've done the markup we actually need to go ahead and try and pick out well not try and actually pick out this data the first thing we need to do is detect whether this form has been submitted so I'm going to go ahead and create a starting and ending PHP tag up here and I'm gonna include an if statement so if this is going to be the condition and anything within these two braces here are going to be executed or run if this condition is true so I'm going to use empty to check if dollar underscore post is empty oh sorry is not empty because that means that the form has been submitted and the post date has been taken or read can be read through this page so if this post array is not empty we have submitted a form so I'm just going to go echo submit it so we can test this out just hit the page and click Submit and it says submitted hit the page again nothing's been submitted but when we click Submit it has been so let's just go ahead and briefly look at this I'm gonna go ahead and echo some pre tags pre formatted tags and within here a comma separates this I'm gonna say dollar underscore sorry I'm gonna say print aa dollar underscore post true now what this is going to do is it's going to show us the contents of this post array and it makes it a lot easier to determine what data were actually working with and it gives us a good insight into what we need to pick out from this post array and why more importantly so let's go ahead and just submit this now you'll see here we've got an array we've got a an element called name and element called email and an element called message and they're all blank so how about we go fill this in let's go ahead and type in Alex speech we come into organ hello so when I click Submit this data is now placed into each element of this array so when we want to access this data we can use this dollar underscore post array and we can pick out name email or message or all of them we can loop through them and all sorts of stuff so what we want to do now is obviously get rid of this now that we've determined that the the forms been submitted we can hold errors somewhere so we're gonna be error checking so I'm gonna go ahead and create a variable called errors and this variable is going to be a blank array for an empty array rather now what I'm going to do is define each of the fields that we need so name email a message and then apply the value of these to these corresponding variable names so name equals dollar underscore post now remember we had this array with name Messier name email and message in here it's all we need to do is provide this basically and that will just take the value of name okay and we do this for email and we also do this for message a message not page so let's just pull these across store tab them across just so they're written neater so now each of these variables within PHP corresponds to the value that the users typed in the form that's essentially it now what we want to do is we want to do a few checks to make sure that they're empty or if they're empty or of the email address is valid etc etc etc but first of all let's just go ahead and echo out each of these values just so we know that they're being passed through and we have access to these in PHP so what I'm just doing here is I'm kring or I'm applying spaces between these echoing out the name a space email a space and message so let's just go ahead and hit f5 and resubmit this data and you'll see here that we've got Alex space my email address space and the message so we know that this data is there we can do what we want with it check if it's empty manipulate it whatever we want to do with it so in the next part of the tutorial we're going out should be looking at validating this and in fact let's do that now so we're going to be checking first of all if these values are empty so we're going to create an if statement or an if-else statement and the condition for here is going to be if the net if the name is empty if the email address is empty or if the message is empty we need to store an error somewhere to output later so we're going to use empty so if empty name is equal to true or empty email is equal to true or empty message is equal to true now obviously if you had say another field on here you wanted to add another field but you didn't want it to be required you just simply wouldn't add it in this if statement and then this condition would or this year this condition would be false so in this case what we want to do is we want to add an element to this errors array so we've created this errors are out here and errors this will allow us to just add a new element and in this case it's going to be named email and message are required so otherwise we want to go through and validate a few more things so we're going to be validating stuff like the email address but let's just take a look at how this looks I'm going to go ahead and print our on this errors array so let's just take a look here when I click Submit you'll see that we now have this array output like much like we did with the post array and that the first element has this error message in now if I enter all the data that's required so these aren't empty and I click Submit we just get an empty just get an empty array so that's great we now know that if the array if the errors array has stuff in it it means that we have an error or a few errors so we can output the errors so in the next part we're gonna be doing stuff like validating the email address and then actually sending the email if we do have any problems we're going to come down here and we're gonna output any problems that we have otherwise we're going to redirect the user to the sent page and we're also going to look at the problem of these form fields which we've basically already seen if we enter some data here and or if we leave out message and we have a have an error these two pieces of data disappear or the form field data disappears so we're going to be looking at that problem as well okay so we have already built the form and the ability to retrieve the data that the user submitted on the form now what we're going to be doing is further validating this so we've already validated the fact that the three fields that we've supplied for the user need to be full the can't be empty so we use print our errors to check the errors array that we're appending errors to we're going to go ahead and get rid of that and just add another condition in here to check if the email address whether it's valid or not so if the form fields are empty we get this or any of them are empty we get this error otherwise we can go through a list of however many if statements we like to perform additional checks so for example we could check we might want the name not to contain any numbers we definitely want the email address to be valid so let's go ahead and start with that one so I'm gonna say if filter var and this function is just gonna basically perform a regular expression it's almost like a regular expression so I'm gonna say email filter validate email now if that's equal to false then what we're gonna do well what does this mean first of all it means that the email address hasn't matched the expression that would be expected for an email address so we're gonna yet again at the end another email address on so I'm going to say that's remember to escape this character not a valid mail address and the reason I escaped this character here is I'm using single quotes here and you'll notice that if I don't include this it's sort of the string stops there so we need to escape this character what else can we do well let's just do something for the sake of it just so we can get two errors output I'm gonna say if C type alpha is equal to false and I'm gonna check the name now what this basically means is is that the name that we supplied or the name that user supplied must be alpha alpha alphabetical it can't contain numbers so otherwise we're gonna say name must only contain letters not latter's letters okay so right let's take a look at the errors array again and let's try and force some errors in here quickly so nothing we've got this name email message a required name I'm gonna put a few ones or ABC one email I'm gonna put in an invalid email address and just type something in the message click Submit that's not a valid email address and name must only contain letters so now what happens if we just put ABC one but then we type a valid email address and then a message we only get named US contained letters then we finally say well you know I know what I can do now so I type all my incorrect all my correct information and we get no errors so now we've validated successfully you can add more validation depending on what fields you want to add to this so now what do we want to do well we want to output the errors properly at the moment we're not going to give the user a result of or a visual representation of an array we don't want to do that we want to output down here so we've done a validation up here in our logic up here now is the time to come just above the form and we want to perform an if statement to check whether this errors array is empty if it's not empty that means that there are errors so we need to loop through these errors and output than so empty errors if this is equal to false then we have errors so I'm going to echo start of an unordered list and down here echo the end of an unordered list which is basically a list of bullet points by default then what we're going to do is we're going to use the for each construct to loop through each of the elements in this errors array so errors as error so for every error call it error for every one of the errors call it error and then echo a list item and then between here output the error so now what we can do is when we click Submit we get this unordered list let's go ahead and inspect it you can see you've got an unordered list with the list item if we go ahead and type in under ABC 1 again and then just Alex and then hello and click Submit we've now got to list items because we've looped through them errors and out put them in there each list item here perfect so we've output any errors if there are any so what happens if there aren't any errors well we do all our processing up here so we need to perform another check just after our checks to see if this empties errors array is empty or not so we would say here if empty errors is equal to true so if it is empty and there's no errors we want to send the email we want to redirect user so we're not going to do that just yet we're going to leave that till the last part but we have a problem here now if I go ahead and enter my email my name correctly I enter my email address correctly but I forget a message for whatever reason and I click Submit you get the error message you go oh right ok I need to you know enter a message but this and this has now disappeared which is extremely annoying so what we need to do is we need to create some logic just within these input elements to output a value if the data has already been submitted so basically what I'm going to do is I'm going to open and close PHP tags within here and what we can do is we can sort of echo out whatever we like so we can say echo value equals test for example and what that will do is when we refresh we get this value of test in there and that's because we have output value equals test within here no PHP just HTML output which is really useful so what we can do is we can create an if statement here and this if statement is going to check if this value is set so we're going to use is set and we're gonna say dollar underscore post name and if this is equal to true that means that name has been set ie does it exist is it available doesn't yeah basically does it exist in that case we want to go ahead and echo value equals and then some data in here so we'll go ahead and just concatenate on not concatenate that use comma separated values for the echo construct and we want to echo out dollar underscore post name what we want to do though is strip tags and and this is important because what we can actually do is we have this problem where we can pass through any any code that we like really in here I don't see it being a massive issue here to echo strong and then my name yeah so we basically want to strip these out there's this I mean it's not a massive issue but we'll go ahead and do it anyway it's a strip tags name and what this will mean is that when we enter tags like we just did and click Submit they're stripped out of there so just really sanitizing generally sanitizing so with the same of the email let's go ahead and do exactly the same thing in fact we can just go ahead and copy and paste this just really to save time more than anything we can just go ahead and change around these values so this will be now email and this will be email now for the textarea it's exactly the same but this time it doesn't go in a value it goes within the textarea tags and that's message and message so let's go ahead and just submit something so I'll go ahead and submit Alex my email address and I won't fill that in I click Submit these have these are stayed the same this I completely forgot that we added value equals something so we don't need that at all as I said it just is just text that goes within there let's go ahead and refresh click continue and there we go so now can type in hello and that's fine if I for example enter an incorrect email address it tells me but all this data is still available for me to go and correct so we've now created it so it's a lot easier to use and it's it flows a bit better but now is actually sending email time now if you are working on a local server you're gonna need to set up either SMTP email or configure your installation of Apache PHP to handle sending email or your installation of PHP and we have a video tutorial on this so you can go ahead and watch that now so we're gonna be using the mail function to send the email so what we need to do is we need to provide four parameters here so I'm just going to go ahead and create these now and what we need to send is we need to Center the email address that we want this to arrive at so in that case that's going to be my email address so all contact form submissions are going to go to my email address here is going to be the subject so I'm just going to call this contact form and here is going to be the body so in this case it will literally just be the message from the user what we're gonna have now is the headers from so from would be and then the email address so we want to concatenate on email and this will this will show that it's from this user's email address and therefore we can directly reply back to them as we saw in the first part of the video okay so what we now want to do is redirect the user to a page that's going to allow us to say your message Utley in sin not show the contact form and not allow the user to hit f5 repeatedly to keep contacting us and in this case it's going to be exactly the same page we're just going to pass a get parameter get variable along to this page so we're gonna use the header function and then we're going to exit afterwards and in here we need to say location and then we need to give lo que ssin that we want to redirect to in this case it's going to be indexed up here HP the query is just going to be sent and that's it so what do we do now well let's go ahead and just check this works first so Alex type in my email address type in a message click Submit okay so it's been we've been sent to index dot PHP and then a query sent go over to my inbox and the email address ad sorry the email has arrived with a message so it's all working in that sense but now we need to actually say to the user well you know it's been sent so what do we do well we need to pick up on the fact that if this has been passed or not this sent thing here so what do we do well down here just above here we want to say if something so if is set equals true we're checking for done to score get this time not underscore post and we want to check for sent if this is set ie if this is here we want to go ahead and echo thanks for contacting us with in paragraph tags otherwise we want to do all of this down to just underneath the four are just the last part of the four so I'm going to open PHP tags and put an ending bracket there so you can see that my text editor highlights this start of this bracket here and end there and I'm going to go ahead and indent all of this just for readability so let's run through this the user submits something we process everything as we've already discussed if there are no errors we send the email redirect the users have sent the page then loads this is this rent this evaluates to false so none of this runs but in fact we come down and we say if is set sent which it should be if we have no errors it echoes this out otherwise if these has just landed on the page this doesn't count so we just output all of this stuff here so it's entirely logical if it doesn't make sense run through it very carefully and look at the process and it should make sense so now let's go ahead and just do this once more time one more time sorry name email address and let's just change this to something like Fred hello there and I'll also do a new line go ahead and click Submit there we go so we've got this sent here thanks for contacting us we hit f5 nothing happens it can't refresh this we've got contact to form here from Fred at PHP academy' to org hello there and we have some new line data so we have now created a contact form using PHP

Channel: GoThink eLearning

Views: 6,198

Keywords: contact form, php, web development

Id: LDalWFhGvgM

Length: 27min 47sec (1667 seconds)

Published: Mon Apr 24 2017