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.

Tags: WordPress

OSTraining

Support

OSTraining teaches people how to build great websites, focusing on PHP platforms such as WordPress, Joomla, Magento and Drupal. You can learn more about there service by visiting OSTraining.com or by subscribing to their Youtube channel.