Skip to main content
  • Creating a Contact Form with WordPress Plugins
  • Creating a Contact Form with WordPress Plugins

Video:

 

 

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.