1
00:00:00,000 --> 00:00:03,179
Hello everyone. First, I apologize for the

2
00:00:03,179 --> 00:00:05,940
delay after part one and part number two,

3
00:00:05,940 --> 00:00:09,420
uh, creating a responsible website using

4
00:00:09,420 --> 00:00:11,700
bootstrap and Dreamweaver.

5
00:00:11,700 --> 00:00:15,420
In part number one, we created a bare

6
00:00:15,420 --> 00:00:18,420
bones structure of a responsive website. In

7
00:00:18,420 --> 00:00:22,500
part number two, we stylized using CSS. In

8
00:00:22,500 --> 00:00:24,779
part number three today, we're going to

9
00:00:24,779 --> 00:00:28,279
complete the contact page using PHP file.

10
00:00:28,279 --> 00:00:31,260
So, uh, please download the other source

11
00:00:31,260 --> 00:00:33,239
code files from the link I provided in

12
00:00:33,239 --> 00:00:35,700
my description, so those are code we're

13
00:00:35,700 --> 00:00:37,860
going to use today. And if you haven't

14
00:00:37,860 --> 00:00:40,620
watched my first two videos, please watch

15
00:00:40,620 --> 00:00:44,100
them first, uh, and so we can, uh, just keep

16
00:00:44,100 --> 00:00:46,320
working together. Please don't forget to

17
00:00:46,320 --> 00:00:48,660
subscribe my channel, hit the like button,

18
00:00:48,660 --> 00:00:51,660
and set the alarm for my latest video.

19
00:00:51,660 --> 00:00:54,980
Then let's get started.

20
00:00:55,920 --> 00:00:58,800
Okay, so this is where we stopped in part

21
00:00:58,800 --> 00:01:01,559
number two. Uh, in part number one, we

22
00:01:01,559 --> 00:01:03,300
created the one responsive

23
00:01:03,300 --> 00:01:05,760
website, uh, using the bootstrap and Dreamweaver.

24
00:01:05,760 --> 00:01:08,280
And in part number two, we

25
00:01:08,280 --> 00:01:10,380
stylized like this, with some background

26
00:01:10,380 --> 00:01:13,680
color, and then on the logos, and then on

27
00:01:13,680 --> 00:01:16,619
the different text colors, and so on. And

28
00:01:16,619 --> 00:01:20,000
also we made a link to each page. About,

29
00:01:20,000 --> 00:01:23,939
volunteer, adopt and contact, and

30
00:01:23,939 --> 00:01:26,520
everything's responsive. And this

31
00:01:26,520 --> 00:01:28,860
bootstrap, I mean the hamburger button,

32
00:01:28,860 --> 00:01:30,720
was working fine.

33
00:01:30,720 --> 00:01:33,540
It brings us wherever we are, and still

34
00:01:33,540 --> 00:01:36,840
the carousel is working. Okay, so we're

35
00:01:36,840 --> 00:01:38,280
going to

36
00:01:38,280 --> 00:01:41,880
open this contact dot html, in Dreamweaver, to

37
00:01:41,880 --> 00:01:43,860
make the, um, the contact form.

38
00:01:43,860 --> 00:01:48,299
So, let me open the file, uh, from my root

39
00:01:48,299 --> 00:01:51,200
folder. I'm going to open my contact dot html

40
00:01:51,200 --> 00:01:54,659
in Dreamweaver. Open with the Adobe

41
00:01:54,659 --> 00:01:56,460
Dreamweaver.

42
00:01:56,460 --> 00:02:00,840
Okay, so first, I don't want to keep, uh,

43
00:02:00,840 --> 00:02:03,060
this, the other three columns.

44
00:02:03,060 --> 00:02:05,700
Um, and then the volunteer, adopt and

45
00:02:05,700 --> 00:02:07,560
donate, and also I don't want to keep

46
00:02:07,560 --> 00:02:09,959
this coding information part. So,

47
00:02:09,959 --> 00:02:14,459
in my dom panel, under container, uh, the

48
00:02:14,459 --> 00:02:17,459
row, that's the one where I have these

49
00:02:17,459 --> 00:02:19,620
three columns of info, so let me just

50
00:02:19,620 --> 00:02:21,720
delete the whole thing.

51
00:02:21,720 --> 00:02:23,760
And also,

52
00:02:23,760 --> 00:02:26,700
I don't want to keep this accordion,

53
00:02:26,700 --> 00:02:28,620
so delete it.

54
00:02:28,620 --> 00:02:31,080
Okay, and also I just need to keep just

55
00:02:31,080 --> 00:02:34,739
the one VR, the, uh, the um, break line tag.

56
00:02:34,739 --> 00:02:39,660
Okay, so after contact us, the title, I

57
00:02:39,660 --> 00:02:42,120
want to have some kind of a subtitle, so

58
00:02:42,120 --> 00:02:44,099
please open,

59
00:02:44,099 --> 00:02:45,180
um,

60
00:02:45,180 --> 00:02:48,060
the file I provided. Please open this one

61
00:02:48,060 --> 00:02:51,900
first, the form HTML code dot txt. So, um,

62
00:02:51,900 --> 00:02:55,440
contact us today and get reply within

63
00:02:55,440 --> 00:02:57,239
one to two business days.

64
00:02:57,239 --> 00:02:59,580
So, we're gonna have that as a kind of

65
00:02:59,580 --> 00:03:02,519
subtitle under contact us title. So, let

66
00:03:02,519 --> 00:03:05,180
me copy this.

67
00:03:06,000 --> 00:03:09,959
Back to Dreamweaver. Make sure

68
00:03:09,959 --> 00:03:12,300
you're selecting the text, this center

69
00:03:12,300 --> 00:03:16,700
contact us, choose that tab, and then open,

70
00:03:16,700 --> 00:03:20,640
insert menu in HTML category.

71
00:03:20,640 --> 00:03:23,640
I'm gonna insert in the paragraph.

72
00:03:23,640 --> 00:03:28,920
Paragraph. After contact us title, after.

73
00:03:28,920 --> 00:03:33,140
And let me center

74
00:03:33,239 --> 00:03:36,239
the text, and then I'm going to just

75
00:03:36,239 --> 00:03:38,159
paste

76
00:03:38,159 --> 00:03:40,500
the text I copied.

77
00:03:40,500 --> 00:03:42,959
So, contact us today and get reply with

78
00:03:42,959 --> 00:03:45,299
the next one to two business days. Okay.

79
00:03:45,299 --> 00:03:47,760
Let me save it. No, I don't want to save

80
00:03:47,760 --> 00:03:50,099
it, I will just keep going. Okay, so after

81
00:03:50,099 --> 00:03:53,640
that, now I want to have, uh, uh, the form.

82
00:03:53,640 --> 00:03:57,260
Okay. So, please open

83
00:03:57,299 --> 00:04:02,099
this again, and then, please

84
00:04:02,099 --> 00:04:05,220
select all these lines,

85
00:04:05,220 --> 00:04:08,280
and copy,

86
00:04:08,280 --> 00:04:11,340
and back to Dreamweaver.

87
00:04:11,340 --> 00:04:15,599
And then, in the code area after this

88
00:04:15,599 --> 00:04:18,000
paragraph, uh, contact us today we just

89
00:04:18,000 --> 00:04:20,479
pasted.

90
00:04:21,479 --> 00:04:23,100
To break the line,

91
00:04:23,100 --> 00:04:25,680
and we're going to just paste it here.

92
00:04:25,680 --> 00:04:29,100
Control, click and paste it.

93
00:04:29,100 --> 00:04:31,320
Okay, now,

94
00:04:31,320 --> 00:04:33,180
we have a form,

95
00:04:33,180 --> 00:04:34,919
which is not pretty.

96
00:04:34,919 --> 00:04:39,300
Okay, now we're going to stylize it using

97
00:04:39,300 --> 00:04:42,240
the style dot css. Remember that , yeah in the

98
00:04:42,240 --> 00:04:44,820
files tab, we already created a style dot css

99
00:04:44,820 --> 00:04:47,820
here. Okay, so please open the file

100
00:04:47,820 --> 00:04:50,880
is here. Now,

101
00:04:50,880 --> 00:04:56,639
open this time form CSS code. This one.

102
00:04:56,639 --> 00:05:00,060
Then, from the very top line, I'm gonna

103
00:05:00,060 --> 00:05:02,220
copy the whole thing. Highlight

104
00:05:02,220 --> 00:05:04,699
everything.

105
00:05:06,479 --> 00:05:10,040
Copy, oops, sorry.

106
00:05:10,560 --> 00:05:14,880
Copy this and back to style dot css.

107
00:05:14,880 --> 00:05:17,699
After the last bracket I'm gonna give

108
00:05:17,699 --> 00:05:19,080
some space.

109
00:05:19,080 --> 00:05:21,180
Hit the return key several times and let

110
00:05:21,180 --> 00:05:23,580
me paste it.

111
00:05:23,580 --> 00:05:25,139
Container.

112
00:05:25,139 --> 00:05:27,600
Okay. And then

113
00:05:27,600 --> 00:05:28,979
highlight

114
00:05:28,979 --> 00:05:31,440
this container,

115
00:05:31,440 --> 00:05:33,479
that thing,

116
00:05:33,479 --> 00:05:37,500
and paste, copy, this line,

117
00:05:37,500 --> 00:05:41,759
and then go to your contact dot html.

118
00:05:42,479 --> 00:05:46,139
See, it is already applied. And then, in

119
00:05:46,139 --> 00:05:48,979
your contact form,

120
00:05:50,820 --> 00:05:54,900
contact form, you see the form ID is

121
00:05:54,900 --> 00:05:59,280
contact, and the class. So, in this section,

122
00:05:59,280 --> 00:06:01,440
the class name is gonna be that

123
00:06:01,440 --> 00:06:05,120
container. So, let me paste it.

124
00:06:05,759 --> 00:06:07,620
Container.

125
00:06:07,620 --> 00:06:09,060
Okay.

126
00:06:09,060 --> 00:06:11,400
So, it looks good. It looks much better now.

127
00:06:11,400 --> 00:06:16,860
So, let me save my styles first.

128
00:06:16,860 --> 00:06:21,600
Also, let me save my contact dot html.

129
00:06:21,600 --> 00:06:25,100
And let me preview it.

130
00:06:25,919 --> 00:06:28,380
Refresh. See?

131
00:06:28,380 --> 00:06:31,520
I already have it.

132
00:06:31,620 --> 00:06:36,600
And then this is the fully responsive,

133
00:06:37,139 --> 00:06:39,900
which is pretty cool.

134
00:06:39,900 --> 00:06:44,100
Okay, and then, so the visually it is okay.

135
00:06:44,100 --> 00:06:48,060
But now I, we need to, uh, assign the, uh,

136
00:06:48,060 --> 00:06:50,039
the actual function, so we can

137
00:06:50,039 --> 00:06:51,720
communicate with people.

138
00:06:51,720 --> 00:06:54,600
So, I can email, uh, or give, uh, other people,

139
00:06:54,600 --> 00:06:58,560
they can email us.

140
00:06:58,560 --> 00:07:01,500
So, that is the PHP. But the one thing is,

141
00:07:01,500 --> 00:07:05,280
the PHP is the server side language.

142
00:07:05,280 --> 00:07:07,560
Since we weren't working on the

143
00:07:07,560 --> 00:07:10,500
offline things, offline status, so it's

144
00:07:10,500 --> 00:07:13,080
not going to be working. But, um, once we

145
00:07:13,080 --> 00:07:15,479
complete this instruction, this tutorial,

146
00:07:15,479 --> 00:07:17,400
uh, and then once you have your, the

147
00:07:17,400 --> 00:07:19,740
actual live server, then you can just

148
00:07:19,740 --> 00:07:22,199
upload everything on your server. Then it

149
00:07:22,199 --> 00:07:25,860
should work. So now, next step is, go back

150
00:07:25,860 --> 00:07:28,560
to here. We're going to create a one new

151
00:07:28,560 --> 00:07:29,460
file.

152
00:07:29,460 --> 00:07:32,039
In your files tab

153
00:07:32,039 --> 00:07:33,500
choose anything,

154
00:07:33,500 --> 00:07:36,840
volunteer dot html with a style dot css, and hold

155
00:07:36,840 --> 00:07:39,120
down the control or right click. Click

156
00:07:39,120 --> 00:07:41,099
somewhere. We're going to create a new

157
00:07:41,099 --> 00:07:43,919
file. This time this file's name is gonna

158
00:07:43,919 --> 00:07:46,020
be,

159
00:07:46,020 --> 00:07:48,620
contact

160
00:07:48,660 --> 00:07:51,780
form dot PHP.

161
00:07:51,780 --> 00:07:53,940
Contact form dot php.

162
00:07:53,940 --> 00:07:57,979
Okay, now open

163
00:07:59,099 --> 00:08:02,340
PHP code dot txt.

164
00:08:02,340 --> 00:08:05,520
Copy this whole thing.

165
00:08:05,520 --> 00:08:08,160
Copy, and now,

166
00:08:08,160 --> 00:08:10,680
back to

167
00:08:10,680 --> 00:08:12,900
contact.

168
00:08:12,900 --> 00:08:17,160
Open this contact form dot php. Open it.

169
00:08:17,160 --> 00:08:19,020
It will ask you,

170
00:08:19,020 --> 00:08:21,479
uh, since we don't have a live server for

171
00:08:21,479 --> 00:08:25,020
now, I would say no, and no.

172
00:08:25,020 --> 00:08:26,220
Then,

173
00:08:26,220 --> 00:08:28,979
select the whole thing,

174
00:08:28,979 --> 00:08:32,039
and paste it.

175
00:08:32,039 --> 00:08:36,240
The ph form we we just copied.

176
00:08:36,240 --> 00:08:38,700
And then now we just need to change the

177
00:08:38,700 --> 00:08:39,959
value here.

178
00:08:39,959 --> 00:08:43,800
So, first thing is, that is the last thing,

179
00:08:43,800 --> 00:08:46,860
the submit button. So, go to your

180
00:08:46,860 --> 00:08:49,019
contact dot html.

181
00:08:49,019 --> 00:08:52,080
Select your submit button. So buttons

182
00:08:52,080 --> 00:08:54,060
name is a submit.

183
00:08:54,060 --> 00:08:56,640
I'm going to highlight this.

184
00:08:56,640 --> 00:08:59,519
Let me copy.

185
00:08:59,519 --> 00:09:01,560
I can type people, just to make sure I'm

186
00:09:01,560 --> 00:09:04,200
going to copy and paste it, and go back

187
00:09:04,200 --> 00:09:06,779
to our contact form dot php

188
00:09:06,779 --> 00:09:10,519
in the post section.

189
00:09:10,560 --> 00:09:12,779
Paste it.

190
00:09:12,779 --> 00:09:16,740
Okay, so what we're doing now is, we copy

191
00:09:16,740 --> 00:09:19,800
and paste the form, each form field name,

192
00:09:19,800 --> 00:09:23,760
to their respective sections.

193
00:09:23,760 --> 00:09:24,720
Okay.

194
00:09:24,720 --> 00:09:27,240
Though, so I will repeat the same thing.

195
00:09:27,240 --> 00:09:30,060
Next thing is that the, uh, the name.

196
00:09:30,060 --> 00:09:32,760
So, back to our contact.

197
00:09:32,760 --> 00:09:35,399
So, uh, name.

198
00:09:35,399 --> 00:09:39,120
That is this. Input name is name.

199
00:09:39,120 --> 00:09:42,240
So, let me copy this.

200
00:09:42,240 --> 00:09:44,580
And contact form.

201
00:09:44,580 --> 00:09:47,180
Name.

202
00:09:47,700 --> 00:09:49,620
Paste it.

203
00:09:49,620 --> 00:09:53,399
Next thing is a subject. So, um, subject

204
00:09:53,399 --> 00:09:56,820
input name, subject, here.

205
00:09:56,820 --> 00:09:59,959
That is a subject.

206
00:10:00,540 --> 00:10:04,459
Copy, contact form,

207
00:10:05,459 --> 00:10:08,580
and paste it.

208
00:10:08,580 --> 00:10:14,000
Next thing is the, um, made from.

209
00:10:15,360 --> 00:10:19,260
Your email address here, that is email,

210
00:10:19,260 --> 00:10:22,519
that's the input name.

211
00:10:22,740 --> 00:10:24,180
Copy,

212
00:10:24,180 --> 00:10:27,080
contact form,

213
00:10:27,540 --> 00:10:28,920
and

214
00:10:28,920 --> 00:10:30,480
paste it.

215
00:10:30,480 --> 00:10:32,640
Next.

216
00:10:32,640 --> 00:10:34,980
Message.

217
00:10:34,980 --> 00:10:36,839
Input name here

218
00:10:36,839 --> 00:10:39,800
as a message.

219
00:10:41,820 --> 00:10:46,040
Oops, let me highlight again.

220
00:10:46,320 --> 00:10:50,519
Copy and contact form dot php.

221
00:10:50,519 --> 00:10:54,120
Message is message.

222
00:10:54,120 --> 00:10:58,320
Okay, so we are getting in there. Now, mail

223
00:10:58,320 --> 00:10:59,820
two.

224
00:10:59,820 --> 00:11:03,740
That's gonna be email address.

225
00:11:04,260 --> 00:11:06,180
Your email address, or your business

226
00:11:06,180 --> 00:11:08,100
email address, or your personal email

227
00:11:08,100 --> 00:11:11,100
address. So, since we're, uh, we don't have a

228
00:11:11,100 --> 00:11:13,200
live server for now, I'm just going to

229
00:11:13,200 --> 00:11:15,959
type that kind of, uh the uh, made up, uh, the

230
00:11:15,959 --> 00:11:18,240
email address, New Hampshire Humane

231
00:11:18,240 --> 00:11:20,760
Society, uh, at

232
00:11:20,760 --> 00:11:24,440
let's say at gmail dot com.

233
00:11:25,320 --> 00:11:28,200
So, this is the, uh, you're the recipient's

234
00:11:28,200 --> 00:11:31,760
email address. Okay. And the next thing is,

235
00:11:31,760 --> 00:11:35,760
uh, scroll down, you're gonna see that, uh,

236
00:11:35,760 --> 00:11:39,720
location after send page.

237
00:11:39,720 --> 00:11:42,180
So, highlight this text right before this

238
00:11:42,180 --> 00:11:45,300
question mark. So, we're gonna type here

239
00:11:45,300 --> 00:11:49,320
the page URL to be redirected to the

240
00:11:49,320 --> 00:11:51,660
after submitting the form.

241
00:11:51,660 --> 00:11:55,019
So, in this case, since we are not in, uh,

242
00:11:55,019 --> 00:11:57,060
we're not in the live server, we're not

243
00:11:57,060 --> 00:11:59,760
online, but let's say that,

244
00:11:59,760 --> 00:12:00,980
um,

245
00:12:00,980 --> 00:12:04,140
HTTPS

246
00:12:04,140 --> 00:12:10,560
slash www dot, uh, New Hampshire Humane

247
00:12:10,560 --> 00:12:12,660
Society

248
00:12:12,660 --> 00:12:15,060
dot org,

249
00:12:15,060 --> 00:12:16,920
slash,

250
00:12:16,920 --> 00:12:18,360
contact,

251
00:12:18,360 --> 00:12:21,060
dot HTML,

252
00:12:21,060 --> 00:12:22,440
slash.

253
00:12:22,440 --> 00:12:25,260
So, that's going to be the URL. So, after

254
00:12:25,260 --> 00:12:27,660
hitting the submitting button, and then, um,

255
00:12:27,660 --> 00:12:30,839
your website will be direct, redirected

256
00:12:30,839 --> 00:12:32,459
to this URL.

257
00:12:32,459 --> 00:12:34,440
Okay. So,

258
00:12:34,440 --> 00:12:37,459
let me save it.

259
00:12:37,740 --> 00:12:39,000
And then,

260
00:12:39,000 --> 00:12:43,200
let me go back to a contact dot html. So, uh,

261
00:12:43,200 --> 00:12:46,380
in their contact form,

262
00:12:46,380 --> 00:12:47,700
we

263
00:12:47,700 --> 00:12:50,339
made a link to on this container and

264
00:12:50,339 --> 00:12:54,000
class name, and then action is fill.

265
00:12:54,000 --> 00:12:56,100
We're going to make a link to those, that

266
00:12:56,100 --> 00:12:59,459
PHP file, which is a contact form dot php.

267
00:12:59,459 --> 00:13:01,320
So, I'm going to just type it.

268
00:13:01,320 --> 00:13:02,880
Contact.

269
00:13:02,880 --> 00:13:07,800
it already, uh, shows me, form dot php.

270
00:13:07,800 --> 00:13:11,060
And save it.

271
00:13:11,519 --> 00:13:14,880
So, we are all done. So, let's

272
00:13:14,880 --> 00:13:16,200
view it

273
00:13:16,200 --> 00:13:20,279
online. Let me refresh.

274
00:13:20,279 --> 00:13:24,860
So, in my home page, this is my home.

275
00:13:25,019 --> 00:13:26,820
About us page.

276
00:13:26,820 --> 00:13:28,560
Volunteer.

277
00:13:28,560 --> 00:13:30,000
Adopt.

278
00:13:30,000 --> 00:13:33,180
And contact here.

279
00:13:33,180 --> 00:13:36,240
if I click on submit it, it asks me this,

280
00:13:36,240 --> 00:13:38,339
please fill out this field. So, we can

281
00:13:38,339 --> 00:13:39,959
just type it.

282
00:13:39,959 --> 00:13:43,260
Okay. So, again, for now it's not working,

283
00:13:43,260 --> 00:13:46,019
but once you have your live server, and

284
00:13:46,019 --> 00:13:48,839
once you upload everything online, uh,

285
00:13:48,839 --> 00:13:51,540
including your style dot css and then your

286
00:13:51,540 --> 00:13:54,480
contact form, that PHP file together, it

287
00:13:54,480 --> 00:13:55,860
should work.

288
00:13:55,860 --> 00:13:58,620
So, that's it. So, I hope you have this,

289
00:13:58,620 --> 00:14:01,320
you have the series of tutorials, uh, help you

290
00:14:01,320 --> 00:14:04,139
to build up the your the first website.

291
00:14:04,139 --> 00:14:07,019
And then, um, thanks for watching, and I

292
00:14:07,019 --> 00:14:09,860
will see you next time.