1
00:00:00,620 --> 00:00:06,170
In this video you'll incorporate a contact form into the site including an instance of the form in the

2
00:00:06,170 --> 00:00:12,500
site footer you'll use a premium plug in from the enviro market inside the student's sandbox to add

3
00:00:12,500 --> 00:00:17,720
a fancy pop up to the contact form 7 user notification messages.

4
00:00:17,720 --> 00:00:23,520
In this lesson you'll gain more mastery of the contact form 7 plug in and use a premium add on as well.

5
00:00:25,240 --> 00:00:30,580
If we look at the executive Frot site we've been working on there's a contact page that we've already

6
00:00:30,580 --> 00:00:32,350
incorporated into the menu.

7
00:00:32,350 --> 00:00:39,160
Or if you haven't go ahead and look at that contact page using the Wordpress dashboard and then opening

8
00:00:39,160 --> 00:00:44,250
up the contact page as is the case often with studio press.

9
00:00:44,300 --> 00:00:50,020
They'll use a gravity form short code that's to be used with the gravity forms plug in.

10
00:00:50,020 --> 00:00:55,590
Since we're using a different contact forms plug in the Contact page or codes not working here but we'll

11
00:00:55,660 --> 00:00:56,680
replace this.

12
00:00:56,710 --> 00:01:04,780
And the content here on the Contact page itself log into the Wordpress dashboard and make sure you're

13
00:01:04,780 --> 00:01:12,310
on the executive pro site we've been working on and open up the plugins page the second and third plug

14
00:01:12,310 --> 00:01:12,690
ins.

15
00:01:12,700 --> 00:01:18,220
We'd like to activate so that we can use the contact form 7 plug in that you've used before in your

16
00:01:18,220 --> 00:01:26,740
local environment and the contact form 7 pop up message premium plug in that I got from the enviro marketplace.

17
00:01:26,840 --> 00:01:33,800
Now that I have those two plug ins activated I can go up under contact in the menu and look at the contact

18
00:01:33,800 --> 00:01:42,470
forms that I have already contact form has a already populated form that they make for you a standard

19
00:01:42,470 --> 00:01:51,650
form that has name email and subject line and message as a text area and we'll be editing this contact

20
00:01:51,650 --> 00:01:57,830
form as we did before to place it on our contact form page.

21
00:01:57,850 --> 00:02:01,540
Here's a small challenge for you in addition to the name and email.

22
00:02:01,540 --> 00:02:07,330
Let's collect a telephone number for people that want to fill out this form as well and let's make it

23
00:02:07,330 --> 00:02:14,080
required then edit the mail that gets sent to you to populate that e-mail with the telephone number

24
00:02:14,560 --> 00:02:16,550
for a video now and give it a try.

25
00:02:17,840 --> 00:02:19,390
I hope you did well with that.

26
00:02:19,650 --> 00:02:20,460
Here's how I do it.

27
00:02:20,460 --> 00:02:27,600
I go to the form here and the first thing I'm gonna do is after your email required including the paragraph

28
00:02:27,600 --> 00:02:41,670
tags I mean I hit Control C and copy that and paste it in here and label it with your phone number.

29
00:02:42,380 --> 00:02:43,300
OK.

30
00:02:43,310 --> 00:02:50,830
Now instead of e-mail your email that code short code is going to be different so I'm going to click

31
00:02:50,830 --> 00:02:52,580
the telephone.

32
00:02:52,810 --> 00:03:01,510
I'm in a click required field and I'm just going to leave it as the default and I can say insert tag

33
00:03:02,130 --> 00:03:05,120
inserted where the code was.

34
00:03:05,380 --> 00:03:08,880
In fact if I save this first this might be easier.

35
00:03:10,530 --> 00:03:14,050
I go to mail right here and I can select that one.

36
00:03:14,150 --> 00:03:22,810
Now that it knows that it is there so name email subject and just blow the message body

37
00:03:26,760 --> 00:03:27,980
type phone number

38
00:03:31,820 --> 00:03:33,560
and place it there.

39
00:03:33,640 --> 00:03:37,560
Now save the contact for great.

40
00:03:37,590 --> 00:03:40,270
I hope you come through as easily as I did.

41
00:03:40,730 --> 00:03:46,960
Let's go and look at the pop up message at ONS tab because we've activated the pop up message at.

42
00:03:47,040 --> 00:03:53,300
We were able to choose from these pop up message add ons instead of having messages that just appear

43
00:03:53,510 --> 00:03:55,610
below the submit button.

44
00:03:55,640 --> 00:04:03,170
Any of these messages will be displayed when the person hits the submit button.

45
00:04:03,170 --> 00:04:10,670
But instead of just a small little text message these pop ups will have a nice big impact with their

46
00:04:10,670 --> 00:04:11,380
colors.

47
00:04:11,390 --> 00:04:20,320
So let's pick a color that matches I like this blue with the green button and the white lettering.

48
00:04:20,360 --> 00:04:24,790
So if I just click that and hit save we can test that in a moment.

49
00:04:26,980 --> 00:04:34,300
Now I'd just like to show you quickly where I got this pop up maß message add ons plug in from the Vado

50
00:04:34,300 --> 00:04:36,690
marketplace and Vodacom.

51
00:04:36,850 --> 00:04:42,910
I can click here and go to the Vado market and I'll admit I didn't buy this plug in.

52
00:04:42,910 --> 00:04:49,230
By being a member of the and Vado marketplace and having an account it was one of their freebies that

53
00:04:49,240 --> 00:04:50,100
they were giving away.

54
00:04:50,110 --> 00:04:56,030
And because I use the contact form seven plug in it was a great freebie for me to get.

55
00:04:56,080 --> 00:05:02,200
So if I choose code Kanyon that's where WordPress plugins exist and

56
00:05:05,780 --> 00:05:11,190
I'll just type the title and see if I can find it contact form 7 pop up message.

57
00:05:11,190 --> 00:05:13,270
It's an $11 plug in.

58
00:05:13,530 --> 00:05:16,140
And I got it for free.

59
00:05:16,380 --> 00:05:22,260
But it's part of our premium plugins inside the student's sandbox and it's a nice plug in available

60
00:05:22,260 --> 00:05:24,910
from and Vado next.

61
00:05:24,990 --> 00:05:31,120
Let's populate our contact page with the correct short code and maybe a short message about filling

62
00:05:31,120 --> 00:05:32,780
in the contact form.

63
00:05:32,980 --> 00:05:39,940
So I'll go back to the Wordpress dashboard or go back to the contact form itself and just click there

64
00:05:39,940 --> 00:05:46,440
once and hit Control see where you can right click and of course copy it to the clipboard.

65
00:05:46,450 --> 00:05:55,510
Now go to pages and all pages inside of my wordpress Web site with executive pro and since there's a

66
00:05:55,510 --> 00:06:00,910
bunch here I'm just going to go ahead and do a search.

67
00:06:00,970 --> 00:06:03,220
I want to find that page called contact page.

68
00:06:03,220 --> 00:06:03,610
There it is.

69
00:06:03,610 --> 00:06:09,340
If you have a lot of pages or a lot of posts the search bar up here is very useful inside the Wordpress

70
00:06:09,340 --> 00:06:10,330
dashboard.

71
00:06:10,390 --> 00:06:15,090
So open contact page and let's put instead of this.

72
00:06:15,110 --> 00:06:21,790
You know I'm going to go ahead and erase all that there and put the short code there first but above

73
00:06:21,790 --> 00:06:32,130
it I'd like to say you know use the following form to contact us or whatever message you'd like.

74
00:06:32,380 --> 00:06:34,500
I'll just update that page.

75
00:06:34,720 --> 00:06:43,570
And let's take a look at it and fill out a sample contact form and look at our pop up great.

76
00:06:43,830 --> 00:06:47,350
And the e-mail and the phone number is there subject to message.

77
00:06:47,370 --> 00:06:48,740
And then a send button

78
00:06:52,620 --> 00:06:57,320
just filling out the form here as if I was a customer.

79
00:06:58,080 --> 00:06:59,310
Here's my question.

80
00:06:59,320 --> 00:07:06,190
And when I hit send I get a nice pop up where does the background and I have to read that it's been

81
00:07:06,190 --> 00:07:06,900
sent.

82
00:07:07,150 --> 00:07:07,600
OK.

83
00:07:07,590 --> 00:07:13,590
Now if there was an error that would be very obvious and I could tell what was going on.

84
00:07:13,680 --> 00:07:19,180
Now let's make a contact form that's visually visible on every page of the website including the home

85
00:07:19,180 --> 00:07:26,520
page and even posts and different pages within the Web site in the bottom footer here.

86
00:07:26,520 --> 00:07:33,180
Your challenge is to paste that same short code into a footer widget and arrange your footers so that

87
00:07:33,180 --> 00:07:34,780
it looks good.

88
00:07:34,880 --> 00:07:36,870
Pozza video now and give it a try.

89
00:07:38,800 --> 00:07:39,430
How'd it go.

90
00:07:39,520 --> 00:07:42,120
Well let's see how I get on doing the challenge.

91
00:07:42,220 --> 00:07:44,280
I go back to the Wordpress dashboard.

92
00:07:44,440 --> 00:07:50,920
I'm going to want to use the Customize there so that I can see in live editing mode what my changes

93
00:07:50,920 --> 00:07:52,330
look like as I go.

94
00:07:52,660 --> 00:07:56,110
And I'll go to widgets and I'm going to edit.

95
00:07:56,380 --> 00:07:58,830
Let's see if I scroll down to the bottom.

96
00:07:58,930 --> 00:08:01,140
I think I'll leave the company profile.

97
00:08:01,300 --> 00:08:06,910
I can get rid of this recent posts and potentially put that contact form straight in the middle here

98
00:08:07,210 --> 00:08:08,470
and see what it looks like there.

99
00:08:08,470 --> 00:08:18,930
So footer number two I'm going to remove that from footer widget to area and I'm going to add a widget.

100
00:08:19,360 --> 00:08:25,450
And the way I'll put my contact form in there is I'll just make a text widget and placed that sure code

101
00:08:25,810 --> 00:08:28,120
that I had pasted into our contact page.

102
00:08:29,040 --> 00:08:31,870
Here's a text widget I could title it.

103
00:08:31,880 --> 00:08:37,080
Contact us and in the content.

104
00:08:37,080 --> 00:08:40,050
I'll paste that form and let's see what it looks like.

105
00:08:41,480 --> 00:08:42,160
Nice.

106
00:08:42,170 --> 00:08:44,020
Now of course it's very long.

107
00:08:44,020 --> 00:08:45,300
So what can I do.

108
00:08:45,350 --> 00:08:46,530
This isn't bad.

109
00:08:46,670 --> 00:08:54,890
You know this is visible on say every page of the Web site if I look at just a page you know as you

110
00:08:54,890 --> 00:08:58,810
scroll down the page yeah there's the contact form.

111
00:08:59,030 --> 00:09:05,870
Now it's pretty long so what I might do is play some more content inside of the contact area inside

112
00:09:05,870 --> 00:09:11,840
of the footer widgets that I have a little more information down here maybe a listing of recent posts

113
00:09:11,840 --> 00:09:16,430
would be a good idea or some more content over here on the right side as well.

114
00:09:18,260 --> 00:09:24,050
In this video you added a contact form to the contact page as well as to the footer so it's visible

115
00:09:24,050 --> 00:09:26,460
on every page site wide.

116
00:09:26,870 --> 00:09:34,220
You also chose a color scheme for the premium add on pop up message for contact form 7 in the next chapter

117
00:09:34,370 --> 00:09:40,220
will start a fresh new project inside the student sandbox and create a modern scrolling home page layout

118
00:09:40,460 --> 00:09:46,130
using another Genesys premium child theme will explore the home page layouts that studio press uses

119
00:09:46,130 --> 00:09:52,430
in some of their child themes and populate our site with a custom post type using the custom press premium

120
00:09:52,500 --> 00:09:52,820
plugin