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 is straightforward to use, in fact, when we install it there is even a prefabricated contact form that you can put in onto a page. We offer pre-designed contact forms as part of our white label web design services
I will also show you how also to customize that to extend it a little bit and how to create your own new form. So, here we are in a WordPress website dashboard, and the first thing we have to do is install the contact form 7 plugin. We hover over Plugins on the Left, and we click on add new in the search bar. We search for contact form 7. Click on install and then activate the plugin.
There are a lot of other contact form plugins as well so if you prefer a different one go ahead and use. Just know that this tutorial is specific to contact form 7 and 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. If we click on contact forms underneath the contact menu, we see that one form has been created already, and it gives us a shortcode. That shortcode we need to install this form on a page, but if we look at the form by clicking edit, we’ll see it’s basic.
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, the third field is the subject, and the, fourth field is the message.
This form is asking for a name, email, subject, and message which is pretty much what all contact forms on all websites ask. So, what I’m going to do with this form is show you how to integrate that onto a page.
What you want to do is copy this shortcode. Add a new page by hovering over pages, and clicking add new. We will call this page contact us and we will paste, that shortcode into the page and click publish.
If we go and view this page by clicking the view link or the view page link, we will see that there’s a contact form on the page. That’s how easy it is to create the contact us page.
If you just want to use this generic contact form now then so be it. Should we want to customize it, we go back to that form that was created for us when we installed the plug-in and click on edit.
We’re going to look at some of the additional settings that you can set in regard to this form. On the form tab, we have the basic form structure and you can add other variables on other fields.
I’ll get into that in 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 where the email is sent once the form is submitted. The from field is where the email will be coming from. This can be beneficial from a lead tracking perspective.
It will also say the name of the person who sent it. Included will also be the subject that they entered into 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 they enter. Simple enough.
It will also say this email was sent from the contact form on whichever website it came from, and this is all set up for you already which is very nice. You can add anything you want however you will be the only one who sees this.
You or whoever receives your contact form emails could receive specific instructions. For example, if 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.
If we go to the messages tab there are success and error messages that are shown during the form fill. If the sender’s message was sent successfully here’s the message of the when your message was sent successfully.
Above every field, it says when this message is shown so you can go through these and customize them. There’s quite a few. We are not going to list them all here because you can you can read from the video. Check out the italicized sentences and then you customize the message that you want when that situation occurs.
We also have the additional Settings tab where you can add customization code snippets. If you are looking for more details, see the additional settings link. The actions you can take with the additional settings are fairly limited by default, but you can extend these forms in other ways.
For example, we can add more fields. In this case, as an example, I’m going to add a drop-down menu where people can tell us where they found our website.
First, I’m going to copy and paste one of these entries. I am just going to copy this last one and paste it right beneath itself. We will change the text to “how did you find our website”. You can check out the shortcode that generates the text field from the previous example or the previous entry.
I want to delete that and keep our cursor there and click on the drop-down 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 don’t need to change that, and the options, you can add as many as you want
I’m just going to add these three options for the drop-down menu; Google, email, a friend told me. You can also allow multiple selections.
In that case, when it should be a drop-down, it would be a box that shows all the menu items and they can select multiple items by holding down the control key. I’m just going to keep it as a drop-down where they can only select one, and the first option I’m going to keep as blank.
Then I’m going to click on insert tag because I’m happy with those options, and this will insert the tag’s shortcode into the form. We 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.
We should have a drop-down added. Notice the “how did you find our website” with the drop-down options Google, email, a friend told me.
If you are wondering why this is so wide, this is the Aveda theme. The beta theme adds that style set to make to make a more consistent look throughout all the fields, thus all the fields are so wide.
So, be mindful of your theme when you input this as it may look different. If we go back to the contact form we see we’re not quite done yet.
We’ve added this field but we haven’t added that variable to the email that’s generated when someone submits info to your form. You can customize your form as much as you want, but make sure you click on the mail tab and include those into the message body of your email or subject line. Otherwise, that information will be lost. That’s really all there is to create a contact form using contact form 7.