0:00:00.000,0:00:03.179
Hello everyone. First, I apologize for the

0:00:03.179,0:00:05.940
delay after part one and part number two,

0:00:05.940,0:00:09.420
uh, creating a responsible website using

0:00:09.420,0:00:11.700
bootstrap and Dreamweaver.

0:00:11.700,0:00:15.420
In part number one, we created a bare

0:00:15.420,0:00:18.420
bones structure of a responsive website. In

0:00:18.420,0:00:22.500
part number two, we stylized using CSS. In

0:00:22.500,0:00:24.779
part number three today, we're going to

0:00:24.779,0:00:28.279
complete the contact page using PHP file.

0:00:28.279,0:00:31.260
So, uh, please download the other source

0:00:31.260,0:00:33.239
code files from the link I provided in

0:00:33.239,0:00:35.700
my description, so those are code we're

0:00:35.700,0:00:37.860
going to use today. And if you haven't

0:00:37.860,0:00:40.620
watched my first two videos, please watch

0:00:40.620,0:00:44.100
them first, uh, and so we can, uh, just keep

0:00:44.100,0:00:46.320
working together. Please don't forget to

0:00:46.320,0:00:48.660
subscribe my channel, hit the like button,

0:00:48.660,0:00:51.660
and set the alarm for my latest video.

0:00:51.660,0:00:54.980
Then let's get started.

0:00:55.920,0:00:58.800
Okay, so this is where we stopped in part

0:00:58.800,0:01:01.559
number two. Uh, in part number one, we

0:01:01.559,0:01:03.300
created the one responsive

0:01:03.300,0:01:05.760
website, uh, using the bootstrap and Dreamweaver.

0:01:05.760,0:01:08.280
And in part number two, we

0:01:08.280,0:01:10.380
stylized like this, with some background

0:01:10.380,0:01:13.680
color, and then on the logos, and then on

0:01:13.680,0:01:16.619
the different text colors, and so on. And

0:01:16.619,0:01:20.000
also we made a link to each page. About,

0:01:20.000,0:01:23.939
volunteer, adopt and contact, and

0:01:23.939,0:01:26.520
everything's responsive. And this

0:01:26.520,0:01:28.860
bootstrap, I mean the hamburger button,

0:01:28.860,0:01:30.720
was working fine.

0:01:30.720,0:01:33.540
It brings us wherever we are, and still

0:01:33.540,0:01:36.840
the carousel is working. Okay, so we're

0:01:36.840,0:01:38.280
going to

0:01:38.280,0:01:41.880
open this contact dot html, in Dreamweaver, to

0:01:41.880,0:01:43.860
make the, um, the contact form.

0:01:43.860,0:01:48.299
So, let me open the file, uh, from my root

0:01:48.299,0:01:51.200
folder. I'm going to open my contact dot html

0:01:51.200,0:01:54.659
in Dreamweaver. Open with the Adobe

0:01:54.659,0:01:56.460
Dreamweaver.

0:01:56.460,0:02:00.840
Okay, so first, I don't want to keep, uh,

0:02:00.840,0:02:03.060
this, the other three columns.

0:02:03.060,0:02:05.700
Um, and then the volunteer, adopt and

0:02:05.700,0:02:07.560
donate, and also I don't want to keep

0:02:07.560,0:02:09.959
this coding information part. So,

0:02:09.959,0:02:14.459
in my dom panel, under container, uh, the

0:02:14.459,0:02:17.459
row, that's the one where I have these

0:02:17.459,0:02:19.620
three columns of info, so let me just

0:02:19.620,0:02:21.720
delete the whole thing.

0:02:21.720,0:02:23.760
And also,

0:02:23.760,0:02:26.700
I don't want to keep this accordion,

0:02:26.700,0:02:28.620
so delete it.

0:02:28.620,0:02:31.080
Okay, and also I just need to keep just

0:02:31.080,0:02:34.739
the one VR, the, uh, the um, break line tag.

0:02:34.739,0:02:39.660
Okay, so after contact us, the title, I

0:02:39.660,0:02:42.120
want to have some kind of a subtitle, so

0:02:42.120,0:02:44.099
please open,

0:02:44.099,0:02:45.180
um,

0:02:45.180,0:02:48.060
the file I provided. Please open this one

0:02:48.060,0:02:51.900
first, the form HTML code dot txt. So, um,

0:02:51.900,0:02:55.440
contact us today and get reply within

0:02:55.440,0:02:57.239
one to two business days.

0:02:57.239,0:02:59.580
So, we're gonna have that as a kind of

0:02:59.580,0:03:02.519
subtitle under contact us title. So, let

0:03:02.519,0:03:05.180
me copy this.

0:03:06.000,0:03:09.959
Back to Dreamweaver. Make sure

0:03:09.959,0:03:12.300
you're selecting the text, this center

0:03:12.300,0:03:16.700
contact us, choose that tab, and then open,

0:03:16.700,0:03:20.640
insert menu in HTML category.

0:03:20.640,0:03:23.640
I'm gonna insert in the paragraph.

0:03:23.640,0:03:28.920
Paragraph. After contact us title, after.

0:03:28.920,0:03:33.140
And let me center

0:03:33.239,0:03:36.239
the text, and then I'm going to just

0:03:36.239,0:03:38.159
paste

0:03:38.159,0:03:40.500
the text I copied.

0:03:40.500,0:03:42.959
So, contact us today and get reply with

0:03:42.959,0:03:45.299
the next one to two business days. Okay.

0:03:45.299,0:03:47.760
Let me save it. No, I don't want to save

0:03:47.760,0:03:50.099
it, I will just keep going. Okay, so after

0:03:50.099,0:03:53.640
that, now I want to have, uh, uh, the form.

0:03:53.640,0:03:57.260
Okay. So, please open

0:03:57.299,0:04:02.099
this again, and then, please

0:04:02.099,0:04:05.220
select all these lines,

0:04:05.220,0:04:08.280
and copy,

0:04:08.280,0:04:11.340
and back to Dreamweaver.

0:04:11.340,0:04:15.599
And then, in the code area after this

0:04:15.599,0:04:18.000
paragraph, uh, contact us today we just

0:04:18.000,0:04:20.479
pasted.

0:04:21.479,0:04:23.100
To break the line,

0:04:23.100,0:04:25.680
and we're going to just paste it here.

0:04:25.680,0:04:29.100
Control, click and paste it.

0:04:29.100,0:04:31.320
Okay, now,

0:04:31.320,0:04:33.180
we have a form,

0:04:33.180,0:04:34.919
which is not pretty.

0:04:34.919,0:04:39.300
Okay, now we're going to stylize it using

0:04:39.300,0:04:42.240
the style dot css. Remember that , yeah in the

0:04:42.240,0:04:44.820
files tab, we already created a style dot css

0:04:44.820,0:04:47.820
here. Okay, so please open the file

0:04:47.820,0:04:50.880
is here. Now,

0:04:50.880,0:04:56.639
open this time form CSS code. This one.

0:04:56.639,0:05:00.060
Then, from the very top line, I'm gonna

0:05:00.060,0:05:02.220
copy the whole thing. Highlight

0:05:02.220,0:05:04.699
everything.

0:05:06.479,0:05:10.040
Copy, oops, sorry.

0:05:10.560,0:05:14.880
Copy this and back to style dot css.

0:05:14.880,0:05:17.699
After the last bracket I'm gonna give

0:05:17.699,0:05:19.080
some space.

0:05:19.080,0:05:21.180
Hit the return key several times and let

0:05:21.180,0:05:23.580
me paste it.

0:05:23.580,0:05:25.139
Container.

0:05:25.139,0:05:27.600
Okay. And then

0:05:27.600,0:05:28.979
highlight

0:05:28.979,0:05:31.440
this container,

0:05:31.440,0:05:33.479
that thing,

0:05:33.479,0:05:37.500
and paste, copy, this line,

0:05:37.500,0:05:41.759
and then go to your contact dot html.

0:05:42.479,0:05:46.139
See, it is already applied. And then, in

0:05:46.139,0:05:48.979
your contact form,

0:05:50.820,0:05:54.900
contact form, you see the form ID is

0:05:54.900,0:05:59.280
contact, and the class. So, in this section,

0:05:59.280,0:06:01.440
the class name is gonna be that

0:06:01.440,0:06:05.120
container. So, let me paste it.

0:06:05.759,0:06:07.620
Container.

0:06:07.620,0:06:09.060
Okay.

0:06:09.060,0:06:11.400
So, it looks good. It looks much better now.

0:06:11.400,0:06:16.860
So, let me save my styles first.

0:06:16.860,0:06:21.600
Also, let me save my contact dot html.

0:06:21.600,0:06:25.100
And let me preview it.

0:06:25.919,0:06:28.380
Refresh. See?

0:06:28.380,0:06:31.520
I already have it.

0:06:31.620,0:06:36.600
And then this is the fully responsive,

0:06:37.139,0:06:39.900
which is pretty cool.

0:06:39.900,0:06:44.100
Okay, and then, so the visually it is okay.

0:06:44.100,0:06:48.060
But now I, we need to, uh, assign the, uh,

0:06:48.060,0:06:50.039
the actual function, so we can

0:06:50.039,0:06:51.720
communicate with people.

0:06:51.720,0:06:54.600
So, I can email, uh, or give, uh, other people,

0:06:54.600,0:06:58.560
they can email us.

0:06:58.560,0:07:01.500
So, that is the PHP. But the one thing is,

0:07:01.500,0:07:05.280
the PHP is the server side language.

0:07:05.280,0:07:07.560
Since we weren't working on the

0:07:07.560,0:07:10.500
offline things, offline status, so it's

0:07:10.500,0:07:13.080
not going to be working. But, um, once we

0:07:13.080,0:07:15.479
complete this instruction, this tutorial,

0:07:15.479,0:07:17.400
uh, and then once you have your, the

0:07:17.400,0:07:19.740
actual live server, then you can just

0:07:19.740,0:07:22.199
upload everything on your server. Then it

0:07:22.199,0:07:25.860
should work. So now, next step is, go back

0:07:25.860,0:07:28.560
to here. We're going to create a one new

0:07:28.560,0:07:29.460
file.

0:07:29.460,0:07:32.039
In your files tab

0:07:32.039,0:07:33.500
choose anything,

0:07:33.500,0:07:36.840
volunteer dot html with a style dot css, and hold

0:07:36.840,0:07:39.120
down the control or right click. Click

0:07:39.120,0:07:41.099
somewhere. We're going to create a new

0:07:41.099,0:07:43.919
file. This time this file's name is gonna

0:07:43.919,0:07:46.020
be,

0:07:46.020,0:07:48.620
contact

0:07:48.660,0:07:51.780
form dot PHP.

0:07:51.780,0:07:53.940
Contact form dot php.

0:07:53.940,0:07:57.979
Okay, now open

0:07:59.099,0:08:02.340
PHP code dot txt.

0:08:02.340,0:08:05.520
Copy this whole thing.

0:08:05.520,0:08:08.160
Copy, and now,

0:08:08.160,0:08:10.680
back to

0:08:10.680,0:08:12.900
contact.

0:08:12.900,0:08:17.160
Open this contact form dot php. Open it.

0:08:17.160,0:08:19.020
It will ask you,

0:08:19.020,0:08:21.479
uh, since we don't have a live server for

0:08:21.479,0:08:25.020
now, I would say no, and no.

0:08:25.020,0:08:26.220
Then,

0:08:26.220,0:08:28.979
select the whole thing,

0:08:28.979,0:08:32.039
and paste it.

0:08:32.039,0:08:36.240
The ph form we we just copied.

0:08:36.240,0:08:38.700
And then now we just need to change the

0:08:38.700,0:08:39.959
value here.

0:08:39.959,0:08:43.800
So, first thing is, that is the last thing,

0:08:43.800,0:08:46.860
the submit button. So, go to your

0:08:46.860,0:08:49.019
contact dot html.

0:08:49.019,0:08:52.080
Select your submit button. So buttons

0:08:52.080,0:08:54.060
name is a submit.

0:08:54.060,0:08:56.640
I'm going to highlight this.

0:08:56.640,0:08:59.519
Let me copy.

0:08:59.519,0:09:01.560
I can type people, just to make sure I'm

0:09:01.560,0:09:04.200
going to copy and paste it, and go back

0:09:04.200,0:09:06.779
to our contact form dot php

0:09:06.779,0:09:10.519
in the post section.

0:09:10.560,0:09:12.779
Paste it.

0:09:12.779,0:09:16.740
Okay, so what we're doing now is, we copy

0:09:16.740,0:09:19.800
and paste the form, each form field name,

0:09:19.800,0:09:23.760
to their respective sections.

0:09:23.760,0:09:24.720
Okay.

0:09:24.720,0:09:27.240
Though, so I will repeat the same thing.

0:09:27.240,0:09:30.060
Next thing is that the, uh, the name.

0:09:30.060,0:09:32.760
So, back to our contact.

0:09:32.760,0:09:35.399
So, uh, name.

0:09:35.399,0:09:39.120
That is this. Input name is name.

0:09:39.120,0:09:42.240
So, let me copy this.

0:09:42.240,0:09:44.580
And contact form.

0:09:44.580,0:09:47.180
Name.

0:09:47.700,0:09:49.620
Paste it.

0:09:49.620,0:09:53.399
Next thing is a subject. So, um, subject

0:09:53.399,0:09:56.820
input name, subject, here.

0:09:56.820,0:09:59.959
That is a subject.

0:10:00.540,0:10:04.459
Copy, contact form,

0:10:05.459,0:10:08.580
and paste it.

0:10:08.580,0:10:14.000
Next thing is the, um, made from.

0:10:15.360,0:10:19.260
Your email address here, that is email,

0:10:19.260,0:10:22.519
that's the input name.

0:10:22.740,0:10:24.180
Copy,

0:10:24.180,0:10:27.080
contact form,

0:10:27.540,0:10:28.920
and

0:10:28.920,0:10:30.480
paste it.

0:10:30.480,0:10:32.640
Next.

0:10:32.640,0:10:34.980
Message.

0:10:34.980,0:10:36.839
Input name here

0:10:36.839,0:10:39.800
as a message.

0:10:41.820,0:10:46.040
Oops, let me highlight again.

0:10:46.320,0:10:50.519
Copy and contact form dot php.

0:10:50.519,0:10:54.120
Message is message.

0:10:54.120,0:10:58.320
Okay, so we are getting in there. Now, mail

0:10:58.320,0:10:59.820
two.

0:10:59.820,0:11:03.740
That's gonna be email address.

0:11:04.260,0:11:06.180
Your email address, or your business

0:11:06.180,0:11:08.100
email address, or your personal email

0:11:08.100,0:11:11.100
address. So, since we're, uh, we don't have a

0:11:11.100,0:11:13.200
live server for now, I'm just going to

0:11:13.200,0:11:15.959
type that kind of, uh the uh, made up, uh, the

0:11:15.959,0:11:18.240
email address, New Hampshire Humane

0:11:18.240,0:11:20.760
Society, uh, at

0:11:20.760,0:11:24.440
let's say at gmail dot com.

0:11:25.320,0:11:28.200
So, this is the, uh, you're the recipient's

0:11:28.200,0:11:31.760
email address. Okay. And the next thing is,

0:11:31.760,0:11:35.760
uh, scroll down, you're gonna see that, uh,

0:11:35.760,0:11:39.720
location after send page.

0:11:39.720,0:11:42.180
So, highlight this text right before this

0:11:42.180,0:11:45.300
question mark. So, we're gonna type here

0:11:45.300,0:11:49.320
the page URL to be redirected to the

0:11:49.320,0:11:51.660
after submitting the form.

0:11:51.660,0:11:55.019
So, in this case, since we are not in, uh,

0:11:55.019,0:11:57.060
we're not in the live server, we're not

0:11:57.060,0:11:59.760
online, but let's say that,

0:11:59.760,0:12:00.980
um,

0:12:00.980,0:12:04.140
HTTPS

0:12:04.140,0:12:10.560
slash www dot, uh, New Hampshire Humane

0:12:10.560,0:12:12.660
Society

0:12:12.660,0:12:15.060
dot org,

0:12:15.060,0:12:16.920
slash,

0:12:16.920,0:12:18.360
contact,

0:12:18.360,0:12:21.060
dot HTML,

0:12:21.060,0:12:22.440
slash.

0:12:22.440,0:12:25.260
So, that's going to be the URL. So, after

0:12:25.260,0:12:27.660
hitting the submitting button, and then, um,

0:12:27.660,0:12:30.839
your website will be direct, redirected

0:12:30.839,0:12:32.459
to this URL.

0:12:32.459,0:12:34.440
Okay. So,

0:12:34.440,0:12:37.459
let me save it.

0:12:37.740,0:12:39.000
And then,

0:12:39.000,0:12:43.200
let me go back to a contact dot html. So, uh,

0:12:43.200,0:12:46.380
in their contact form,

0:12:46.380,0:12:47.700
we

0:12:47.700,0:12:50.339
made a link to on this container and

0:12:50.339,0:12:54.000
class name, and then action is fill.

0:12:54.000,0:12:56.100
We're going to make a link to those, that

0:12:56.100,0:12:59.459
PHP file, which is a contact form dot php.

0:12:59.459,0:13:01.320
So, I'm going to just type it.

0:13:01.320,0:13:02.880
Contact.

0:13:02.880,0:13:07.800
it already, uh, shows me, form dot php.

0:13:07.800,0:13:11.060
And save it.

0:13:11.519,0:13:14.880
So, we are all done. So, let's

0:13:14.880,0:13:16.200
view it

0:13:16.200,0:13:20.279
online. Let me refresh.

0:13:20.279,0:13:24.860
So, in my home page, this is my home.

0:13:25.019,0:13:26.820
About us page.

0:13:26.820,0:13:28.560
Volunteer.

0:13:28.560,0:13:30.000
Adopt.

0:13:30.000,0:13:33.180
And contact here.

0:13:33.180,0:13:36.240
if I click on submit it, it asks me this,

0:13:36.240,0:13:38.339
please fill out this field. So, we can

0:13:38.339,0:13:39.959
just type it.

0:13:39.959,0:13:43.260
Okay. So, again, for now it's not working,

0:13:43.260,0:13:46.019
but once you have your live server, and

0:13:46.019,0:13:48.839
once you upload everything online, uh,

0:13:48.839,0:13:51.540
including your style dot css and then your

0:13:51.540,0:13:54.480
contact form, that PHP file together, it

0:13:54.480,0:13:55.860
should work.

0:13:55.860,0:13:58.620
So, that's it. So, I hope you have this,

0:13:58.620,0:14:01.320
you have the series of tutorials, uh, help you

0:14:01.320,0:14:04.139
to build up the your the first website.

0:14:04.139,0:14:07.019
And then, um, thanks for watching, and I

0:14:07.019,0:14:09.860
will see you next time.