Transcript:
We're building this site for the town of word ville and something that's very important in any town
is to be able to get feedback from the people who live there. So, in this video, we're going to set
up a contact form. A way for the residents of word ville to get ahold of the government.
We're going to use a plugin. So let's go to plugins, add new and the one we're going to use is
called ninja forms. Now there are actually several really excellent forms plugins and we'll take a
look at those at the end of this video. I like ninja forms because it's freely available in the
WordPress plug-in repository and it works very well. So let's click install now and activate now.
Right away, there's a pop-up at the top that says please help us improve. If you opted in, some data
about your installation will be sent to "ninjaforms.com". This does not include your form
submissions. You skip this, that's ok. It'll work just fine. I usually click 'allow' because it
helps them know how people are using their plugin.
So now immediately it takes us to the forms admin area and they very thoughtfully created a contact
form for us. I did not create this one. Well you weren't looking but let's click edit. Our form will
have a name, email, message and submit, but I'd like to add a couple more fields. So I'm going to
click this plus. Right here, we have the option to add regular old form fields but we also have the
option to add some content-specific fields, like phone.
You'll note that it put it below submit and I actually want it up here, so I'm just gonna drag it
right there. Now each field has a setting box right here and you can choose to make it require or
not. I'm going to leave mine not required but you can see over here the email is required. You can
change the label, I'm going to leave mine. It says phone but it could say anything and then label
position could be above the input box, below, to the left, to the right of it or just hidden.
We can do some restrictions, we could disable the input, we could disable autocomplete, if we wanted
etcetera we could give it some custom class names for CSS so that we could do some custom things
with design, we could put in a placeholder and a default value and then we could change the actual
name of this field if we wanted to. Most times I don't mess with any of that stuff but you may find
that you need to.
So now that I've added a phone field, I'm going to go to emails and actions. Now each of these
things is an action that takes place when the form is submitted.
The first thing it does is save it to the database and that just has that action name. The next
thing it does is send an email confirmation so this is email to the person who filled out the form.
You can see right here there's a field for the email address, so that's getting the email address of
the person that filled it out, then there's subject and then there's the message. Now submission
confirmation is pretty bland, so we're going to say one confirmation. Now you see these little
placeholders here for email in all fields and you may wonder where they come from. You can find them
all under this little icon here.
So there are all of our options. Basically any field that exists in the form can be used. Some in
here and then there's email notification, so this would be an email to you or the system
administrator. Here, you can see it's using the system admin email that's found in the settings and
we'll take a look at that when we get to the settings section. Here's a subject, the email message
and then, lastly, there's a success message. This is what appears on the page once they hit submit
so let's change it to say thank you for contacting us, your opinion matters.
There, and you can see here we've got some light HTML editing that we could do. So let's click done
and then we'll go to advanced and, under display settings, you can choose whether or not to display
the form title. In this case, it's contact me. Often, the page title has also contact me and it can
look a little silly to have both, so I actually turned this off. Most times you can clear the
successfully submitted form and hide the form. I recommend those, it makes it go away so that they
can't accidentally submit a second time. You can put some restrictions on it like require user to be
logged in or limit the number of submissions. Then you can do calculations on some of the fields.
Our form doesn't have any numerical fields but you can do all kinds of math if you needed to. So now
I'm going to publish our form. It's built and now I will click this X but it is not yet on a page.
The form simply exists.
Let's go to pages and click add new. I'll call her Page feedback then we put a little text in here
and then there are a couple of different ways we can get our form on this page. There's a meta box
here where we could append a ninja form and it would simply stick it at the bottom of the page. I
usually don't like to do that because often I like to put a little text under the form as well.
So what we want to do, actually, is go back to the forms page and then right here is what's called
a shortcode. You simply copy that and come over here and paste it right there.
Now we click publish and let's view our page. There it is: your voice is important in building our
community, please feel free to send a message whenever you feel the need. Fields marked with an
asterisk are required, so let's just submit without putting anything in and that's what we get. So
let's put in our name and a message and then we'll click Submit and then you can see the form goes
away, says thank you for contacting us, your opinion matters. A confirmation email was sent to
This email address is being protected from spambots. You need JavaScript enabled to view it.'.
That's really all there is to building a simple contact form. In here, you could make as many forms
as you want. If you click add new, you can start with another contact form, a quote request, an
event registration or simply make a brand new one. Add all you wish - your form can be simple or
complex. Now I mentioned that there were several others. Let's take a look at those.
Caldera forms is another really excellent one. I personally know the developers and they're very,
very smart. Both ninja forms and caldera forms are freemium which means the core is free and then
you can buy add-ons to do special custom things. One more that I want to look at. It's called
contact form 7. It's not one of my favorites, but it has an active install base of over 1 million.
It is extremely popular and there are many, many, many add-ons and there's tons of support. So even
though it's not my personal favorite, I usually recommend it to people to try it. 1 million contact
form 7 users can't be wrong.
As I mentioned, there are many forms plugins. The key is to find the one that you like, that you're
comfortable with and that works well for you.