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 dreamyver

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
bone structure of 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 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 other one responsible

23
00:01:03,300 --> 00:01:05,760
website uh using the Boost Tribune

24
00:01:05,760 --> 00:01:08,280
remover 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.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.html

40
00:01:51,200 --> 00:01:54,659
and remover con open with the Adobe

41
00:01:54,659 --> 00:01:56,460
remover

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

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

98
00:04:42,240 --> 00:04:44,820
files tab we already created a style.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.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.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 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.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 there were the other

139
00:06:54,600 --> 00:06:58,560
uh other people 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 they weren't working on their kind

143
00:07:07,560 --> 00:07:10,500
of 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
completed 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 that 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.html with a style.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.php

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

163
00:07:59,099 --> 00:08:02,340
PHP code.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.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 reform 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.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.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.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 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 made up of the

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

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

232
00:11:20,760 --> 00:11:24,440
let's say gmail.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
HTTP s

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

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

248
00:12:12,660 --> 00:12:15,060
.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
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

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