1
00:00:00,000 --> 00:00:02,910
I just sort of built out
the blog page and now

2
00:00:02,910 --> 00:00:05,400
let us build out another
very important page,

3
00:00:05,400 --> 00:00:08,300
and that's going to
be the Contact page.

4
00:00:08,295 --> 00:00:10,565
Now ideally, of course, on
your contact page you want to

5
00:00:10,560 --> 00:00:13,300
have some sort of contact form,

6
00:00:13,304 --> 00:00:15,224
maybe even some Google map.

7
00:00:15,225 --> 00:00:17,645
If you have a physical location.

8
00:00:17,640 --> 00:00:19,140
Or we don't have a
physical location,

9
00:00:19,140 --> 00:00:21,510
but we're going to
add a contact form.

10
00:00:21,510 --> 00:00:24,810
Now, there are several plugins

11
00:00:24,810 --> 00:00:26,820
out there for creating
contact forms.

12
00:00:26,820 --> 00:00:28,440
And in fact, if you're using

13
00:00:28,440 --> 00:00:30,360
the paid version of elemental,

14
00:00:30,360 --> 00:00:33,360
you will have the form element.

15
00:00:33,355 --> 00:00:35,575
But we're using the, the
free version of elemental.

16
00:00:35,570 --> 00:00:38,140
So we're going to
install another plugin.

17
00:00:38,135 --> 00:00:42,985
And this plugin is called
the WP Forms plugins.

18
00:00:42,980 --> 00:00:45,820
So let me type in WP forms.

19
00:00:45,815 --> 00:00:47,735
And it's the one right here.

20
00:00:47,735 --> 00:00:50,035
Alright, so let's
go ahead install.

21
00:00:50,030 --> 00:00:54,510
And we're going to now
activate the plugin.

22
00:00:54,610 --> 00:00:58,520
All right, so we're just
gonna go ahead and click

23
00:00:58,520 --> 00:01:02,200
on create your first
form right here.

24
00:01:02,195 --> 00:01:05,095
The good thing about this
particular plugin is that it's

25
00:01:05,090 --> 00:01:07,970
integrates very well
with elemental.

26
00:01:07,969 --> 00:01:10,999
I'm going to type in
a name right here.

27
00:01:11,000 --> 00:01:13,460
So that's going to
be the contact form.

28
00:01:13,460 --> 00:01:15,460
That will be the
name of this form.

29
00:01:15,455 --> 00:01:19,295
Contact Form are in here.

30
00:01:19,295 --> 00:01:21,785
You do have our
different templates,

31
00:01:21,784 --> 00:01:24,324
are gonna choose the simple
contact form factor.

32
00:01:24,320 --> 00:01:26,300
We can view the demo in here.

33
00:01:26,300 --> 00:01:27,940
You can see this is
the demo right here.

34
00:01:27,935 --> 00:01:28,795
Very, very simple.

35
00:01:28,790 --> 00:01:31,690
You will have the name, email
and then message fields.

36
00:01:31,685 --> 00:01:34,625
So that should suit
our purposes on,

37
00:01:34,625 --> 00:01:37,865
I'm gonna go ahead and simply
click on Use template.

38
00:01:38,110 --> 00:01:40,280
That's itself, but
just gonna make

39
00:01:40,280 --> 00:01:43,010
a few changes the

40
00:01:43,010 --> 00:01:44,420
way the plug-in works
as they're right here,

41
00:01:44,420 --> 00:01:46,010
you've got the fields available

42
00:01:46,010 --> 00:01:47,600
for you with the free version,

43
00:01:47,600 --> 00:01:50,150
there is a paid version
where you have access to

44
00:01:50,150 --> 00:01:51,800
these fancy fields and

45
00:01:51,800 --> 00:01:54,040
the payment fields and so
on, but we don't need them.

46
00:01:54,035 --> 00:01:56,125
So the ginger I'm gonna
make here would be

47
00:01:56,120 --> 00:01:57,970
to edit the name field.

48
00:01:57,965 --> 00:02:01,145
So I'm simply going
to click inside.

49
00:02:01,145 --> 00:02:04,435
And right here you
do have the format.

50
00:02:04,430 --> 00:02:06,560
I prefer the simple
format where you just

51
00:02:06,560 --> 00:02:09,190
have one single
line for the name.

52
00:02:09,185 --> 00:02:11,605
But you have forced middle,

53
00:02:11,600 --> 00:02:14,290
last, and first,
last, and so on.

54
00:02:14,285 --> 00:02:16,135
On the Advanced, you can change

55
00:02:16,130 --> 00:02:19,450
the field size to
launch two small,

56
00:02:19,445 --> 00:02:22,465
depending on your taste
and what you prefer.

57
00:02:22,460 --> 00:02:24,710
You can add your CSS
glasses in here.

58
00:02:24,710 --> 00:02:26,030
You've also got smart logic,

59
00:02:26,030 --> 00:02:27,260
which, oops, I'm
sorry about that.

60
00:02:27,260 --> 00:02:28,010
I forgot.

61
00:02:28,010 --> 00:02:31,790
This is only available with
the paid version anyway,

62
00:02:31,790 --> 00:02:33,640
for the field options.

63
00:02:33,635 --> 00:02:35,545
That's it. So you can
go back in here and add

64
00:02:35,540 --> 00:02:38,930
additional fields like
a drop-down checkboxes.

65
00:02:38,930 --> 00:02:41,110
If you wanted to.

66
00:02:41,105 --> 00:02:43,625
Under setup in here,

67
00:02:43,625 --> 00:02:45,215
I'm sorry, under settings,

68
00:02:45,215 --> 00:02:47,365
whether right here,
this is where you can

69
00:02:47,360 --> 00:02:49,510
change things like the
actual form name itself.

70
00:02:49,505 --> 00:02:50,875
You can change the text for

71
00:02:50,870 --> 00:02:53,770
the button and
influence applications.

72
00:02:53,765 --> 00:02:55,675
This is where you can

73
00:02:55,670 --> 00:02:57,620
setup the kinds of
notifications you want to

74
00:02:57,620 --> 00:03:00,520
receive whenever anybody sends

75
00:03:00,515 --> 00:03:02,725
the fills out the contact form.

76
00:03:02,720 --> 00:03:05,330
We want to be notified
in here by default,

77
00:03:05,330 --> 00:03:06,980
the admin email associated

78
00:03:06,980 --> 00:03:08,600
with your WordPress
website will be in here,

79
00:03:08,600 --> 00:03:11,510
but you can add your own
custom e-mail elements.

80
00:03:11,510 --> 00:03:13,480
Show you something,
okay, right here,

81
00:03:13,475 --> 00:03:15,485
where you have from name.

82
00:03:15,485 --> 00:03:19,025
By default, it will be set
to your website's name,

83
00:03:19,025 --> 00:03:22,075
but will make a lot more
sense to set these to

84
00:03:22,070 --> 00:03:26,210
the actual name of the
person sending the message.

85
00:03:26,210 --> 00:03:28,510
So right here I click
on Show smart tags.

86
00:03:28,505 --> 00:03:30,905
Simply choose the name field,

87
00:03:30,905 --> 00:03:32,305
or your FirstName, LastName,

88
00:03:32,300 --> 00:03:34,810
depending on the kind of feel
that you have for the name.

89
00:03:34,805 --> 00:03:37,555
And then same for
from e-mail as well.

90
00:03:37,550 --> 00:03:40,300
We'll simply choose
the email field.

91
00:03:40,295 --> 00:03:45,235
And I'm gonna go ahead
and simply save.

92
00:03:45,230 --> 00:03:48,260
You do have the conformations
in here as well like okay,

93
00:03:48,260 --> 00:03:51,280
what happens once they
filled out the contact form?

94
00:03:51,275 --> 00:03:52,865
Do they get a message? If so,

95
00:03:52,865 --> 00:03:54,565
this is where you can
edit the message.

96
00:03:54,560 --> 00:03:56,900
You can show them at
particular page and it'll

97
00:03:56,900 --> 00:03:59,770
be a special beauty
of created all.

98
00:03:59,765 --> 00:04:01,315
You can simply redirect them to

99
00:04:01,310 --> 00:04:04,340
an external URL if
you wanted to go.

100
00:04:04,340 --> 00:04:05,570
We're not gonna do any of that.

101
00:04:05,570 --> 00:04:06,860
Let's go ahead now simply TO

102
00:04:06,860 --> 00:04:09,530
save one more time, close this.

103
00:04:09,530 --> 00:04:14,890
Now we're gonna go over
to the contact page.

104
00:04:14,885 --> 00:04:17,155
Let's go ahead and edit the page

105
00:04:17,150 --> 00:04:20,400
first of all from the
WordPress backend.

106
00:04:20,410 --> 00:04:23,480
Then from here I'm
going to click

107
00:04:23,480 --> 00:04:25,810
on edit with Elementor
so we can now

108
00:04:25,805 --> 00:04:31,565
use the Elementor interface
and check this out.

109
00:04:31,565 --> 00:04:35,605
All right, oops, I
forgot to do one thin.

110
00:04:35,600 --> 00:04:36,680
My apologies.

111
00:04:36,680 --> 00:04:38,680
We need to enable

112
00:04:38,675 --> 00:04:43,675
the WP forms are add-on for
the essential items plugins.

113
00:04:43,670 --> 00:04:44,840
So let's quickly do this.

114
00:04:44,840 --> 00:04:47,580
I'm gonna go to
essential atoms in here.

115
00:04:48,070 --> 00:04:50,470
Let's go to elements.

116
00:04:50,465 --> 00:04:55,465
And then down here you have
the form styling elements.

117
00:04:55,460 --> 00:04:57,110
You will see WP Forms.

118
00:04:57,110 --> 00:04:59,510
Let's go ahead and
now activate that.

119
00:04:59,510 --> 00:05:01,040
You can see you have access to

120
00:05:01,040 --> 00:05:02,930
other kinds of forms
like fluent forms,

121
00:05:02,930 --> 00:05:04,250
Gravity Forms, which
is actually very,

122
00:05:04,250 --> 00:05:05,570
very good Ninja Forms and so on.

123
00:05:05,570 --> 00:05:09,650
Anyways, let's go ahead
and save our settings.

124
00:05:09,650 --> 00:05:12,440
And I'm going to close this.

125
00:05:12,440 --> 00:05:15,180
Let's refresh this
page one more time.

126
00:05:15,670 --> 00:05:18,410
Okay, so the thing
about WE forms

127
00:05:18,410 --> 00:05:20,570
is that even with the free
version of elemental,

128
00:05:20,570 --> 00:05:23,420
you will have access
to the element.

129
00:05:23,420 --> 00:05:26,120
Once you've installed and
activated the plugin,

130
00:05:26,120 --> 00:05:28,400
you can see it right
here on the basic,

131
00:05:28,400 --> 00:05:31,330
you have WP forms by Elemental.

132
00:05:31,325 --> 00:05:34,345
I'm going to click
drag inside in here.

133
00:05:34,340 --> 00:05:36,950
And I'll show you the
difference between this

134
00:05:36,950 --> 00:05:39,440
one and the one provided
by essential add-ons.

135
00:05:39,440 --> 00:05:42,430
Let's go back, scroll
all the way down here.

136
00:05:42,425 --> 00:05:44,845
Let's add the one for

137
00:05:44,840 --> 00:05:48,580
essential add-ons into
a different section.

138
00:05:48,575 --> 00:05:51,685
Now you're going to see
the main difference, okay?

139
00:05:51,680 --> 00:05:53,770
This is the one for
the essential atoms.

140
00:05:53,765 --> 00:05:55,435
I'm going to choose
the contact for

141
00:05:55,430 --> 00:05:57,250
mortality rate. It
says select form.

142
00:05:57,245 --> 00:06:00,235
Let's choose that.
Now right here.

143
00:06:00,230 --> 00:06:02,750
Compare this one with
the one up here.

144
00:06:02,750 --> 00:06:04,820
Let's go with the one
for elements of first.

145
00:06:04,820 --> 00:06:06,880
Let's choose the
contact form as well.

146
00:06:06,875 --> 00:06:09,895
The thing is, you only

147
00:06:09,890 --> 00:06:13,190
have access to the kind
of form to choose.

148
00:06:13,190 --> 00:06:14,660
The display options are good.

149
00:06:14,660 --> 00:06:15,800
You want to shoot the form name,

150
00:06:15,800 --> 00:06:18,150
description and then advanced.

151
00:06:18,154 --> 00:06:20,344
There's nothing more to it.

152
00:06:20,345 --> 00:06:24,145
However, for the one
with essential add-ons,

153
00:06:24,140 --> 00:06:27,050
you have access to a lot more.

154
00:06:27,050 --> 00:06:30,460
You can show the description
labels, please hold her.

155
00:06:30,455 --> 00:06:32,455
You even have our
error messages.

156
00:06:32,450 --> 00:06:33,560
You want to show error messages

157
00:06:33,560 --> 00:06:34,790
or do you want to hide them?

158
00:06:34,790 --> 00:06:36,140
So for example, if somebody

159
00:06:36,140 --> 00:06:37,640
didn't fill out the
name field and then the

160
00:06:37,640 --> 00:06:39,020
press Submit you wanted to

161
00:06:39,020 --> 00:06:40,940
display the error
message or not.

162
00:06:40,940 --> 00:06:44,570
You have access to plenty
of styling options.

163
00:06:44,570 --> 00:06:46,580
You can add a form
background color.

164
00:06:46,580 --> 00:06:49,610
You can align the form
at your width margins.

165
00:06:49,610 --> 00:06:51,860
You have all sorts of
styling options for

166
00:06:51,860 --> 00:06:54,190
the title and description
labels and so on.

167
00:06:54,185 --> 00:06:55,435
All this time options,

168
00:06:55,430 --> 00:06:58,000
you don't get them with the one

169
00:06:57,995 --> 00:06:59,515
with the element provided by

170
00:06:59,510 --> 00:07:01,070
the free version of elemental.

171
00:07:01,070 --> 00:07:02,150
That's why I prefer to

172
00:07:02,150 --> 00:07:05,030
use the one provided
by essential atoms.

173
00:07:05,030 --> 00:07:08,210
So I'm gonna go ahead and
close this one by Elemental.

174
00:07:08,209 --> 00:07:10,059
Let us walk on this one.

175
00:07:10,055 --> 00:07:11,995
Very, very simple.

176
00:07:11,990 --> 00:07:15,740
We're not gonna make any
huge changes in here except

177
00:07:15,740 --> 00:07:19,870
we will simply hide the
title of the phonebook.

178
00:07:19,865 --> 00:07:21,445
Everybody knows it's
a contact form,

179
00:07:21,440 --> 00:07:24,460
so there is no need to
change anything in here.

180
00:07:24,455 --> 00:07:25,945
One thing we will do though,

181
00:07:25,940 --> 00:07:28,580
is to hide the page title.

182
00:07:28,580 --> 00:07:31,270
And then we'll add
our own heading.

183
00:07:31,265 --> 00:07:33,175
All right, and we'll
simply choose this one's

184
00:07:33,170 --> 00:07:34,700
on it as an H1 go to

185
00:07:34,700 --> 00:07:38,650
style typography,
which is primary.

186
00:07:38,645 --> 00:07:44,165
And we'll simply coldest
Swan our Contact Us.

187
00:07:44,165 --> 00:07:45,715
That's it.

188
00:07:45,710 --> 00:07:51,480
We'll add some padding to
the section link values.

189
00:07:51,484 --> 00:07:57,514
We're gonna go with 50 on
top and then 50 below.

190
00:07:57,514 --> 00:08:00,024
Actually come to think of it.

191
00:08:00,020 --> 00:08:03,100
The Contact Us is actually
very, very large book.

192
00:08:03,095 --> 00:08:05,815
It's okay, let's just align
this one to the middle.

193
00:08:05,810 --> 00:08:07,960
And we'll just add
some pattern for

194
00:08:07,955 --> 00:08:10,055
the actual form itself.

195
00:08:10,055 --> 00:08:11,585
I'm going to click
on the form element.

196
00:08:11,585 --> 00:08:12,895
Let's go to Advanced.

197
00:08:12,890 --> 00:08:15,400
And we'll also add
some padding as well.

198
00:08:15,395 --> 00:08:17,305
Just give it some
distance between

199
00:08:17,300 --> 00:08:20,540
the actual title and
the form itself.

200
00:08:20,540 --> 00:08:23,360
So go ahead and update.

201
00:08:23,360 --> 00:08:27,650
That's what I'm going to go
ahead now and view the page.

202
00:08:27,650 --> 00:08:32,280
And that's it for
the Contact Us page.

203
00:08:32,275 --> 00:08:35,725
Now again, you can make
this a bit more exciting.

204
00:08:35,720 --> 00:08:37,610
You can go with
maybe two columns

205
00:08:37,610 --> 00:08:39,380
as opposed to on section.

206
00:08:39,380 --> 00:08:41,620
The first column you can add a,

207
00:08:41,615 --> 00:08:43,705
an image of somebody
who maybe calling or

208
00:08:43,700 --> 00:08:46,190
somebody send in an
e-mail, stuff like that.

209
00:08:46,190 --> 00:08:48,020
So there are different
ways to modify

210
00:08:48,020 --> 00:08:49,670
the Contact Us page
and make it more

211
00:08:49,670 --> 00:08:51,740
exciting if you wanted to.

212
00:08:51,740 --> 00:08:53,960
But this is very, very simple,

213
00:08:53,959 --> 00:08:57,649
very straightforward, and
it suits our purposes.

214
00:08:57,650 --> 00:08:59,150
So thank you for watching and

215
00:08:59,150 --> 00:09:01,410
I will see you in
the next class.