How to Create A PHP Contact Form

About this course

hey what's going on guys welcome back to programming knowledge and this is another video tutorial series and in this particular series we will be

learning how to create contact form in PHP with MySQL jQuery and bootstrap so at the end of this video tutorial series we will have this particular contact form with all these fields first name

last name email and others and we should be able to send email when we try to send or click on this button so in this lecture I'm going to walk you through the basic structure of our contact form

we will be adding on custom.css and also we will be laying out the structure of our form itself with the first name in all this field right here so let's go ahead and create our new project so I

have created a directory contact form with index dot PHP and also with custom that CSS files so let's try to open up this index dot PHP file in our code editor so in here we have the empty

index dot PHP file so I'll be passing the base structure of our index dot PHP so now we have the HTML structure of our index dot PHP we have the title contact form in the programming knowledge we

have set meta attributes we also included the bootstrap minified CSS so in this version or we have included a version 4.1 point is s and we also included a fun from google api s– you

can possibly don't try to copy all the contents here and we also included this custom CSS that we have defined in our directory here and then we have defined the div

with class container and row we also define column xn8 inside this division we have defied h1 with the link for our website so contact form tutorial from programming knowledge and we also

included the paragraph that says this is a demo for a tutorial dedicated to crafting working boots or contact form with PHP and Ajax in the background and before the closing body tag we also have

included different scripts say for example we have included the jQuery minified @j s so again version 3.3 point one another script will be the popper ejs with version one point fourteen

point three another script bootstrap that mean minified that Jas and also the validator that minified or that mean that Jas we also have define a script with contact GS as the source so we will

be creating this file later on you can search for the CDN for this files okay to include in your project jQuery we have the bootstrap we have deep operate that we defied that GS and also with the

validator that means a J's you could search for this CDN in the Internet and include that into this part right here just right above the closing body tag and inside this division we will be

putting in the form for our contact form so I'll just go ahead and paste the Kanta for element okay we need to indent this so it would be readable for us so we have deformed element with ID contact

– form we have the method post the action instead of contact that PHP let us set this into index dot PHP and the role is for we have also added div with class messages and here article trolls

so div class controls we will define another day with class row and let's add another div with class column medium six and inside this division we will be adding the form group div and inside

this day we will be having the label for our first name one of the most important tags here the input for our first name of course we have the ID for underscore name with type text' name which is yes

name and class form control placeholder will be please enter your your first name and of course this is a required field and also we will be having the dip with the class helped block with errors

okay the same thing with the last name so column medium six form group label for our last name and input name so we have input ID with form last name form

underscore last name with type tags we also have the name as the surname class the same form control placeholder please enter your last name required field and we have this health lock again

here so Dave have with errors classes and we will add another row that will hold the second row which will be for our email and the specific need that we are trying to request so for example we

have requests for occupation request order status require a request copy of an invoice and other so again this is for email we will define the Deb grid form – group class label for email and

input ID for email type email the name for this field will be email of course and class s for control placeholder will be enter your email course and required field again and this will be for our

help block if there are errors also with errors and here this is a bit different from other fields so we have defined the form group and label and this will be the select or the drop-down box that we

will be seeing later in our form so we have the first option will be empty the second will be request for quotation this third one will be request order status and the fourth one will be this

request copy of an invoice we have another row for our message so column medium child form group label for our message with the four attribute set to form underscore message which is this

idea right here so text area ID equals four underscore message name of this text area s message form control again placeholder will be message for me and

the standard help block with errors step with all these classes right here and the last will be the submit button of our fourth so then class column medium child and an input type submit class BTN

BTN – success BTN – send with the values and message so save your file for now and let's try to preview our index dot PHP so let's go ahead go to our browser and navigate to this localhost / contact

form or whatever the directory you have created earlier so in my case that is contact form so if I try to refresh this page so we will have this contact form with all the elements that we have added

so the first name last name email the specific request and the message and also the button right here okay so I think that's it for this tutorial and in the next video we will move to the

exciting part of creating this contact form thanks you