0:00
Today in this tutorial I will show you how you can create a fully working contact form using HTML CSS and PHB
0:14
So here we have a demo contact form. Let's fill this form
0:18
I will write a name, any email ID here. This is wrong
0:25
And I will write any message. Now we'll click on the send button
0:38
So here you can see on my email address I have received the inquiry like username, email and
0:47
message, okay? So this is very easy to create this form. So let's begin creating this contact form
0:59
First of all, open any text editor. Here I am using a blackettor, okay
1:13
So I will write some basic HTML codes. And here I will add title
1:29
design I will write some message on this page
1:46
So I will create a class and I will write a message in H1 tag
1:59
Okay, now we'll save this file as index dot HTML I will save it in my folder here okay index dot HTML done now let's see
2:44
this page I will open with Chrome so here you can see the message now we'll create a
2:55
new file and this will be our CSS file file Text alignment
3:33
and I will add a background image here Here we have an image pic 1.jpgg so I will write the complete file name
4:27
Background position font family
4:43
and I will save this file as style. Style.c.s. in the same folder
4:55
Now I will link this CSS file to HTML file
5:14
Write this code to link your CSS file to HTML file. Save this file and now let's check your webpage okay there is something wrong in the background okay
5:39
here now I will save this file and now I will save this file and now refresh now you can see the
5:51
ground image also now we'll write codes for the title I'll add a margin in the top
6:10
text color text transform
6:21
transition and save so now you can see the white color text here
6:37
now we write code for h1 tag
7:21
done now come back to your HTML page and here we will add a form I will give a form
7:45
method post action and here I will link the pH file that I will do later
8:01
first I will create the input fields This will be the name, name field, your name and this is required field, okay
8:29
Now copy this one. And paste
8:42
Now I'll change it to email. So this will be the email field
8:53
The placeholder will be your email and this is also required. After that there will be a text area where a user can enter their message Okay Now we create a send button here
9:31
Okay, done. Now save this file and check your web page
10:01
So now you can see a form here but I will write some CSS code for this one
10:25
I will add margin transition. Now we'll write CSS code for form control
10:41
I will set the width of input fields and background. Border, outline
10:56
border bottom that will be one pixel solid gray color it will be white
11:10
and font size margin bottom okay save this file and check the web page you can
11:26
the background is transparent of the form. I will set the height of the input field and I will write code for the submit button
11:49
So this will be the color of the submit button. and border color transparent color white and font size 20 pixel
12:09
weight later spacing and height then margin top okay I will save this
12:24
file and now you can see a button also okay now I will add a hover effect on this button
12:54
Now you can see the change in the color okay when you will take cursor
13:05
So save this file and I will open a new file and here I will create the PHP code
13:24
Save this file as dot php so I will name it as contact form handler
13:39
Ph okay Now I will write some code for name so this will store the name
13:56
so this will store the name of your users and visitor email
14:10
This will store the email ID of your visitors
14:20
And message, this will store the message. Now I will write email from okay here you can use your own email address from where you want to send the email
14:57
and here you write the email and here you write the email subject and here you write the email subject
15:10
So I will write new form submission and email body
15:30
So this will be sent on your email. first line will be name then user email then user message then user message
16:08
Now I will write two and this will be your email address where you want to receive the inquiries. Okay
16:29
Now write headers. from and here it will be email from and again
16:43
it will be email from and again headers reply to
17:03
Now here you write mail and to this will send the email on your email address
17:15
with email subject and email body and headers
17:24
And here I will write this page name this page name, index, index
17:33
dot HTML and here you write the php page name that is contact form handler
17:46
php in your form okay so like this it will send the information to your php page
17:54
and php page will send the email But this code will not work on your computer because your computer cannot run the
18:10
pHP code. So you need to upload this complete code on your server
18:16
Then it will work. Okay, thanks for watching this tutorial
