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 dreamyver

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

00:00:15.420 --> 00:00:18.420
bone structure of 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 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 other one responsible

00:01:03.300 --> 00:01:05.760
website uh using the Boost Tribune

00:01:05.760 --> 00:01:08.280
remover 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.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.html

00:01:51.200 --> 00:01:54.659
and remover con open with the Adobe

00:01:54.659 --> 00:01:56.460
remover

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 recording the 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.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 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 dreamiver

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.css remember that yeah in the

00:04:42.240 --> 00:04:44.820
files tab we already created a style.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.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.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 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.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 there were the other

00:06:54.600 --> 00:06:58.560
uh other people 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 they weren't working on their kind

00:07:07.560 --> 00:07:10.500
of 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
completed 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 that 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.html with a style.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.php

00:07:53.940 --> 00:07:57.979
okay now open

00:07:59.099 --> 00:08:02.340
PHP code.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.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 reform 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.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.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.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 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 made up of the

00:11:15.959 --> 00:11:18.240
email address New Hampshire Human

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

00:11:20.760 --> 00:11:24.440
let's say gmail.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
HTTP s

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

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

00:12:12.660 --> 00:12:15.060
.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
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

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.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
are PHP file which is a contact form.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 also already assures me form.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 my 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.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
here 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