[MUSIC PLAYING]
Hey everybody.
It's Bjorn from WP Learning Lab.
In this video, I'm
going to show you
how to create your first
contact form, or your second
or your third contact form,
using the Contact Form 7
plugin.
Now, this plugin's
really easy to use.
In fact, when you
install it, it even
has a pre-fabricated
contact form
that you can put in onto a page.
And I will show you how to
also customize that form
to extend it a
little bit and how
to create your own new form.
So here we are in a
WordPress dashboard.
And the first
thing we have to do
is install the
Contact Form 7 plugin.
So we have all of our
plugins on the left.
I'm going to click on Add New.
In the Search bar, we
search for Contact Form 7.
This is it right here.
Click on Install, and
then activate the plugin.
As you saw on the
previous page, there
are a lot of other contact
form plugins as well.
So if you prefer a different
one, go ahead and use that.
It's just that this tutorial
video is specific to Contact
Form 7 and that
what you learn here
may not be transferable
to the other ones.
Now that Contact
Form 7 is installed,
it added a menu item
called Contact on the left.
And if we click on Contact Forms
underneath the Contact menu,
we see that one form has
been created already.
And it gives us a short code.
This is a short code we need
to install this form on a page.
But if we go and look at
the form by clicking Edit,
we will see it's a
very simple form.
And it's actually what
a regular contact form
looks like on most websites.
The first field is your name.
The second field is your email.
Third field is the subject.
And the fourth field
is the message.
So this form is asking for
a name, email, subject,
and message, which is
pretty much what all contact
forms on all websites ask for.
So what I'm going
to do with this form
is to show you how to
integrate that onto a page.
And what you want to do
is copy this short code,
highlight it, copy it, add a
new page by hovering over Pages,
and clicking Add New.
We will call this
page Contact Us.
And we will paste that short
code right into the page
and click Publish.
Now, if we go and view this
page by clicking the View
link or the View
Page link, we will
see there's a contact
form on the page.
And that's how easy it is
to create the Contact Us
page if you just want to use
this generic contact form.
Now, if we go back to the
plugin or go back to that form
that we created--
sorry that was created for us
when we installed the plugin--
and click on Edit,
we're going to look
at some of the
additional settings
that you can set in
regards to this form.
So on the Form tab, we have
the basic form structure.
And you can add other
variables and other fields
that I'll get into it a minute.
But if we click on
the Mail tab, we
have the settings for
where the email is sent.
So the first field is the To, so
where the email is sent to once
the form is submitted.
The From field is where the
email will be coming from.
So when you receive the email,
this is what it will say.
It will say the name of
the person who sent it
from the website domain.
It will include the subject
that they entered in the form.
The Reply To email will be
the email that they entered.
And the body will be their name,
their email, the subject line,
and the message.
And then it says, "this email
is sent from the contact
form on this website."
So this is all set up for you
already, which is very nice.
But you could add--
in the message body, you
could add anything you want.
Howdy.
You will be the only one
who sees this, or whoever
receives your contact form
emails are the only one who
sees this.
So you could have other
instructions in here.
Say you have an assistant
that deals with the emails
from your website, you could
have instructions on here
on what to do with emails
from the Contact form.
And if we go to
the Messages tab,
these are a success
and error messages
that are shown during
the form fill out.
So if the center's message
was sent successfully,
here is the message
that's displayed.
"Your message was
sent successfully.
Thanks."
And above every field, it says,
"when this message is shown--"
and so you can go through
these and customize them.
There's quite a few.
I'm not going to read
them all out loud for you
because you can read.
So you just go in, you read
what the italicized sentence is,
and then you
customize the message
that you want when
that situation occurs.
Then we have the
Additional Settings tab
where you can add
customization code snippets.
And for more details, see
the Additional Settings link.
So the stuff you can do with the
additional settings is fairly
limited by default. But
you can extend these forms
in other ways.
For example, we can
add more fields.
So what we can do is add another
field to our Contact form.
So in this case,
as an example, I'm
going to add a dropdown menu
where people can tell us
where they found our website.
So first thing I'm going
to do is copy and paste one
of these entries, just
copy this last one.
We'll paste it right
beneath itself.
And we will change the text to
"How did you find our website?"
And this is the short code
that generates the text
field from the previous
example or the previous entry.
We want to delete that, and
keep our cursor there, and click
on the Dropdown menu option.
We're going to make
it a required field.
The menu name is used in
the back end of the form,
so you need to change that.
And the options, you can
add as many as you want.
I'm just going to add Google,
email, a friend told me.
So these are the three
options I'm going
to have for the drop down menu.
And what you can do is
allow multiple selections.
In that case, it won't
actually be a dropdown,
it'll be a box that
shows all the menu items.
And they can select multiple by
holding down the Control key.
I'm just going to
keep it as a dropdown
where they can only select one.
And the first option I'm
going to keep as blank.
And then I'm going to
click on Insert tag
because I'm happy
with those options.
And this will insert the tag,
the short code, into the form.
So here's the short code.
And click on Save
to save the changes.
And we'll go back to
our contact form, which
is open in another tab,
and refresh the page.
And we should have
a dropdown added.
And there it is.
How did you find our website?
With the dropdown,
options are Google, email,
a friend told me.
Then I'd be wondering
why this is so wide.
This is the Avada theme.
And the Avada theme adds that
style just to make that so wide
and make a more consistent
look throughout all the fields.
That's where all the
fields are so wide.
So your theme when you input
this, it may look different.
If we go back to the contact
form, we're not quite done yet.
We've added this field, but
we haven't added that variable
to the mail, to the
email that's generated.
We need to copy the
name of the field.
So the name that was input
in-- or on that pop-up that was
[? auto-generated ?] is Menu941.
We need to copy that,
go over to the mail,
and then open and
closing square brackets
and paste that name
into those brackets.
And above it, we
can say something
like "This is how I
found your website."
Now that will be
populated into the email.
So this will either
say email, or a Google,
or a friend told me.
So by adding one of these
options, or all of them,
or as many as you want
of each to your field,
you can customize your
form as much as you want.
But when you make
those form fields,
you have to make sure
you click on the Mail tab
and include those
into the message
body of your email or the
subject line, otherwise
that information will be lost.
And that's really all there
is to creating a Contact
form using Contact Form 7.
I hope this video helps you.
My name is Bjorn Allpas
from the WP Learning Lab.
Please make sure you like
this video if it helped you.
Subscribe to our
YouTube channel,
check out our
social media feeds,
and check out WPLearningLab.com
where we write about WordPress
every single day.
Talk to you soon.
