Simple Contact Form with PHP

1. About the project: hi everyone. Today we will have a look at how to create a simple contact form with BHP. Our contact form will consist of three text fields, one drop down menu in the text area for the content of the message. But once you've completed the course, you'll be able to extend it to use more fields and other form elements using the cold we've created. The former is built using object oriented approach will use PHP classes and JavaScript object Plus will make use off. The J Query and Zarb's Foundation fall to apply some styling to reform, but by no means feel free to use your own styling. If you prefer to do so, the form will be process using Ajax Coal to the PHP file, which will validate and process the request. The relevant information and confirmation messages will be displayed on either failure or successful submission. Now, if you ready, let's move to the next video and start working on our new project 2. Exercise files: together the exercise Fancy Have access to the CSS and Js folders plus index PHP Inside of the CSSC have three funds which come with the foundation for if the foundation don't see assess the minute immune ified version of foundation and then normalized that CSS Apart from this, we have created our custom cordiality assess which at the moment is just a blank file then inside of the Js folder as well. Foundation files vendor files and foundation mean dot as Js which are all coming with de foundation and then we have core gs which again is a blank file. If we open our index dot PHP, I'm going to show you which files you may remove if you're not using foundation. If this is the file inside of there had section which is basically linking to our, um, unified version of foundation Don't CSS file then I'm using the bootstrap formed all some don't mean as well. CSU says far to have access to all those nice icons. Basically, the only icon which we are using is on the summit button, which is this envelope you can use any other. I can obviously, from this whole set But if you're not planning on using this icons, then you can obviously remove this line as well. Then we have Google phones and I'm linking to the Roboto with the stand up and bowled version off the ah. If fund, if you are planning on using different phones, you can also remove this file. Obviously, we need the link to our ah custom Cordless he assess if I so that this needs to stay and again if you are using, uh, obviously foundation for then we need this vendor modernizing modernizing file as well Included is out ahead. If you are not using foundation, you can remove this final. So in which case, if you are no using obviously foundation if you know using the phone Elson or if you're not using the Google phones, then you can move everything apart from them. A link to our custom corded. Successful in the future, we have a link to their J query on the counter delivery network, which you will need. You can obviously replace it with the latest version. Obviously, at the time of this recording, 1 10.2 is the latest version of J Query. Then we have foundation for files. If you know using foundation. Obviously this can go. And then only Kordell Gs is the one that you will need to. You know, that's obviously be able to process the form. 3. Custom style definitions: these videos for those who wants their form to look the same way as mind us. If you are planning to use your own styling, they can skip straight into the next video. We're going to start with a star symbol, and the first definition will be formed. Family. We're going to be using their Google phoned called Roboto, which we've included the link to, obviously now had section of the page. Then sounds sir, if if the Roboto isn't available den Body attack for body talk we're going to specify the parting 20 pixels from it top and bottom and zero from the left and right. Then we go for the inquiry, which is going to be our text area, and we want to specify the hive off 200 pixels. Then we have warning, which are these Rhett warning messages. Whenever someone subs the form and either doesn't type in anything to their field, that is required All types in the incorrect volume, let's say, for email field, then this message obviously is shown above the field for so this specific field, because it's going to be a spawn. We going to make you have to make sure that it's a block display. We're going to start with color, however, which is going to be C 60 F 13 which is the red color and then mentioned display block. Then we going for the line height which we going to defined as 150% and informed size, which I want to specify as 14 pixels. Then we have a label and a warning as well. The star which we're going to apply here, is the parting bottom which will be 0.4 e. M. And that's everything in our Kordell CSS far we cannot save and caused the fire. 4. Form structure: If you know, open our index dot PHP farm after the opening body talk, we're going to start with the form with the method post, and then we specify the I D form contact and the class off. We're going to start with large hyphen eight. Then we're going to have large sent it down. We have Coghlan's and the last thing is a custom, which all come to get there with the foundation for bicycle E large eight and center Tessa's. Obviously, we want this specific element to be centered on the page. Large eight means we want to take eight columns if you divide the screen, because this specific framework by default is divided into 12th elements like 12 column basically across the your screen. So we want to take eight off these columns for our with and make them sent it. Obviously display them as columns and then custom. Ah, class basically indicates that our form because we using this foundation forms Ah, here obviously is going to form of our drop down menu to make sure that it looks a little bit nicer than the default browser drop down. So that's basically what these classes are going to do down. We're going to start with the field set and inside of our field, said We're going to have legend which will simply display whatever you want, but I'm going to put here simple contact form with PHP. You can obviously say something like contact us or anything else. Oh, basically, don't use the field said in a legend. If you prefer to. Next thing is they're def with the class large eight. Sorry, it's going to be locked. Six. Actually, because we dividing the elements were going to have to column elements by six of the 1st 1 will be six columns wide, and the 2nd 1 will be six columns White, which is obviously giving us 12 columns all together. And we are going to be obviously using this 12 columns inside off our container, which is basically taking on the AIDS car. Eight columns off there, the full display hair, which we obviously using to, you know, the view that form. So we taking six. So that's gonna be 1/2 and the other one is gonna be six as well, which will take the second half off them off the form and then we need so indicator. It's a columns as well. Inside of this Dave, we're going for the label to start with for first on the score name, and it's going to be simply first name Colon and and Star to indicates that it's a mandatory film. Down we go for the import, an import will have a few attributes. 1st 1 type text, then we have name will be first on the school name. Then we have I d first name raising I d purely for this for a tribute. So when we click on the first name label is going to select book bicycle course inside of this field, then we have placeholder your first name, or you can put whatever else you obviously feel like here. So that's our I'm going to put the closing at Sakia with Ford Slash And then after this one , if I copied the entire thing, we're going to create the second column and paste it underneath. This one is going to be a last name. So last name and then we obviously rename the four name and I d. So last name just going to copy this and over right here and then obviously your last name for the place holder. Now, if we copy this again, pasted underneath and replace it with email address, I go for email address and it's simply going to be four email, and we have type will be rather than text email. Then name will be email and I d also email. Then we have your email address for the place. Hold them and we'll continue with this form in the next video. 5. Custom select, textarea and button: if we know a copy there. Email sections, starting with, obviously the wrapping. Def. Copy this and pasted underneath this song, we go into half inquiry type and four contribute will be type and the same for their field named. The only thing is, obviously we know going to have it as an import here. Were we going to have it instead? Is the select Ah, tuck And this will have name attribute type I D type as well, and then we can close it in between the select. We're going to start with the first option which will simply have a value left blank and the label select one after this one. What we going to do is check with a PHP if isn't empty than we go for contact class. And it's static array property, basically, which is in the ray types we haven't got this class yet will create in just a moment, and then if it isn't empty, then we're going to look through it. So for each contact types s I d equals type and inside this for each look, we're going to have option with the value which will be represented by the I D and down we closed the option in sight. As a label, we going to echo type. So that's our select inquiry type. Ah, option. If we now scroll down and after our wrapping def for their select element, we're going to start with a diff with class large 12 which means we want to take the whole space basically across, which is within the form itself, large 12 and also Colon's class. And then inside of this day. If we're going to have label for inquiry and is going to be in a choir, e colon and star symbol and then we go for text area, would the name in a choir E i. D. Inquiry and, uh, placeholder we going to do your message and then simply closed the text area talk? And after this dif, we are going to go for another one, also with the large 12 and in columns on the side of this day. If we're going to have a bottom with a class button and we're going to use the small one, the color will be default so we don't apply any color class here. Then, inside of this, I want the icon So I element, class icon and is going to be envelope. And if I closed the Eyetech and after this space and before the closing button talk, we go for send message and that's our form done. We obviously having got this contact class yet. Eso Let's have a look at this in an egg via 6. Enquiry type dropdown menu: now inside of the roots of our project, we're going to create a day new directory. We're going to call it library and inside of the library. We going to create a new CSS file? So CSS ph B class file called contact. Obviously, the definition are using PHP storm. Obviously, that's a little bit easier because automatically put in the class definition. Otherwise, you're gonna have to create the PHP file called contact opening PHP talk and the class definition. After that, Now we're going to create the public static types property which will be in the rain and inside of this array. We going to have three values 1st 1 with the key one will be product inquiry in a coma. Number two will be billing, enquiry and coma. Number three will be support inquiry, and that's practically everything. So if we now save this file, open our index dot PHP school right to the top and before the documents type definition, we guard serious pH b require once, and we're looking for the library for the and contact dot PHP farm than semi colons. In closing PHP talking now save the file and preview our page in a browser first. The page you can see our form is now formatted. Except there one thing, which is their drop down menus. You can see the starling has inquired. Bean applied to it. It displays all of their options, which we have in our contact class, but it doesn't really render nice the It's not the same height, and so it's still using the default. Browse them formatting in order to change it. We need to initialize the foundation first. So if we go back to our editor and open the corridor Gs Fire, which you'll find inside of their jus folder again, this file is currently blank. We're going to start with the function. Are we going to call the function templates object and then to Kelly brackets? And we're going to start with use strict and we're going to first quickly creates two variables far form identity, which will equal harsh and form contact, which is basically the I D assigned to our form. Plants they hushed, obviously indicated to 90 in Hvar. Former u. R l. And we will be sending the request by Ajax by Ajax, and you water will be MLD and submit dot PHP will take care of this a little bit later on. Let's just create this variable. So we have them basically ready for when we when we need them. Next thing we're going to do is to create the public method called in it. That's going to be this dot in it equals function. And then to Kelly brackets inside of this function, we're going to use tricked mold and then we start with the document and then foundation and then function on Colback wants the foul. The foundation has been successfully load it and then we're going to use a method called sub meat form. And I'm just going to stop this method right at the top submit form. I'm going to start it. Begin obviously function cause a private method submit form and we're just going to put the use strict for now. And then after our template object, we going to stunt with the dollar sign in and function inside of it for document ready and inside of it, we going to go for var templates. O b j new template object. Basically instance hating this class and now templates object dot In it we basically calling this public method. So if we now save the file and preview it in a broza, and if you refresh the page, you can now see the our menu is displaying nicely. The height and width is the same as our text fields. So that's now foundation instance created. Obviously, we can move to next chapter. 7. Submit form method: Cellino Accord LGS which will find its out of the J S folder. First thing I want to do it in a previous video of Created this to private properties because they are private. Let's use the underscored the beginning just to make sure they obviously it's clear that their private as this is how you usually indicate. Obviously, the property our method is private by using this underscored the beginning. So we've got them underscore form, identity and an underscore form You are l we going for our submit for method now And what we're going to do this great document then dot on an own event submit So whenever the for miss submitted, then what we want to do issues our for my identity with checking for their form which element we looking at, obviously document and which element within this document tree we're looking at for the event submit and then function. We basically binding the summit events to this specific element Then we have e as event in a function and when this event submit has been executed, what we do in first of all prevent default to make sure obviously old default events all default behaviours are stopped and obviously are prevented from being executed. Then e stop propagation. So there's no bubbling up the Dom Tree ideas and nothing's being informed. Obviously this submission has happened. Then var this form and we're going for this. Then we have another VAR in disarray equals this form adult serialize ray, which is Jake where his method to get all of the fields and the values from the form and then we go for the post method we going to use under scuff form you are l This is when we want to send the request and then this array just basically all of the fields called and values collected from the form. And then we go for the callback function with the data. Whatever's returned from this call to us and the four month we want to use is Jason. So if the coma Jason and inside of this bowls, we first check if data, basically, if we got anything back from this, um obviously coal, then where we going to do is if exclamation mark data adult error, basically data aero index equals false. Then we're going to do something else we're going to do something else. And if it's been successful, basically era equals false. Then what we do? It's called our clear form Validation method. And we passed this form as the attribute. We haven't got this method, obviously. Yet we will create it soon. Then display message another method which you haven't got yet which will take to perimeters this form and then data message which will be returned from our age Exco and then reset the forms of resets method this form again. All these three methods will be created soon. Next If actually it's not going to be else. It's going to be else if we're going to check if there is data volley Dacian Index inside of our Jason return Jason array obviously And if there is valuation did that means we need to display some populations within the form. First of all, with the 1st 2 will be exactly the same ass in our first if statement. And after this, we're going to call validation methods passing this data validation risk response, obviously to it s para meter 8. Validation: after our two private properties Inside of the template object class, we're going to create the new methods. Off function is going to be private. Ah, method called rob validation and the perimeter will be message. What? This method will basically the ISR up our whatever we gonna get from the Ajax Cole robbed this validation message with specific span in the class. We're going to start with their use strict to indicate that we are in a strict mode and then return army using a spun class warning which you may remember from our CSS ah file and obviously, Semicon. After this we go into con coordinated in between with the message. So plus and then single quote and that's how abrupt validation message complete it. The next method is called validation. So after this abrupt validation, one we go for function underscore. It's also private. So underscore validation and we pass in the validation perimeter which is basically the array off key value associate ID. I attempts use strict and then we go for each, which is there J queries method for iterating through the items in the ray, then validation, which is our array and and function and we go into business key and value inside of this each eat aerator. We going for the item with the I d. That is represented by the key. And then before this item before we want Teoh display the message. But I want to wrap it with our rob validation methods. So rub validation. And then we pass the value so simply V and then semicolon after that. So that's aware Validation message SRE validation method also complete it. 9. Display message and clear form: after a validation message and other private methods or function on the skull display message. This methods takes care of the message, which is which is displayed above the form when the form has been successfully submitted. All if there are any problems with the submission, it displays the general message, something like police feeling the missing items or something like this. So first parliament is this form to indicate which form we referring to and then message inside of this method. We going to start with this use strict to indicate that we obviously in a strict molt and then this form, what we're looking for is find we are using legends. Are we going to be looking for the legend? Because I want this message to be displayed after the legend after method and then simply message as part meter and not will place their relevant message after the legend. Obviously, if you know, using legend, you need to find the elements after or before, which he wants to obviously displayed a message and then, based on if it's after use after, if it's before the elements then used before and place the message in as department so that's how would this play Message method. Next method will also be private function under scope, clear form, validation. And we're passing this form ESP armies again strict, mostly used strict and inside of this method. We start with this form dot find, and we're looking for the elements with class warning, which are all these single items above each field, which obviously has any problem with it. Obviously, it SAIDs if it's if it's empty. All let's say email format was incorrect or something like this. And then the main one above the form which will use the class alert hyphen box again. If using different class, use it here instead of this one, and then what we want to do with all these items inside of this form, simply remove them, so remove method and semicolon after that. 10. Reset form: the next method after the clear form valuation is also private function and is going to be underscored reset. And we passing this form s perimeter, We started with use strict and then we go for this form index zero, indicating that obviously finds this form object and we want the first wonder you're gonna find in a dump. There will be only one, but we need to use it obviously to make sure that we targeting the right form and then what we want to do is reset. We want to reset all of the items. There's one problem with our form we using custom foundation for a drop down menu and this drop down when you will not reset with this methods with this default reset method. So what we need to create is a separate method that will actually reset it. So I underscore Reset foundation custom select because you can see the naming that I'm using. It is clear as well. We know exactly what this method will do. We don't use any obviously comments here, but by just using obviously ah, fully clear naming for the methods. We obviously know exactly what's happening within the code as well. So I strongly recommend using the same approach. This form s perimeter. So now if I copied the name of this method above our reset function and another reset foundation custom, select method this form s perimeter, we start with use strict and semi column before I proceed to create the coat. In order to clear this reset basically this drop down menu. Let's go to the browser and see what the structure off our job don't actually look like. If you preview the page in fire back and select our job dumb and you can see the our select item is actually hidden. This hidden field class basically hides the field A and what we're doing is basically what the cold does. Their foundation JavaScript, far by cold does is create this dif with a class custom and it dropped down. Then we have to a tax which college current and and selector. And then we have this ally by city on order, at least with the elements displayed. So whatever happens when I'm changing, let's see two product inquiry. Consider the selected items item gets the class selected, and whatever labour we had, it's put into this current eight. So obviously, by resetting simply resetting our type select item, that wouldn't affect anything. So if you go back to our anytime back in our reset foundation custom, select after the use strict, we're going to go for our each, ah, methods this form and we are looking for find. We're looking for items with a class custom and then the rope down. And what we want to do is used the function on each of these items. And what we going to do this this So each of these items find we're looking for the U L L I elements all the ally elements inside of the U L talk and then remove class and we want to remove class selected. That's the first thing you want to do and den this find. We're looking for a talk with the current class, and then html is going to be this. I don't find you. L l I first hyphen child. We're looking for the first ally talk, and what we want to do is take it text the basket, the label between the opening closing, um, option talk. And that's everything. In this method, Tofino saved the file. If we test the folly now it Broza. If we click on send message, you can see we get this call executed, as we would expect that goes to Emily Summit. PHP far. Obviously, this file hasn't being created yet. That's why we get me for for not found and there's no validation because validation comes back from this coal. So let's have a look at this summit PHP file in an ex chapter. 11. Helper json encode: the side of the root of our project. Let's create a new directory and call it M o D. Inside of this directory. If we create a new PHP file and call it submit dot PHP instead of this file, what we going to start is by typing require once, and we going on one level up from our MLD directory. Then we go to a library and then we want the helper dot PHP file. We haven't got this folly. It's we will create in just a moment now copy does require ones and paste it twice underneath. Annex class we're going to be requiring is our contact dot PHP file with contact class in the last one is volley date or this one doesn't exist, Ida. So what we going to do before we start working on our saboteur? PHP far. We're going to start with the help of class. So inside of the library folder, if we create a new PHP class, the name helper. Obviously, if you haven't got the same editors ideo simply create the help. It'll PHP file an opening PHP talk and start with the class definition off the the class definition, we are going to start with the first method, which will be public static function, Jason and code. And please make sure they use the camel case. Obviously lower case. The first key words. Basically, the second Ward goes with Capital First Letter and so on. Because in PHP, obviously we have Jason underscore and coat meth function, and we were obviously don't want this to to be confused. The functionality is going to be pretty much the same. The only thing is what we going to do here in just a moment. What you going to see is used. Jason and Coat building PHP function with some constants to make sure that the output is obviously safe to send through Ah, Java's bicycle back to JavaScript and display on a page. So Jason and Cult, we passing the value, which we want to in cult, by default? No. And what we doing first is checking if defined. We're looking for their constant called Jason on this go on, escaped and underscored unique coat. Now this constant has been other to PHP from version 5.4. So if you using let's say 5.3 version on your several, then you won't have this constant defiant. And for this we going to use the else statement which will simply use the same constants airs we going to use in the previous one except this one. So we're going to start with return, and then we go for Jason and coat and we positive value, which won't turn coat. And then all of the Constance Jason underscore Hex doc. Then we go Vertical line. Jason on the skull, Hex. April's apostrophes. Then we have Jason Underscore, Hex. Ah! Quotes, quote. And then again, vertical bar down we go for Jason. Ah, underscore Hex and distance is a MP. And then the last one is the one which we were checking for, which is Jason underscored a ness caped unique coat. Now, if we copied his entire Jason and called actually what we could Dio is to put all these on new line so we can read them a little bit easier. Something like this. And if we copied his entire return statement and paste in the yells section, remove this Jason un escaped Unicode announce everything in this specific method 12. Alert wrapper: the next method. Inside of our help, a class will be called alert. It's also public and it's also static function alert and we passing the message as first panem et den type as second By default, it will be Allard which will basically apply this red background. Ah alert will be basically for all the warning messages and this is the warning message. Which arm which is going to be displayed above the form the general one. If it's going to be the confirmation, then obviously there will be a different class rather than Allah apply to it to indicate with something like with a green background or something like this. We started with the out variable which will start with DIF and with a class alert hyphen box which is one of the classes inside of the foundation. For then, we have out and we start isn't empty type. If it's not empty, simply use it, but used the space first to obviously create the space between this class and the new one. So type otherwise, colon. No, but we don't want to add anything to this string and then out coordinating this with closing double quote for this class attribute and then closing, Opening defeat Tuck then out con coordinating with the message. And lastly, we need to close our dif So closing dif talk. And now once we've got this whole string ready, return it by simply typing returned out and that's our helper class completed. 13. Validator class: the next class we need to create is the valley data. So inside of the library fall that we going to create the new PHP class called validator, he said of the volley data class. We're going to start with defining a few properties. The 1st 1 would be public called expected and is going to be an MBT array. The next one is public, Very quiet. Also empty array. Then we have public validation Ray as well. Then we have public array, which is also an empty right. Then we have public errors. Another array in the last one also array public, special. Okay, so these are our six properties after our properties, a few new lines and a new methods which also will be public function called is valid. And what we going to do here? We're going to pass the ray as department No, by default. The first condition inside of this method will be if exclamation mark this and underscore is a ray empty and we passing our arrays the part meter. And after this, if statement simply simply return false. So now what we checking for is obviously, if the array is an empty, we need to create this methods. Obviously, this should start with the dollar sign. Now, this is a ray empty. So above our f is valid. If a creative a few new lines and we're going to stop with the private function is a ray empty and array aspire meter by default. No. And here simply return semi Colin after this and inside of the return we check for isn't empty Ray and is array our array. So basically checking if it isn't empty and if it actually is a rape. But now the question the method name is is array empties. Obviously, we need to return the opposite. What we going to do in order to do it simply inside of this bracket? Put the exclamation mark and put this condition inside of another set of brackets. So if it's not going to be empty and it is array, we would return Sure, which is opposite opposite so and to what we asking for. So in order to make should obviously it's returning the correct answer to our question. We need to use this exclamation mark en Rupp. Obviously our statement in a positive brackets. So that's our is array empty method. An hour is valid method. Just the beginning of this method we're going to create create a few more statement inside of this method in an X video. 14. Filter expected and required: still inside of our validated class and is valid method after the first, if statement, are we going to do it? ISS called another method called fuel tear. Expect it and we pass in the array as perimeter and let's create this method right above this is valued. So a few new lines again and is going to be private function under Scott. Filter expected, and we passing the array as perimeter by default. No. Now we going for the for each loop array. Yes, key equals value. We don't need to check if the array is empathy another because obviously we've done this already with the first statement. So we know that this is definitely an array and it's not empty, so we can go straight into the for each loop. Now we check if, ah, in array and we're looking for the key. And then this expected, which is our wear property, which is in the ray, Obviously and disarray will contain all of the expected fields, which will will feel in inside of our summit dot PHP file later on. We specify what feels we expecting what feels we requiring wealth fields need some special treatment as well. And if it's inside of this expected fields what we want to do, We want to pass this key and value to our array, which is basically the filtered every off all expected values collected from the post s O key or a key and then assign value to it. So this is our fielder expected method. If we scroll down to our is valid method again after calling field it expected Let's go for another method called is required valid. And if we copy the name off this method and above our is valid a few new lines, let's create private function is required valid. And we are simply going to be checking whether all of the items which are inside of the required array have also been passed through the polls. Basically, when the form has been submitted. So for each, this time we're going to be going through our property required, which is obviously in the ray s key. And now we check in. If exclamation mark array key exists, many, obviously, if you're a key does not exist and looking for our key, which is inside of the required array. And then in this every day which were fielded Elia using their filter expected method. Then if it doesn't exist, meaning obviously this hasn't been submitted that there's something wrong with the submission this at Arrow and we adding the key Now we don't have our error method. Let's have a look at this method in the following video. 15. Add to errors array: in a previous video We've used at error method, which we're going to create now. So before our is required valid a few new lines. And this time this method will be public because at some point we may need this method to out some errors outside off their class itself. So at error and then we go for the key, which by default is no. And now we check if this on the Scotus Aargh Key volleyed and we passing the key ESP Army to him. If it's valid, What we do is this. Errors array. We passed the key, and we equals. This equals this validation array and working for the specific key, which will have a signed message to it. So basically, we put into the air errors array something like this. If it's in the ray, it's going to be, Let's say first name will have police provide your first. That's what we actually doing it with statements, errors, array. When we're looking for this key is going to return this message. So that's our at aero method. Obviously, having got this is a rookie valid. So let's copy the name of this method and create a buff. Our art air one. This one is privates, A private function. Is there a key valid? And we pass in the key by default? No. And what we do is simply return Checking for a statement that let me just put semi colons straight away after the closing bracket isn't empty. So exclamation mark. The beginning key. So key isn't empty and exclamation mark every day key exist. And a key, first part, a meter. And then we checking for this air rose array because obviously, if we already have message for this specific inside of the Arizona, we don't want to add another one, but because it's obviously going to override the previous one. So we first checking if the key is an empty and then if it's not already inside of the Arizona. So that's our is Air O Keefe rallied together with art era methods 16. Entry validation: back in our is valid method after is required valid. We going to call another method called this and a method name ISS ISS value volleyed. And after this, before we start creating this, we just complete this method return and we check in empty This errors Basically we we asking is ariz array empty? It's going to return True, otherwise is going to return fall. So that's how we doing here. So is value valid before our is valid method? A few new lines and it's private function is value valleys. We started with the for each loop. Are we going to use the air ray which were filled at area s key equals volume? First thing, if this and in a method called is empty and re quiet are we passing the key as the first perimeter and then value as the second and then else if the next condition is in Ray and we're looking for the key and this special array, so if it's requires some special validation, please note that this should be in array. Note is array of my mistake. Sorry about that. Then this underscore validate special and we passing the key and the value s perimeter. First we're going to create this is empty and required. But before we do this, we obviously need to make sure that we return something inside of this. If statement, If it's empty and it's required down, we simply out Pero bypassing the key, obviously indicating which item is empty and it's inside of the required fields because that's obviously not the way it should be. So is empty and required before our is value valid. A few new lines. Private function is empty and required. We have two parameters. 1st 1 is the key by default. No and value also know by default inside of our new method, we're going to return. That's semicolon radiant, and the condition is self. We're looking for is empty array, which we create in just a second value and in array key. This re quiet basically what we check in here If the value is empty and we're going to create. This is empty method because stand up empty like empty function bicycle PHP function. Check whether the values empty based on if it's zero, it also equals empty and we want to avoid is because in this case, value may. It's in some cases, be easier with will be which will be quiet. Ah, obviously Ah, acceptable. Acceptable value to be submitted through the form. So we want to exclude this kind of case. So let's have a look at this. Is empty method first so right above for create a few new lines and we simply create public this time static function, um is empty and we passing the value by default? No. So what we going to return here? It's check first. Empty. Ah, value and exclamation mark is numeric and our value. Because if it's new America, in which case zero would be then obviously that condition is going to be false. Both of them they have to be true in order to return. Truthful is empty, obviously statement. So if it's zero that will return false in which case obviously doubts going to also return false And obviously that means that the value for the specific field is not empty. That's our is empty and required, plus is empty methods complete it 17. Email validation: instead of the way is value valid method. We've also made use of the Valley dates, special private method, which we haven't got yet. So right above our is value valid method, private function validates special, and we have a key as the first part amita end of value as the second, he said of this method. What we going to do is to use this switch statement. We're going to use the switch because sometime in the future, you may use the same class to validate any out there specific. Four months basically fall for your forum. You may have telephone number, which you may want to validate, or anything else that you may think that would be nice to have validated rather than just checking if it's empty or not. So in this switch statement, we going to have only one case. Obviously, we only checking for email, and in this case, we're going to have this on this score is email volleyed and we passing key and value and then break. After this, we obviously haven't got this. Is email vomit valid? So above our new methods, A few new lines and private function is email value to regard for key again and the value inside of this method. What we going to do is if exclamation mark feel ter var is a PHP function, and then we positive value as the first perimeter and in the filter, which want to use, which will be filled. Her volley date email. We're checking for email with this field of basically, if it is not valid email address. If it's the former, doesn't obviously comply, then this. We are going to erase art Aargh and we passing the relevant key to this method. So that's our validator class completed to weaken now safe and close the file. 18. Submit file: back in our submit a dot PHP file, which will find inside of the M. O. D. Folder. After all, these three require ones functions. We're going to start with the instant shaitan in stay she ation of our new object Valley to so object volley data equals new volley data, then object Valley data. We specify what items we expecting so expected array and we specifying what we want from disposed to be collected first name. Then we have a last name down. We have email another field waas type, which is our drop down menu. And then have we have texted? I would just inquiry now if I copy old is basted underneath and change the property name to required because all of these fields are required. So let's just do it this way. It's gonna be quicker now if you scroll down the time of it. The next property will be object volley data special, And there's only one field that we want to validate in a special way other than just checking if it's empty, which will be email to validate, obviously, for the correct format of the email address, the next thing is object validator and we going are going to pass the validation messages. So array, we start with that first name and a message. We should say something like police provide your first name. The next one is lust underscore name and a message for this one will be. Please provide your last name. Then we have email. Please provide your volleyed email address. Then we have type. Please select inquiry type. And then we have inquiry. And a message for inquire will be something like police. Provide your message. Perhaps. And so these are old five Fields covert. After this, we're going to start with a try and cut statement. We constantly exception represented by evil Rabel. And if any exception has been thrown while we executing a try block, we're going to create the message viable. And we get the message from the exception. So get message, you know, Echo Helper. And we're using our Jason and coat to output the message back to their JavaScript. Pass it back to the jails, kid brother. And inside of this array, we start with the error index, which will be true in this case. Then we go for the message, which is our message for able. And the last thing if I scroll up will be the validation to simply object Valley data, older, collected errors and the messages. So that's the catch statement. In the next video, we're going to work with our try block. 19. Validate request: instead of our tribe. Look, we're going to start with if object validator is valid and we passing the post are able to it with all the items submitted through the form Els, What we going to do is to throw new exception. An exception message will say police fill in that missing items. If the validation has been successful on, then we go for if contact and the method which we haven't got yet inside of our contact class which is called sent. And what we going to pass over to this method is the array all the collected and violets, uh, keys and values basically from our form Else again, we're going to throw new exception, saying something like Message could not be sent now. One thing before I forget we throwing all these exceptions, but they are just strings without even rapping paragraph or anything like this. So if you scroll down to our cup statement and when we are passing this message to our message index, what we going to do is rub it with the art class. Sorry method inside of the helpless class. So helper and our olive message. And this is what we going to do this is basically going to rub this message with this red box which you'll see later on. We're gonna start testing the application. So if you scroll up and if our send method has been successful, then what we do is create the message. This same message will say that message has been sent successfully. And semi Colon, then Echo Helper. We're looking for the Jason and coat again. Ray, we passing through something called After oldest. The first index will be error. This Simon will be false, indicating that everything's being successful and the message which will rub again with our helper al it method. So its message. And this time we're going to pass The class is the second part meter, which will be success, which is foundations green background color basically for this specific our type. So that's our way, Sammy dot PHP file completed, actually that the only thing is we need to obviously go back to our contact class and create this scent and any other methods that we haven't got there yet. In order to send our message 20. Format message to html: if we open our contact dot PHP file inside of their library folder, which is our contact class after the types property, we're going to create another one this time private static, and it's going to be called Underscore Receiver. And then that's going to be at Ray and inside of this array. We going to specify that email address so email on is going to be, for instance, in four yeses the tutorial still to come and then name index, which will be s as the tutorials. This is basically the array which will contain the details off the receiver when the form is submitted. Who should we send it to? Basically, um, so you're going to have to obviously specify the details of your client, your clients, email address and your clients either Business name, all personal name off. Whoever is receiving this email address, the next item will be the constant inside of our class, or CONST, and then capital letters. Contact subject and his contacts subject will be basically the subject of our email, and it will be enquiring from my websites or whatever else you feel a small relevant after all, these properties and constant let's create a few new lines and we are going to start with the first method, which we've called inside off their send dot PHP file, which you'll find it's on inside of the MLD folder, basically previous chapter and we going to call it public static function. Ah sent and we passing the every through as the perimeter, which all the submitted values than message variable, which will start with self because we are referring to the static method which will be private. So underscore format message and then we pass away array Esparta meter. So four month message, obviously, is the method which we haven't got yet in this class eso above our sent method, few new lines and private static function. We go for former message every Isparta meter by default. No and what we going to start here with its items and it's going to be an empty array. Now we start items to square brackets, we adding a new item to this array, and we start with strong first name colon and closing strong talk down. We're going to have a space and co coordinating this with array and index first names of value associated with a specific index Next items again next night and will be strong. Last name Colon closing strong talk space. And then we can coordinating this with Ray. Last underscore name, I item they find out. Copy this rather than typing this over and over again based underneath next item is email address. So email address this one was will be slightly different. We changed the array index to email, but what we also want to do is to make this email clickable. So after the space a a trip, if male to colon and then we have to have a concurrent with our meal. Then we can cut Natan again closing the the A trip. Double quote closing, opening attack again. Khan coordinating with email, then concatenation. And in between the single quote closing attack. Then we have another item. Rather than doing this job like this again, let's copy that last name, paste it underneath. And now, rather than last name. Obviously this will be there. Type off the inquiry and we are going to use a rate type. But obviously type will only return the I d from our types array. So what we need to do issues self and we using their types array. And then, by using the index, we can retrieve the value associated with this index inside of this types array. That was going to give us a label for that. If we now copy this latest last name again I times. Now, the last item is simply there. The inquiry So are we actually going to do is remove this strong here, and we're going to wrap rather than the last name inquiry with non breakable space. So you hind to B R. So basically all new line characters will be converted to the B R attack, which would obviously be our html Biarritz like creating a new line in our HTML email. So now that we have all of the items covert, let's start with the out variable. We start with a dif style we want formed size to be 14 pixels than semicolon formed far me Lee to be aerial sons Saref, Semicolon den Kohler. Let's make it 333 which is this dark gray and I think that's enough so we can close the double quote, then closed the dif and obviously, Semicon after all this, then out concatenation this wit Starting paragraph talk. Then out. We can coordinate this with implode function which is basically joining all of the items in your A with the specific globe basically Della Meter. So be our talk. So I want all these items that we've added to this items array each item to be separated with the bs. After each line, we're going to have be our talk basically. So we imploding all these items from this array. So we need to pass the items raise the second part of the time, then out con, culminating with a closing paragraph talk and out conquered meeting with the closing defeat Tuck. And that's now our HTML message ready. The last thing we need to do inside of this message simply return it. So return out. Announce our former message method completed 21. Send method: bucking hours send method off the contact class after the message and our former message method. Let's create from variable and let's yourself another static method inside of this class called format from And what we going to do its part of the year Race barometer. Now, above our sand methods, a few new lines and we create another private static function format from Are we passing this every espera meter? No, by default. And then we simply return array and looking for first underscore name, then concatenation eating this with a space and then array last on the skull name. And after this, what we do is concatenation again opening, uh, doc like item, then array we going full email address and then we are closing this talk eso basically this email address is going to between be between this target, like left and right arrow. Basically, Hora qtr so effectively, the return value will be something like this. Let's bastion so lean ski in four SSDI tutorials don't come. This is what is gonna look like. I'm going to put in between a single quotes like and actually clearly see what it's gonna look like. This is exactly what this method will return. So this is our former from ah method. The next one will be to inside of our send method, and it's the same thing self for month to this time. We don't need to pass anything because we're going to be using our properties and account decided not constant about properties, private static function, underscore format to and inside of our former to. I'm just going to copy this entire line base inside of this one. And rather than con culminating here with the first and last name rather using array, where we going to do self? And we're using receiver and receiver I temp name by sick. The index named the Valley associated with this, and now it's copied itself. Receiver replaced this array and email address. So basically, to whoever we are sending this email address, obviously this item is gone are going to be placed in this same format. So it was called down to ascend method again. Next, we need to have a look at the headers that we go into passed over a male function. We're going to start with head there. Heather is actually equals and them in between a double quote, mime, hyphen and then version with a capital V colon. 1.0. And what we need to do next is due back slash. Let a lower case R in backslash, lower case n and then semicolon. After all this, what this is bicycle is a courage return and line fit. This is covering us on all three systems. Basically mark line ox and windows on windows. You have to have both of them on line X. You can just have and own windows. You you have to just You may have just our bicycle this backslash up, but to make sure there's obviously cross platform compatible, let's use both of them, and that's going to be working fine. Just and also very important thing. Make sure that you enclose and close everything within the double notice single quotes. That's also pretty important here. Now we're going to contaminate this headers with again double quotes content, hyphen type than colon text for a slush H T M l. Because you want our email to be html for months formatted in html. Basically, heart set equals U T F hyphen eight. And then again, bucks Lush are bucks lush and and then semicolon. After this down, we contaminating our headers again with from colon and space set me going after this Heather's and getting out of concatenation. Now we're using our from variable. Then we can coordinate again wit in the between the double quotes buck box slash n then head. There's another concatenation wit reply to colon space and in semicolon head there's another concatenation with from again and after oldest. If we create a new line and simply return mail and now we using two very able to indicate who we sending this to, then is the next item. Ali's is the subject, so contact subject constant. Then our message in the last thing is that Heathers semicolon announced our send method in our contact glass completed. 22. Test: now that our form is completed, leads test if everything works the way we would expect it to first of all, without feeling any information, let's click on the send message button. You can see that the validation at the top has been displayed, and all the individual messages has also been displayed above their field. Obviously, which they refrain. If I scroll down and try to press their send message button again, you can see nothing changes. But if I feeling one off the fields, let's say the first name and a click on send message. You can see this message has disappeared, but all the other one state, as you would expect it to be. So let's filling in, then Emojis bass tenacity, tutorials, inquiry. If we select support inquiry and my message will be, this is the first support and quiet. Now, if we click on send message, all of the validation messages are now gone, and obviously our main validation message has been replaced with a confirmation. That message has been sent successfully. Now, if we check our where mail client, as you can see, that message has arrived successfully from field has obviously taken the data that I've entered onto them form subject is our constant. Then we have the message formatted in html, obviously exactly the way as we've done it in one off our methods. 23. Project summary: our form is now completed and you can start using it in your life projects. Using the existing classes, you can extend the form to accommodate more field, select check boxes and other form elements. If you would like to lend how to create the advanced contact form with the file upload, make sure you check our other title called Secure PHP Online contact form with attachment. I hope he enjoyed this course. And if you have any questions, please get in touch. Not safe for now. Goodbye.