In this video you'll incorporate a contact form into the site including an instance of the form in the
site footer you'll use a premium plug in from the enviro market inside the student's sandbox to add
a fancy pop up to the contact form 7 user notification messages.
In this lesson you'll gain more mastery of the contact form 7 plug in and use a premium add on as well.
If we look at the executive Frot site we've been working on there's a contact page that we've already
incorporated into the menu.
Or if you haven't go ahead and look at that contact page using the Wordpress dashboard and then opening
up the contact page as is the case often with studio press.
They'll use a gravity form short code that's to be used with the gravity forms plug in.
Since we're using a different contact forms plug in the Contact page or codes not working here but we'll
replace this.
And the content here on the Contact page itself log into the Wordpress dashboard and make sure you're
on the executive pro site we've been working on and open up the plugins page the second and third plug
ins.
We'd like to activate so that we can use the contact form 7 plug in that you've used before in your
local environment and the contact form 7 pop up message premium plug in that I got from the enviro marketplace.
Now that I have those two plug ins activated I can go up under contact in the menu and look at the contact
forms that I have already contact form has a already populated form that they make for you a standard
form that has name email and subject line and message as a text area and we'll be editing this contact
form as we did before to place it on our contact form page.
Here's a small challenge for you in addition to the name and email.
Let's collect a telephone number for people that want to fill out this form as well and let's make it
required then edit the mail that gets sent to you to populate that e-mail with the telephone number
for a video now and give it a try.
I hope you did well with that.
Here's how I do it.
I go to the form here and the first thing I'm gonna do is after your email required including the paragraph
tags I mean I hit Control C and copy that and paste it in here and label it with your phone number.
OK.
Now instead of e-mail your email that code short code is going to be different so I'm going to click
the telephone.
I'm in a click required field and I'm just going to leave it as the default and I can say insert tag
inserted where the code was.
In fact if I save this first this might be easier.
I go to mail right here and I can select that one.
Now that it knows that it is there so name email subject and just blow the message body
type phone number
and place it there.
Now save the contact for great.
I hope you come through as easily as I did.
Let's go and look at the pop up message at ONS tab because we've activated the pop up message at.
We were able to choose from these pop up message add ons instead of having messages that just appear
below the submit button.
Any of these messages will be displayed when the person hits the submit button.
But instead of just a small little text message these pop ups will have a nice big impact with their
colors.
So let's pick a color that matches I like this blue with the green button and the white lettering.
So if I just click that and hit save we can test that in a moment.
Now I'd just like to show you quickly where I got this pop up maß message add ons plug in from the Vado
marketplace and Vodacom.
I can click here and go to the Vado market and I'll admit I didn't buy this plug in.
By being a member of the and Vado marketplace and having an account it was one of their freebies that
they were giving away.
And because I use the contact form seven plug in it was a great freebie for me to get.
So if I choose code Kanyon that's where WordPress plugins exist and
I'll just type the title and see if I can find it contact form 7 pop up message.
It's an $11 plug in.
And I got it for free.
But it's part of our premium plugins inside the student's sandbox and it's a nice plug in available
from and Vado next.
Let's populate our contact page with the correct short code and maybe a short message about filling
in the contact form.
So I'll go back to the Wordpress dashboard or go back to the contact form itself and just click there
once and hit Control see where you can right click and of course copy it to the clipboard.
Now go to pages and all pages inside of my wordpress Web site with executive pro and since there's a
bunch here I'm just going to go ahead and do a search.
I want to find that page called contact page.
There it is.
If you have a lot of pages or a lot of posts the search bar up here is very useful inside the Wordpress
dashboard.
So open contact page and let's put instead of this.
You know I'm going to go ahead and erase all that there and put the short code there first but above
it I'd like to say you know use the following form to contact us or whatever message you'd like.
I'll just update that page.
And let's take a look at it and fill out a sample contact form and look at our pop up great.
And the e-mail and the phone number is there subject to message.
And then a send button
just filling out the form here as if I was a customer.
Here's my question.
And when I hit send I get a nice pop up where does the background and I have to read that it's been
sent.
OK.
Now if there was an error that would be very obvious and I could tell what was going on.
Now let's make a contact form that's visually visible on every page of the website including the home
page and even posts and different pages within the Web site in the bottom footer here.
Your challenge is to paste that same short code into a footer widget and arrange your footers so that
it looks good.
Pozza video now and give it a try.
How'd it go.
Well let's see how I get on doing the challenge.
I go back to the Wordpress dashboard.
I'm going to want to use the Customize there so that I can see in live editing mode what my changes
look like as I go.
And I'll go to widgets and I'm going to edit.
Let's see if I scroll down to the bottom.
I think I'll leave the company profile.
I can get rid of this recent posts and potentially put that contact form straight in the middle here
and see what it looks like there.
So footer number two I'm going to remove that from footer widget to area and I'm going to add a widget.
And the way I'll put my contact form in there is I'll just make a text widget and placed that sure code
that I had pasted into our contact page.
Here's a text widget I could title it.
Contact us and in the content.
I'll paste that form and let's see what it looks like.
Nice.
Now of course it's very long.
So what can I do.
This isn't bad.
You know this is visible on say every page of the Web site if I look at just a page you know as you
scroll down the page yeah there's the contact form.
Now it's pretty long so what I might do is play some more content inside of the contact area inside
of the footer widgets that I have a little more information down here maybe a listing of recent posts
would be a good idea or some more content over here on the right side as well.
In this video you added a contact form to the contact page as well as to the footer so it's visible
on every page site wide.
You also chose a color scheme for the premium add on pop up message for contact form 7 in the next chapter
will start a fresh new project inside the student sandbox and create a modern scrolling home page layout
using another Genesys premium child theme will explore the home page layouts that studio press uses
in some of their child themes and populate our site with a custom post type using the custom press premium
plugin