Create A Contact Form with PHP That Can Actually Send Mails!

hello everyone in this video we are going to create an arcing contact form by using html css and psp so we are going to create a form then style it then we are going to add the ps file to make it functional and then we are going to upload it into server to see if it really works or not so if you are not interested in styling and other stuffs you can directly jump on the psp section i will add the chapters and also the time system so you can jump directly into that section you want so without any further ado let's get started at first i am going to open a new folder in my desktop here let's name it form and inside this i will add a new index.html file then also an estellar css which will be containing all the style of this file and also mail.baseme you can give it whatever name you want it doesn't matter now after creating all of this i'm just going to open this by visual studio code okay now let's go to the index.html and create our markup so this is a simple baller plate here let's make the title to contact form also we need to link the css here after that let's get into the markup so this is going to be very simple here i'm just going to create a container div and inside this let's use an ason for the title contact me then let's use a paragraph tag to add some more other text here i'm just going to copy this okay this should be our text now let's add our form and at first i'm just going to add a level it will be for the name and we need to add an input field it will be type text so input type text and the name will be same of this name it is compulsory you need to put a name here you can either ignore the id it doesn't matter but let's add the name here also after that let's create another level here and the type will be email sorry for email and let's add it level here after that it will be input type will be email name will also be email let's also give this id of email although we don't use the id here also let's add another level it will be for the subject let's type subject here it will do our job and okay after that we need input field the type will be test because the subject is a text so let's add subject and also the id of subject now let's add another level for the message and then we can add a text area here the name will be the same as this for here i'm just going to remove the id we don't need that actually so i think it will be it ah let's open this by the live server extension here and here we go this looks really ugly but we are going to style it now so before getting into that let's go to the phones.google.com and i will like to use left display here for the title and let's get the semi bolt or data lick the regular one and another one maybe poppins okay this one let's get the regular r400 so i'm just going to import the link at the index.html okay so now let's go to the stel.css and do some stylings so we on the margin sorry not my site margin zero padding also zero box sizing border box it is the default uh reset for the browser stylings let's target the body here i want to give this a back background color so let's give this a background color of hash on b on c on e it is kind of black but not full black text a line let's make them center and after that let's target this on here and we want the phone family to display fair display let's just copy this and paste it here let's increase the font size a little bit to maybe 59 pixels so after that let's make the color to be totally height then we can make the phone droid to 600 because we have imported the 600 front right only also let's add some padding at the bottom it will create some gap with the test so let's give it 20 pixels value so this is how it looks like now let's do some other stylings and actually let's make it smaller here so now let's target the paragraph text here i'm going to give this kind of greyish color d2d2 d2 okay it will do and after that you started the paragraph tag then input then test area also the level and we want to give this a fun family of puppies let's just copy it and paste it here now the test has been changed so let's target the container and for the container i'm just going to give this a maximum height of 1320 pixels after that let's give this a margin of zero auto to make the content at the center let's also add a padding of five percent after that let's target the form and give this a maximum height of maybe 500 pixels also we need to give the margin 0 auto to make that center after that let's make the text align at the left because we have given the body a texture and center also let's add a padding we only need the padding at top and bottom so 20 pixels left and right zero now let's target these things here so they are by default inline element so that will appear like this but we want to appear them at separate lines here so let's target the input and text area also the label and give them a display of block let's save now they landed separate lines also let's set the margin 0 to make them center let's make the height of 100 percent so they will take the enteroid also let's change the color a little bit we actually cannot see anything here 8 2 8 2 and 8 2 i hope this is it okay this is the color now we need to style this input fields and this one so input and text area let's make the background color transparent border will be zero now we cannot specify anything here so i will add a border at the bottom two pixels solid okay it is already here but i want to give this this color now we got this so after that let's start at the input so uh we need to add a submit button in here i already forgot that so let's add the input type submit and value will be sent now we got the button in here now in order to style this we need to target the input type submit so by this we can specifically target this button here so we want the background color to be kind of gash five four five five five seven this is the color here and let's also add a padding we only need padding at the top and bottom left and right it can be zero let's also make the color of the text to be height so you can see it let's increase the font size to 16 or 18 pixels looks better there is a border at the bottom here we don't want any of that so border bottom let's make it none let's also add a margin at the top of 30 pixels so it will have some gap with other input fields but when you hover on that the cursor doesn't change so we can add a cursor or pointer okay now we can add an hover effect with that so i'll just copy this and add a hover so for the hover let's change the background color to be totally height so triple f and the color of the text let's make it black or this one it looks fine so we can also add a transition okay it should do so whenever we put some taste in here it actually looks kind of small and dark so we can target this and make it height and bold or maybe bigger so what we can do is we can target the input and text area let's make the color to height also let's make the font size to 18 pixels also let's add a padding of 10 pieces let's save and now it is much better okay so whenever we focus on that we click on that we got this outline here we can change the outline if you want so let's do that input type will be focused when you focus on that and also that text area and whenever we are focusing on that so we need to change the outline to maybe on pixel solid and the border color here this is this one so i think this is the color i'll just copy this and paste it here now it got this color here so styling for this thing here is done so what we are going to do is going to make this form functional so in order to do that we at first need to add two things in the index.html with the form so the first one is the action so the action will be this one the psp file name so in this get case it will be mail.psp and we also need to add and method the method will be post we can also use get but i prefer the post here so now let's go to the php.mail okay what i'm going to do is make it bigger let's make it dual monitor here now in the php.mail let's open a psp file this is how psp file works we need to put an start and closing tag here now we are going to create some psp variable let's uh create a variable named name and we are going to get the value from this input field where the user will put his name and we are going to put this value inside this variable so we can use the global post variable here sorry dollar sign underscore and capital post and we need to put the name which is in this case is actually name inside single code double quote single quote both so this is the name i'm just going to create some copy let's also get the email here and also the subject also the message actually it doesn't matter whatever variable name you want to create it doesn't matter but this one is matters because this should be the same with the name of the input field in this case it will be the email so let's change that and this one is the subject and the last one is the message so everything is done so after that we are going to create and mail header actually whenever you got an email you can see that at the top there will be some text right the receivers the sender's name and his email address so we can actually do that here let's create a variable named maybe uh mailhead okay mail header so we are going to put some tests so we need to use the quotes and maybe from then we can put the email address so we need to concatenate this okay we can put the dots to concatenate and use the variable name which in this case is the name after that we are going to put an black angle bracket here because in mail you also see this type of brackets and in this bracket i want to display the email address okay so let's get the variable of email after that let's again close the thing this is the closing angle bracket so uh we can we can add an line break here so after putting this mail header it will push to the next line so the thing for that will be our backslash end so it will it is just nothing it is just a line break so after this everything else in here will be starting in a new line just this okay this is our mail header and now we need to put our email address so where the email will be sent so let's create an variable maybe recipient okay you can put your own email address here don't put my email address because that will just do a spamming so i am just going to put my email address in here okay now all the mails that will be sent from this will be sent to this email address okay so in this case in your case you can put your own email address and it will be sent there after that we are going to use a mail function so just for better understanding i want to show you in details so in w3school you can see it in details so the mail function contains some of the attributes here the first on first parameter will be 2 so it will be the recipient email address it is required and specific to the receiver then there will be the subject we already got the subset input field and if you don't have any subject input field in the form you can put an empty variable or maybe some test of your own then there will be the message then there will be the headers the header is literally optional so it is type uh it is from that email address and like that and the header should be separated within line break like this we already use that and the parameters are optional so we are not going to add that so these are the things we are going to add now let's do that so main function at first we need to put the recipient after that there will be the subject after that there will be the messes and at the last will be the mail header okay we got everything but uh there is an issue here if there is some problems with the server or anything so if it cannot send we can't show a message here or die and maybe the message will be error so if it cannot send the mail then it will die here so this thing here will not proceed beyond this but if they succeeded if the mail has been sent then if you want to show something you can also do that like echo and this is sent like like this so this this after uh sending the mail or after submitting the mail when the submission process is successful it will just open a new page and display this message only but i think it will look kind of ugly just a simple text without any stylings or anything so i actually don't want to do that we can actually display an entire html template in here also and that is what we are going to do here so what i am going to do is i am just going to create a copy of this index.html and lets also open this so this is it but we actually don't want to dispel all of these things so i'll just remove the form from here and in this let's add some dummy text you can put over whatever text you want i'll just put thank you for contacting me i will get back to you as soon as possible and we can also put a link to get back to the home page so let's just delete that and use a p let's give it a class of back and go back to the let's use an anchor tag and it will take us to the index dot html from paste okay we need to put a full stop and i think it looks fine but we can do some stylings so after finishing up the style.css actually i don't think this looks fine so let's target the anchor tag and give this a color of i'll choose this one let's also make it font style italic and also i'll just add hover effect that will only change the color to totally height let's save and now it actually looks fine so i'll just go with that so we actually don't need the copy just these things so just copy this and insert the mail.php actually we have used the double quote in different places in here so we cannot actually use the double quote again so for the psp code i will just use the single quote and inside this let's paste our entire thing and it will do so it will get all the stylings because we have added the stellar css and also the fonts and everything so this our project is done so i'll just remove the indexed copy we don't need that and we are going to upload this in the server but before doing that we actually cannot put a folder in the server we need to make it a g form not the r r so let's select the j you can make this kind of things with the winter 7-zip or any other softwares like that so let's okay and this is our form we are going to upload in our server so in here i have opened my cpanel of my server and we actually need access to the file manager so let's get into the file manager and upload so we actually need to put these things inside the public html and in order to upload something i think this is the option let's uh put the zip file in here and it has been uploaded let's go back and select the firmware zip let's make this extraction and here we go so this is in the main domain then there will be form and then inside it there will be the index.html okay now let's open an incognito window here and it will be this url backslash and form it will automatically get into the index.html we don't need to specify it so here we go this is our form let's put something here and everything is okay we already submit all of this so let's click the send and it takes us to the space here we can see these things and also go back link and if you click that it will take us to the index space now let's check the email i have opened this so if you cannot find the mail in the primary location you can check the spam folder so this is my spam folder and this is the mail and here as you can see this is the sender's name then there will be the mail inside this angle bracket to this email and also you can see the subject and every other things this is the subject and it's the message so it actually works so i think uh this is everything about this video and if you want to apply more input fields you can also do that this is very easy so in here we have used the okay in here we have used the messes so you can add multiple fields inside this so you just need to concatenate with each other so let's suppose we can use another variable and put the message then you can add other fields like budget or any other fields you want like location deep and you can put all these things inside the message here which is the third variable so you can create a third variable and concatenate all these fields you want to add and just pass this in here so you can also see the values of that field in your image so i hope you find this video helpful and if you like this video please don't forget to subscribe give this video a thumbs up and share this video thank you very much for watching this so far and see you in the next one take care and goodbye [Music]

Channel: Mr Coder

Views: 3,532

Keywords: How to Create A PHP Contact Form, how to create a php contact form tutorial, working contact form php, how to create a contact form, how to make a contact form, php contact form, contact form, html contact form, php form, create a php contact form, web development for beginners, php send email, php tutorial, simple php contact form, php mail function, php mail, send email using phpmailer, how to make working html php contact form, how to create a contact form in html and css

Id: GAe2nZpI39c

Length: 26min 17sec (1577 seconds)

Published: Sun Jul 25 2021