In this video what configured the contact form plug in and insert it into the contact page.
This will give visitors a way to contact the website owner through email using a common form on the
web site using a contact form like this is a professional untidy way of communicating with web site
visitors and adds value to the Web site.
You'll learn how to use the contact form 7 plug in its many possible configurations and how to embed
a form anywhere on a Web site.
First taking a look at the dashboard you know we keep seeing this.
Welcome to WordPress.
You know welcome screen but you can dismiss it and then it'll go away.
Now under screen options there's always checkboxes for what you need or what you don't need on your
desktop dashboard for wordpress.
And so if you check that box that will come back when you dismiss it it and checks it.
Here's your challenge for this video.
Since we have the contact form 7 plug in activated we have the contact menu bar over here on the left
hand side.
Go ahead and add a contact form configure it a little bit and inserted into the contact page for the
video now and give it a try.
How to go.
Here's how I'd do it.
Go over to contact forms and you can see that contact form 7 also has a dismissable message but it already
populates the plug in with a contact form that's been made already.
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.
But if I look at the contact form one I might just open that and use it for my contact form.
I'm just going to put contact me because that will match the name of the page where I'm in a place as
contact form and then you can see contact form 7 gives you a few tabs across the top.
One is the form the next is the mail tab and this will show you how your message is going to be mailed
out to you and then you can actually attach a second message down here that could be used to respond
to the person that filled out the form showing them what they sent you.
Messages are when the form gets sent.
Contact form 7 will open up a message to the user to say what happened whether there was an error or
whether the form was sent and then there are some additional settings.
If you need customisation code snippets that you've gotten from around the internet or other things
like integrations with mail servers and things like that.
But for now the simple form is probably find a name and email a subject a message and a send button.
I might leave it as is for now and when I come here I can see that I would like to receive the messages
at this email address.
My name Sure.
The subject and then it'll put all these things in the body of my message and the default message sounds
great.
I'll just hit save since I changed the form name and if I just click once in a shortcut here I can hit
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
this looks like.
With a short code that surrounded by brackets the way that that that is you don't have to place it in
either the text tab or as text right here.
What you can do is just paste the contact form as it is with the brackets straight into the body area.
Update the page and then let's take a look.
Refresh the page
create a nice looking contact form the button looks nice.
Tell me which fields are required.
Great.
Now if you're building this site in your local development environment using map the way that I am We're
not going to be able to actually test what this e-mail looks like when it sends because we don't have
a mail server installed on our local computer.
There are ways to do that.
But when I'm building web sites I'll generally build them at my live server either behind a maintenance
screen or behind a password.
And that way I can test that the contact form works if I am building a site in a local environment like
this.
I'll just place the contact form here and then once I migrate the site to the live server I'll make
sure and test the contact form.
If you do happen to fill it out
and test it let's go ahead and look at what the message says.
Once we hit the send button it's got some little.
Ah there was an error trying to send your message.
Please try again later.
And that's because we're not attached to the Internet and there's no mail server here in my local environment.
In a later chapter we'll be going over transactional emails that WordPress sends from the server marketing
e-mails through a service like MailChimp and other ways of e-mailing through Web sites.
For now though let's just look at other things that we can place within a contact form using the contact
form 7 plug in back under contact contact forms.
I can edit this form and if you remember there were a bunch of different buttons for the form tab here.
Things like e-mail telephone Jor-El's a number a date a text area a dropdown menu and these pieces of
code are necessary to place the form inside the Web site.
But suppose I wanted to do something like a dropdown or maybe radio buttons I wanted to have I wanted
to choose whether they are male or female
just an example.
But if I hit insert tag There we go.
So just like this is a text area tag this one right here is a radio button that has two choices.
Male and female.
And so what I usually do is just copy and paste other sections so that I have the line break and the
text here
that I want.
And then you've got to close the paragraph tag
right now if I save that contact form.
Because it's pasted into my contact page using this sure code once I change it here it will be changed
on the Web site as well.
But there's one more thing I need to add and that is in the mail area when I send myself an email from
this contact form I want to get that in addition to the message
I also want to know the answer to that other question the gender.
And so if I just scroll up just a little bit since I created another field inside of the contact form.
It gives me what I need the code to place in the mail to give me that information.
Once the users answered that question so I'll just copy paste it here.
And save the for
great.
That looks nice.
So in this way you can really build a contact form for any purpose using so many different types of
things like check boxes radio buttons.
There's quizzes recapture to prevent comment spam and things like that.
Now suppose I wanted to place that contact form on the sidebar of every page on the site.
It's as simple as placing a short code inside of a widget on the side bar.
Let's go ahead and do that real quick grab copy the short code again.
Let's go to appearance widgets.
And then to place any kind of item HDMI out or text or even images inside of a sidebar widget you can
use a text widget or drag one over it's place at there below the search bar but above the pages navigation
I can title it.
Contact me
and that's just place that shortcut there.
All right I've saved that widget.
Now refresh the page here and we'll see what it looks like.
Great Again a nice looking form formatted for the text widget.
Now I don't think I want to have the contact form on the sidebar and be present on every page of the
Web site so I'm going to go ahead and drag it out of there.
One thing is that there's an available widgets section on the page and then in active widgets section
that you can use to save widgets with their current settings.
If you like so I'll take that.
Contact me here if I just make the available widgets a little bit smaller.
Now the inactive widgets will keep their settings.
So if I just drag the contact me text widget across WordPress we'll save it there for me if I ever want
to activate it later.
So if I refresh the page I can see that that will be removed from the sidebar in this lesson.
You've configured a simple contact form using the contact form 7 plug in and checked out the different
types of information you could collect in a form plus you use the short code to place the form on the
Contact page as well as in a sidebar widget in the next video.
We'll continue to build out the contact page with an interactive location map using the Google Maps
Forgan Let's go