WEBVTT

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

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

00:00:05.940 --> 00:00:09.420
uh, creating a responsible website using

00:00:09.420 --> 00:00:11.700
bootstrap and Dreamweaver.

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

00:00:15.420 --> 00:00:18.420
bones structure of a responsive website. In

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

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

00:00:24.779 --> 00:00:28.279
complete the contact page using PHP file.

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

00:00:31.260 --> 00:00:33.239
code files from the link I provided in

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

00:00:35.700 --> 00:00:37.860
going to use today. And if you haven't

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

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

00:00:44.100 --> 00:00:46.320
working together. Please don't forget to

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

00:00:48.660 --> 00:00:51.660
and set the alarm for my latest video.

00:00:51.660 --> 00:00:54.980
Then let's get started.

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

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

00:01:01.559 --> 00:01:03.300
created the one responsive

00:01:03.300 --> 00:01:05.760
website, uh, using the bootstrap and Dreamweaver.

00:01:05.760 --> 00:01:08.280
And in part number two, we

00:01:08.280 --> 00:01:10.380
stylized like this, with some background

00:01:10.380 --> 00:01:13.680
color, and then on the logos, and then on

00:01:13.680 --> 00:01:16.619
the different text colors, and so on. And

00:01:16.619 --> 00:01:20.000
also we made a link to each page. About,

00:01:20.000 --> 00:01:23.939
volunteer, adopt and contact, and

00:01:23.939 --> 00:01:26.520
everything's responsive. And this

00:01:26.520 --> 00:01:28.860
bootstrap, I mean the hamburger button,

00:01:28.860 --> 00:01:30.720
was working fine.

00:01:30.720 --> 00:01:33.540
It brings us wherever we are, and still

00:01:33.540 --> 00:01:36.840
the carousel is working. Okay, so we're

00:01:36.840 --> 00:01:38.280
going to

00:01:38.280 --> 00:01:41.880
open this contact dot html, in Dreamweaver, to

00:01:41.880 --> 00:01:43.860
make the, um, the contact form.

00:01:43.860 --> 00:01:48.299
So, let me open the file, uh, from my root

00:01:48.299 --> 00:01:51.200
folder. I'm going to open my contact dot html

00:01:51.200 --> 00:01:54.659
in Dreamweaver. Open with the Adobe

00:01:54.659 --> 00:01:56.460
Dreamweaver.

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

00:02:00.840 --> 00:02:03.060
this, the other three columns.

00:02:03.060 --> 00:02:05.700
Um, and then the volunteer, adopt and

00:02:05.700 --> 00:02:07.560
donate, and also I don't want to keep

00:02:07.560 --> 00:02:09.959
this coding information part. So,

00:02:09.959 --> 00:02:14.459
in my dom panel, under container, uh, the

00:02:14.459 --> 00:02:17.459
row, that's the one where I have these

00:02:17.459 --> 00:02:19.620
three columns of info, so let me just

00:02:19.620 --> 00:02:21.720
delete the whole thing.

00:02:21.720 --> 00:02:23.760
And also,

00:02:23.760 --> 00:02:26.700
I don't want to keep this accordion,

00:02:26.700 --> 00:02:28.620
so delete it.

00:02:28.620 --> 00:02:31.080
Okay, and also I just need to keep just

00:02:31.080 --> 00:02:34.739
the one VR, the, uh, the um, break line tag.

00:02:34.739 --> 00:02:39.660
Okay, so after contact us, the title, I

00:02:39.660 --> 00:02:42.120
want to have some kind of a subtitle, so

00:02:42.120 --> 00:02:44.099
please open,

00:02:44.099 --> 00:02:45.180
um,

00:02:45.180 --> 00:02:48.060
the file I provided. Please open this one

00:02:48.060 --> 00:02:51.900
first, the form HTML code dot txt. So, um,

00:02:51.900 --> 00:02:55.440
contact us today and get reply within

00:02:55.440 --> 00:02:57.239
one to two business days.

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

00:02:59.580 --> 00:03:02.519
subtitle under contact us title. So, let

00:03:02.519 --> 00:03:05.180
me copy this.

00:03:06.000 --> 00:03:09.959
Back to Dreamweaver. Make sure

00:03:09.959 --> 00:03:12.300
you're selecting the text, this center

00:03:12.300 --> 00:03:16.700
contact us, choose that tab, and then open,

00:03:16.700 --> 00:03:20.640
insert menu in HTML category.

00:03:20.640 --> 00:03:23.640
I'm gonna insert in the paragraph.

00:03:23.640 --> 00:03:28.920
Paragraph. After contact us title, after.

00:03:28.920 --> 00:03:33.140
And let me center

00:03:33.239 --> 00:03:36.239
the text, and then I'm going to just

00:03:36.239 --> 00:03:38.159
paste

00:03:38.159 --> 00:03:40.500
the text I copied.

00:03:40.500 --> 00:03:42.959
So, contact us today and get reply with

00:03:42.959 --> 00:03:45.299
the next one to two business days. Okay.

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

00:03:47.760 --> 00:03:50.099
it, I will just keep going. Okay, so after

00:03:50.099 --> 00:03:53.640
that, now I want to have, uh, uh, the form.

00:03:53.640 --> 00:03:57.260
Okay. So, please open

00:03:57.299 --> 00:04:02.099
this again, and then, please

00:04:02.099 --> 00:04:05.220
select all these lines,

00:04:05.220 --> 00:04:08.280
and copy,

00:04:08.280 --> 00:04:11.340
and back to Dreamweaver.

00:04:11.340 --> 00:04:15.599
And then, in the code area after this

00:04:15.599 --> 00:04:18.000
paragraph, uh, contact us today we just

00:04:18.000 --> 00:04:20.479
pasted.

00:04:21.479 --> 00:04:23.100
To break the line,

00:04:23.100 --> 00:04:25.680
and we're going to just paste it here.

00:04:25.680 --> 00:04:29.100
Control, click and paste it.

00:04:29.100 --> 00:04:31.320
Okay, now,

00:04:31.320 --> 00:04:33.180
we have a form,

00:04:33.180 --> 00:04:34.919
which is not pretty.

00:04:34.919 --> 00:04:39.300
Okay, now we're going to stylize it using

00:04:39.300 --> 00:04:42.240
the style dot css. Remember that , yeah in the

00:04:42.240 --> 00:04:44.820
files tab, we already created a style dot css

00:04:44.820 --> 00:04:47.820
here. Okay, so please open the file

00:04:47.820 --> 00:04:50.880
is here. Now,

00:04:50.880 --> 00:04:56.639
open this time form CSS code. This one.

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

00:05:00.060 --> 00:05:02.220
copy the whole thing. Highlight

00:05:02.220 --> 00:05:04.699
everything.

00:05:06.479 --> 00:05:10.040
Copy, oops, sorry.

00:05:10.560 --> 00:05:14.880
Copy this and back to style dot css.

00:05:14.880 --> 00:05:17.699
After the last bracket I'm gonna give

00:05:17.699 --> 00:05:19.080
some space.

00:05:19.080 --> 00:05:21.180
Hit the return key several times and let

00:05:21.180 --> 00:05:23.580
me paste it.

00:05:23.580 --> 00:05:25.139
Container.

00:05:25.139 --> 00:05:27.600
Okay. And then

00:05:27.600 --> 00:05:28.979
highlight

00:05:28.979 --> 00:05:31.440
this container,

00:05:31.440 --> 00:05:33.479
that thing,

00:05:33.479 --> 00:05:37.500
and paste, copy, this line,

00:05:37.500 --> 00:05:41.759
and then go to your contact dot html.

00:05:42.479 --> 00:05:46.139
See, it is already applied. And then, in

00:05:46.139 --> 00:05:48.979
your contact form,

00:05:50.820 --> 00:05:54.900
contact form, you see the form ID is

00:05:54.900 --> 00:05:59.280
contact, and the class. So, in this section,

00:05:59.280 --> 00:06:01.440
the class name is gonna be that

00:06:01.440 --> 00:06:05.120
container. So, let me paste it.

00:06:05.759 --> 00:06:07.620
Container.

00:06:07.620 --> 00:06:09.060
Okay.

00:06:09.060 --> 00:06:11.400
So, it looks good. It looks much better now.

00:06:11.400 --> 00:06:16.860
So, let me save my styles first.

00:06:16.860 --> 00:06:21.600
Also, let me save my contact dot html.

00:06:21.600 --> 00:06:25.100
And let me preview it.

00:06:25.919 --> 00:06:28.380
Refresh. See?

00:06:28.380 --> 00:06:31.520
I already have it.

00:06:31.620 --> 00:06:36.600
And then this is the fully responsive,

00:06:37.139 --> 00:06:39.900
which is pretty cool.

00:06:39.900 --> 00:06:44.100
Okay, and then, so the visually it is okay.

00:06:44.100 --> 00:06:48.060
But now I, we need to, uh, assign the, uh,

00:06:48.060 --> 00:06:50.039
the actual function, so we can

00:06:50.039 --> 00:06:51.720
communicate with people.

00:06:51.720 --> 00:06:54.600
So, I can email, uh, or give, uh, other people,

00:06:54.600 --> 00:06:58.560
they can email us.

00:06:58.560 --> 00:07:01.500
So, that is the PHP. But the one thing is,

00:07:01.500 --> 00:07:05.280
the PHP is the server side language.

00:07:05.280 --> 00:07:07.560
Since we weren't working on the

00:07:07.560 --> 00:07:10.500
offline things, offline status, so it's

00:07:10.500 --> 00:07:13.080
not going to be working. But, um, once we

00:07:13.080 --> 00:07:15.479
complete this instruction, this tutorial,

00:07:15.479 --> 00:07:17.400
uh, and then once you have your, the

00:07:17.400 --> 00:07:19.740
actual live server, then you can just

00:07:19.740 --> 00:07:22.199
upload everything on your server. Then it

00:07:22.199 --> 00:07:25.860
should work. So now, next step is, go back

00:07:25.860 --> 00:07:28.560
to here. We're going to create a one new

00:07:28.560 --> 00:07:29.460
file.

00:07:29.460 --> 00:07:32.039
In your files tab

00:07:32.039 --> 00:07:33.500
choose anything,

00:07:33.500 --> 00:07:36.840
volunteer dot html with a style dot css, and hold

00:07:36.840 --> 00:07:39.120
down the control or right click. Click

00:07:39.120 --> 00:07:41.099
somewhere. We're going to create a new

00:07:41.099 --> 00:07:43.919
file. This time this file's name is gonna

00:07:43.919 --> 00:07:46.020
be,

00:07:46.020 --> 00:07:48.620
contact

00:07:48.660 --> 00:07:51.780
form dot PHP.

00:07:51.780 --> 00:07:53.940
Contact form dot php.

00:07:53.940 --> 00:07:57.979
Okay, now open

00:07:59.099 --> 00:08:02.340
PHP code dot txt.

00:08:02.340 --> 00:08:05.520
Copy this whole thing.

00:08:05.520 --> 00:08:08.160
Copy, and now,

00:08:08.160 --> 00:08:10.680
back to

00:08:10.680 --> 00:08:12.900
contact.

00:08:12.900 --> 00:08:17.160
Open this contact form dot php. Open it.

00:08:17.160 --> 00:08:19.020
It will ask you,

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

00:08:21.479 --> 00:08:25.020
now, I would say no, and no.

00:08:25.020 --> 00:08:26.220
Then,

00:08:26.220 --> 00:08:28.979
select the whole thing,

00:08:28.979 --> 00:08:32.039
and paste it.

00:08:32.039 --> 00:08:36.240
The ph form we we just copied.

00:08:36.240 --> 00:08:38.700
And then now we just need to change the

00:08:38.700 --> 00:08:39.959
value here.

00:08:39.959 --> 00:08:43.800
So, first thing is, that is the last thing,

00:08:43.800 --> 00:08:46.860
the submit button. So, go to your

00:08:46.860 --> 00:08:49.019
contact dot html.

00:08:49.019 --> 00:08:52.080
Select your submit button. So buttons

00:08:52.080 --> 00:08:54.060
name is a submit.

00:08:54.060 --> 00:08:56.640
I'm going to highlight this.

00:08:56.640 --> 00:08:59.519
Let me copy.

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

00:09:01.560 --> 00:09:04.200
going to copy and paste it, and go back

00:09:04.200 --> 00:09:06.779
to our contact form dot php

00:09:06.779 --> 00:09:10.519
in the post section.

00:09:10.560 --> 00:09:12.779
Paste it.

00:09:12.779 --> 00:09:16.740
Okay, so what we're doing now is, we copy

00:09:16.740 --> 00:09:19.800
and paste the form, each form field name,

00:09:19.800 --> 00:09:23.760
to their respective sections.

00:09:23.760 --> 00:09:24.720
Okay.

00:09:24.720 --> 00:09:27.240
Though, so I will repeat the same thing.

00:09:27.240 --> 00:09:30.060
Next thing is that the, uh, the name.

00:09:30.060 --> 00:09:32.760
So, back to our contact.

00:09:32.760 --> 00:09:35.399
So, uh, name.

00:09:35.399 --> 00:09:39.120
That is this. Input name is name.

00:09:39.120 --> 00:09:42.240
So, let me copy this.

00:09:42.240 --> 00:09:44.580
And contact form.

00:09:44.580 --> 00:09:47.180
Name.

00:09:47.700 --> 00:09:49.620
Paste it.

00:09:49.620 --> 00:09:53.399
Next thing is a subject. So, um, subject

00:09:53.399 --> 00:09:56.820
input name, subject, here.

00:09:56.820 --> 00:09:59.959
That is a subject.

00:10:00.540 --> 00:10:04.459
Copy, contact form,

00:10:05.459 --> 00:10:08.580
and paste it.

00:10:08.580 --> 00:10:14.000
Next thing is the, um, made from.

00:10:15.360 --> 00:10:19.260
Your email address here, that is email,

00:10:19.260 --> 00:10:22.519
that's the input name.

00:10:22.740 --> 00:10:24.180
Copy,

00:10:24.180 --> 00:10:27.080
contact form,

00:10:27.540 --> 00:10:28.920
and

00:10:28.920 --> 00:10:30.480
paste it.

00:10:30.480 --> 00:10:32.640
Next.

00:10:32.640 --> 00:10:34.980
Message.

00:10:34.980 --> 00:10:36.839
Input name here

00:10:36.839 --> 00:10:39.800
as a message.

00:10:41.820 --> 00:10:46.040
Oops, let me highlight again.

00:10:46.320 --> 00:10:50.519
Copy and contact form dot php.

00:10:50.519 --> 00:10:54.120
Message is message.

00:10:54.120 --> 00:10:58.320
Okay, so we are getting in there. Now, mail

00:10:58.320 --> 00:10:59.820
two.

00:10:59.820 --> 00:11:03.740
That's gonna be email address.

00:11:04.260 --> 00:11:06.180
Your email address, or your business

00:11:06.180 --> 00:11:08.100
email address, or your personal email

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

00:11:11.100 --> 00:11:13.200
live server for now, I'm just going to

00:11:13.200 --> 00:11:15.959
type that kind of, uh the uh, made up, uh, the

00:11:15.959 --> 00:11:18.240
email address, New Hampshire Humane

00:11:18.240 --> 00:11:20.760
Society, uh, at

00:11:20.760 --> 00:11:24.440
let's say at gmail dot com.

00:11:25.320 --> 00:11:28.200
So, this is the, uh, you're the recipient's

00:11:28.200 --> 00:11:31.760
email address. Okay. And the next thing is,

00:11:31.760 --> 00:11:35.760
uh, scroll down, you're gonna see that, uh,

00:11:35.760 --> 00:11:39.720
location after send page.

00:11:39.720 --> 00:11:42.180
So, highlight this text right before this

00:11:42.180 --> 00:11:45.300
question mark. So, we're gonna type here

00:11:45.300 --> 00:11:49.320
the page URL to be redirected to the

00:11:49.320 --> 00:11:51.660
after submitting the form.

00:11:51.660 --> 00:11:55.019
So, in this case, since we are not in, uh,

00:11:55.019 --> 00:11:57.060
we're not in the live server, we're not

00:11:57.060 --> 00:11:59.760
online, but let's say that,

00:11:59.760 --> 00:12:00.980
um,

00:12:00.980 --> 00:12:04.140
HTTPS

00:12:04.140 --> 00:12:10.560
slash www dot, uh, New Hampshire Humane

00:12:10.560 --> 00:12:12.660
Society

00:12:12.660 --> 00:12:15.060
dot org,

00:12:15.060 --> 00:12:16.920
slash,

00:12:16.920 --> 00:12:18.360
contact,

00:12:18.360 --> 00:12:21.060
dot HTML,

00:12:21.060 --> 00:12:22.440
slash.

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

00:12:25.260 --> 00:12:27.660
hitting the submitting button, and then, um,

00:12:27.660 --> 00:12:30.839
your website will be direct, redirected

00:12:30.839 --> 00:12:32.459
to this URL.

00:12:32.459 --> 00:12:34.440
Okay. So,

00:12:34.440 --> 00:12:37.459
let me save it.

00:12:37.740 --> 00:12:39.000
And then,

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

00:12:43.200 --> 00:12:46.380
in their contact form,

00:12:46.380 --> 00:12:47.700
we

00:12:47.700 --> 00:12:50.339
made a link to on this container and

00:12:50.339 --> 00:12:54.000
class name, and then action is fill.

00:12:54.000 --> 00:12:56.100
We're going to make a link to those, that

00:12:56.100 --> 00:12:59.459
PHP file, which is a contact form dot php.

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

00:13:01.320 --> 00:13:02.880
Contact.

00:13:02.880 --> 00:13:07.800
it already, uh, shows me, form dot php.

00:13:07.800 --> 00:13:11.060
And save it.

00:13:11.519 --> 00:13:14.880
So, we are all done. So, let's

00:13:14.880 --> 00:13:16.200
view it

00:13:16.200 --> 00:13:20.279
online. Let me refresh.

00:13:20.279 --> 00:13:24.860
So, in my home page, this is my home.

00:13:25.019 --> 00:13:26.820
About us page.

00:13:26.820 --> 00:13:28.560
Volunteer.

00:13:28.560 --> 00:13:30.000
Adopt.

00:13:30.000 --> 00:13:33.180
And contact here.

00:13:33.180 --> 00:13:36.240
if I click on submit it, it asks me this,

00:13:36.240 --> 00:13:38.339
please fill out this field. So, we can

00:13:38.339 --> 00:13:39.959
just type it.

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

00:13:43.260 --> 00:13:46.019
but once you have your live server, and

00:13:46.019 --> 00:13:48.839
once you upload everything online, uh,

00:13:48.839 --> 00:13:51.540
including your style dot css and then your

00:13:51.540 --> 00:13:54.480
contact form, that PHP file together, it

00:13:54.480 --> 00:13:55.860
should work.

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

00:13:58.620 --> 00:14:01.320
you have the series of tutorials, uh, help you

00:14:01.320 --> 00:14:04.139
to build up the your the first website.

00:14:04.139 --> 00:14:07.019
And then, um, thanks for watching, and I

00:14:07.019 --> 00:14:09.860
will see you next time.