1
00:00:00,420 --> 00:00:05,940
In this video what configured the contact form plug in and insert it into the contact page.

2
00:00:05,940 --> 00:00:10,440
This will give visitors a way to contact the website owner through email using a common form on the

3
00:00:10,440 --> 00:00:15,570
web site using a contact form like this is a professional untidy way of communicating with web site

4
00:00:15,570 --> 00:00:18,070
visitors and adds value to the Web site.

5
00:00:18,450 --> 00:00:23,460
You'll learn how to use the contact form 7 plug in its many possible configurations and how to embed

6
00:00:23,460 --> 00:00:25,230
a form anywhere on a Web site.

7
00:00:26,810 --> 00:00:30,140
First taking a look at the dashboard you know we keep seeing this.

8
00:00:30,140 --> 00:00:32,040
Welcome to WordPress.

9
00:00:32,190 --> 00:00:36,680
You know welcome screen but you can dismiss it and then it'll go away.

10
00:00:36,770 --> 00:00:44,150
Now under screen options there's always checkboxes for what you need or what you don't need on your

11
00:00:44,240 --> 00:00:46,940
desktop dashboard for wordpress.

12
00:00:46,970 --> 00:00:53,790
And so if you check that box that will come back when you dismiss it it and checks it.

13
00:00:53,810 --> 00:00:55,810
Here's your challenge for this video.

14
00:00:55,880 --> 00:01:02,630
Since we have the contact form 7 plug in activated we have the contact menu bar over here on the left

15
00:01:02,630 --> 00:01:03,500
hand side.

16
00:01:03,530 --> 00:01:11,090
Go ahead and add a contact form configure it a little bit and inserted into the contact page for the

17
00:01:11,090 --> 00:01:12,940
video now and give it a try.

18
00:01:14,570 --> 00:01:15,960
How to go.

19
00:01:16,130 --> 00:01:17,130
Here's how I'd do it.

20
00:01:17,930 --> 00:01:27,640
Go over to contact forms and you can see that contact form 7 also has a dismissable message but it already

21
00:01:27,910 --> 00:01:33,240
populates the plug in with a contact form that's been made already.

22
00:01:33,240 --> 00:01:41,350
I can see this is where it gives you a short code which is how we place it into a web page or in a widget.

23
00:01:41,560 --> 00:01:49,030
But if I look at the contact form one I might just open that and use it for my contact form.

24
00:01:49,030 --> 00:01:55,390
I'm just going to put contact me because that will match the name of the page where I'm in a place as

25
00:01:55,390 --> 00:02:02,430
contact form and then you can see contact form 7 gives you a few tabs across the top.

26
00:02:02,670 --> 00:02:10,620
One is the form the next is the mail tab and this will show you how your message is going to be mailed

27
00:02:10,620 --> 00:02:18,570
out to you and then you can actually attach a second message down here that could be used to respond

28
00:02:18,570 --> 00:02:22,530
to the person that filled out the form showing them what they sent you.

29
00:02:24,600 --> 00:02:29,010
Messages are when the form gets sent.

30
00:02:29,010 --> 00:02:36,540
Contact form 7 will open up a message to the user to say what happened whether there was an error or

31
00:02:36,540 --> 00:02:40,790
whether the form was sent and then there are some additional settings.

32
00:02:40,890 --> 00:02:47,550
If you need customisation code snippets that you've gotten from around the internet or other things

33
00:02:47,550 --> 00:02:51,710
like integrations with mail servers and things like that.

34
00:02:52,110 --> 00:03:00,040
But for now the simple form is probably find a name and email a subject a message and a send button.

35
00:03:00,420 --> 00:03:08,180
I might leave it as is for now and when I come here I can see that I would like to receive the messages

36
00:03:08,190 --> 00:03:09,730
at this email address.

37
00:03:10,850 --> 00:03:12,350
My name Sure.

38
00:03:12,380 --> 00:03:23,210
The subject and then it'll put all these things in the body of my message and the default message sounds

39
00:03:23,210 --> 00:03:23,510
great.

40
00:03:23,510 --> 00:03:31,730
I'll just hit save since I changed the form name and if I just click once in a shortcut here I can hit

41
00:03:31,730 --> 00:03:37,730
Control C to copy it or if I right click I get it copy and then let's open up the page and see what

42
00:03:37,730 --> 00:03:38,760
this looks like.

43
00:03:41,370 --> 00:03:48,600
With a short code that surrounded by brackets the way that that that is you don't have to place it in

44
00:03:48,780 --> 00:03:51,640
either the text tab or as text right here.

45
00:03:52,700 --> 00:04:02,180
What you can do is just paste the contact form as it is with the brackets straight into the body area.

46
00:04:02,180 --> 00:04:04,330
Update the page and then let's take a look.

47
00:04:11,530 --> 00:04:12,570
Refresh the page

48
00:04:15,180 --> 00:04:19,340
create a nice looking contact form the button looks nice.

49
00:04:20,520 --> 00:04:22,820
Tell me which fields are required.

50
00:04:25,820 --> 00:04:27,820
Great.

51
00:04:27,880 --> 00:04:33,030
Now if you're building this site in your local development environment using map the way that I am We're

52
00:04:33,040 --> 00:04:38,980
not going to be able to actually test what this e-mail looks like when it sends because we don't have

53
00:04:39,040 --> 00:04:42,790
a mail server installed on our local computer.

54
00:04:42,790 --> 00:04:43,880
There are ways to do that.

55
00:04:43,960 --> 00:04:50,080
But when I'm building web sites I'll generally build them at my live server either behind a maintenance

56
00:04:50,080 --> 00:04:51,970
screen or behind a password.

57
00:04:51,970 --> 00:04:57,610
And that way I can test that the contact form works if I am building a site in a local environment like

58
00:04:57,610 --> 00:04:58,360
this.

59
00:04:58,360 --> 00:05:03,120
I'll just place the contact form here and then once I migrate the site to the live server I'll make

60
00:05:03,120 --> 00:05:05,850
sure and test the contact form.

61
00:05:05,920 --> 00:05:08,460
If you do happen to fill it out

62
00:05:11,460 --> 00:05:19,170
and test it let's go ahead and look at what the message says.

63
00:05:19,320 --> 00:05:24,310
Once we hit the send button it's got some little.

64
00:05:24,370 --> 00:05:26,480
Ah there was an error trying to send your message.

65
00:05:26,560 --> 00:05:28,100
Please try again later.

66
00:05:28,530 --> 00:05:33,810
And that's because we're not attached to the Internet and there's no mail server here in my local environment.

67
00:05:35,670 --> 00:05:41,460
In a later chapter we'll be going over transactional emails that WordPress sends from the server marketing

68
00:05:41,490 --> 00:05:49,450
e-mails through a service like MailChimp and other ways of e-mailing through Web sites.

69
00:05:49,450 --> 00:05:55,150
For now though let's just look at other things that we can place within a contact form using the contact

70
00:05:55,150 --> 00:06:04,130
form 7 plug in back under contact contact forms.

71
00:06:04,310 --> 00:06:14,970
I can edit this form and if you remember there were a bunch of different buttons for the form tab here.

72
00:06:15,080 --> 00:06:24,890
Things like e-mail telephone Jor-El's a number a date a text area a dropdown menu and these pieces of

73
00:06:24,890 --> 00:06:28,800
code are necessary to place the form inside the Web site.

74
00:06:29,060 --> 00:06:38,000
But suppose I wanted to do something like a dropdown or maybe radio buttons I wanted to have I wanted

75
00:06:38,000 --> 00:06:44,340
to choose whether they are male or female

76
00:06:47,220 --> 00:06:48,260
just an example.

77
00:06:48,420 --> 00:06:51,870
But if I hit insert tag There we go.

78
00:06:51,870 --> 00:06:58,590
So just like this is a text area tag this one right here is a radio button that has two choices.

79
00:06:58,590 --> 00:07:00,220
Male and female.

80
00:07:00,750 --> 00:07:10,600
And so what I usually do is just copy and paste other sections so that I have the line break and the

81
00:07:10,620 --> 00:07:11,610
text here

82
00:07:14,700 --> 00:07:17,060
that I want.

83
00:07:17,160 --> 00:07:20,670
And then you've got to close the paragraph tag

84
00:07:23,750 --> 00:07:25,730
right now if I save that contact form.

85
00:07:27,020 --> 00:07:33,620
Because it's pasted into my contact page using this sure code once I change it here it will be changed

86
00:07:33,620 --> 00:07:34,800
on the Web site as well.

87
00:07:34,820 --> 00:07:42,170
But there's one more thing I need to add and that is in the mail area when I send myself an email from

88
00:07:42,170 --> 00:07:47,770
this contact form I want to get that in addition to the message

89
00:07:50,670 --> 00:07:57,170
I also want to know the answer to that other question the gender.

90
00:07:57,560 --> 00:08:04,100
And so if I just scroll up just a little bit since I created another field inside of the contact form.

91
00:08:04,100 --> 00:08:09,920
It gives me what I need the code to place in the mail to give me that information.

92
00:08:09,950 --> 00:08:15,270
Once the users answered that question so I'll just copy paste it here.

93
00:08:17,030 --> 00:08:17,930
And save the for

94
00:08:22,320 --> 00:08:22,700
great.

95
00:08:22,700 --> 00:08:23,540
That looks nice.

96
00:08:23,570 --> 00:08:30,800
So in this way you can really build a contact form for any purpose using so many different types of

97
00:08:30,800 --> 00:08:33,950
things like check boxes radio buttons.

98
00:08:34,170 --> 00:08:39,960
There's quizzes recapture to prevent comment spam and things like that.

99
00:08:41,330 --> 00:08:47,620
Now suppose I wanted to place that contact form on the sidebar of every page on the site.

100
00:08:47,840 --> 00:08:52,080
It's as simple as placing a short code inside of a widget on the side bar.

101
00:08:52,250 --> 00:08:58,130
Let's go ahead and do that real quick grab copy the short code again.

102
00:08:58,490 --> 00:09:02,670
Let's go to appearance widgets.

103
00:09:03,140 --> 00:09:10,850
And then to place any kind of item HDMI out or text or even images inside of a sidebar widget you can

104
00:09:10,850 --> 00:09:19,240
use a text widget or drag one over it's place at there below the search bar but above the pages navigation

105
00:09:20,870 --> 00:09:22,090
I can title it.

106
00:09:22,090 --> 00:09:23,080
Contact me

107
00:09:26,720 --> 00:09:31,930
and that's just place that shortcut there.

108
00:09:31,930 --> 00:09:33,010
All right I've saved that widget.

109
00:09:33,010 --> 00:09:35,530
Now refresh the page here and we'll see what it looks like.

110
00:09:38,000 --> 00:09:44,960
Great Again a nice looking form formatted for the text widget.

111
00:09:45,080 --> 00:09:49,600
Now I don't think I want to have the contact form on the sidebar and be present on every page of the

112
00:09:49,600 --> 00:09:53,620
Web site so I'm going to go ahead and drag it out of there.

113
00:09:53,620 --> 00:10:00,100
One thing is that there's an available widgets section on the page and then in active widgets section

114
00:10:00,460 --> 00:10:03,590
that you can use to save widgets with their current settings.

115
00:10:03,820 --> 00:10:07,540
If you like so I'll take that.

116
00:10:07,540 --> 00:10:11,990
Contact me here if I just make the available widgets a little bit smaller.

117
00:10:12,160 --> 00:10:15,090
Now the inactive widgets will keep their settings.

118
00:10:15,130 --> 00:10:21,790
So if I just drag the contact me text widget across WordPress we'll save it there for me if I ever want

119
00:10:21,790 --> 00:10:23,520
to activate it later.

120
00:10:24,550 --> 00:10:31,560
So if I refresh the page I can see that that will be removed from the sidebar in this lesson.

121
00:10:31,660 --> 00:10:36,760
You've configured a simple contact form using the contact form 7 plug in and checked out the different

122
00:10:36,760 --> 00:10:42,580
types of information you could collect in a form plus you use the short code to place the form on the

123
00:10:42,580 --> 00:10:47,280
Contact page as well as in a sidebar widget in the next video.

124
00:10:47,300 --> 00:10:52,040
We'll continue to build out the contact page with an interactive location map using the Google Maps

125
00:10:52,140 --> 00:10:53,530
Forgan Let's go