Build Your Own Business Website header image

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

Lesson 13 – Part 2 – Add a Contact Form Using Contact Form 7

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to - ,

Why Use a Contact Form?

Let’s move on to the next step which is How to Add a Contact Form Using Contact Form 7 to your business/professional services Thesis theme website. A contact form can be a very important part of your site. I get lots of email from my contact forms and it can be a very useful way for you to engage with people who are interested in your services or who may want to get a quote from you on something or who may want to ask you a question. The contact form is a perfect system for doing that.

The contact form also needs to be protected from spam because in the same way that comment forms collect spam, contact forms also collect spam. We’re going to use the Akismet to protect ourselves from that as well.

Install Contact Form 7

The first thing to do is simply to install the plugin. I’m going to Add New and install Contact Form 7. There are lots of contact form plugins out there but I like Contact Form 7 because it’s relatively easy to use and also, because I’ve written a plugin for it that will make it easy to style. We activate the plugin.

There’s a lot of information on BYOB Website about Contact Form 7 and we’re not going to cover all of that here tonight so I encourage you to learn more about Contact Form 7 by just searching for it on the site and watching the other videos we have on it. We are doing the unveiling tonight of the new plugin so there won’t be anything about the plugin anywhere else but here.

Once you’ve installed Contact Form 7, you have this contact dialog here that shows up and we’re going to create our first contact form. This is the main contact form editing screen, over here in the upper right hand corner you can see they’ve got links to their site, to their documents and to their FAQ and there is lots of good information in this.

This is a pretty well-documented plugin so if you have questions about using it that don’t get answered or don’t get answered by looking at other videos, this is a great place to go to get answers because there is lots of good written information here.

Over here is the list of contact forms that already exist and this thing comes with one contact form named Contact Form 1 already created but if we added a new contact form, its name would show up over here beside this. This is the Add New button but this is going to be your list along here of contact forms.

Give Your Contact Form a Descriptive Name

In fact, we can just come over to my site for a second and look at that. You see I’ve got “Ask Me A Question”, “Lesson Question”, “Support Question”, “Wednesday Session 1 Question” and so on and so forth. This is how additional contact forms stack up. Then you have your contact form name, this is a name you can certainly change to be descriptive. That’s what I did over here so that it was clear to me which one of my forms I happen to be looking at without having to open them. It’s a good idea to give it a descriptive name.

You can have a “Basic Contact Form”, click out of that and now we’ve got a name here, “Basic Contact Form”. This is the shortcode that you use to insert the contact form and we’ll demonstrate inserting the contact form here in awhile but this is where that exists. If we hit Save, that name is going to change there. There you go, “Basic Contact Form”.

How to Use the Form

Then you come into the form proper and this is the place where the form is actually created. It has two panels, it has the form panel where you enter a combination of HTML and/or Contact Form 7 tags then you have the tag generator side where you can generate tags and fill out settings for generating tags.

Now, because this one is automatically created with your name, your email, subject, your message and a submit button, this is the form we’re going to keep as it sits right there.We’re not going to generate any tags and link but that’s what’s going on here, you’ve got your HTML area and you’ve got your tag generation area.

Mail that Gets Sent To You

The next thing you have is the mail, this is the mail that get sent to you. This is the mail, rick@byobwebsite and the mail is going to be sent to rick@byobwebsite. It’s going to be from your name and your name is this up here where it says, “Tag Your Name”, so from the person who sent it using their email address, which is the email address that was added up here and then the subject which is what we set it here.

Then you have the message body so again from the person who sent it and their email, here’s their subject, here’s their message or their question and here’s a thing that reminds you where this happens to come from. This is what the email looks like when somebody sends a question.

This is an example of a request that I got here a couple of days ago. The subject was, “Import CSV to Shopp” and Xavier sent it to me, there is his email address. “Hi Rick, Which way do you use to bulk import into Shopp with CSV files?”, and then the message here to me that said the mail was sent via such and such. That’s what that first email is.

Email Sent to the Person Who Made the Request

The second email is an email that can be sent to the person who made the original request. This email would go to the person who filled out the contact form and if you fill out one of my contact forms, you’ll see what my response emails look like. They essentially thank you for sending me the question and I assure you that I’m going to get back to you as quickly as possible. That’s what happens with mail number 2.

Messages Displayed in the Contact Form

Then we have these messages. These messages are the messages that are displayed in the contact form when there’s a validation issue and here it says, “Your Message Was Sent Successfully”. This message is displayed when the message is sent, this one is displayed when there’s a validation error. They are just all kinds of different error messages here that we can customize.

Customize Error Messages

For example, instead of saying, “Your message was sent successfully. Thanks”, we can say, “Your message was sent. We’re going to get right back to you”. It’s a place for you to change that kind of stuff and the additional settings is something that you can safely ignore at the moment. If you go back and watch the videos that I’ve done on Contact Form 7, you’ll learn how to use the generate tag and how to customize mail to that kind of stuff.

Contact Form 7 is actually very powerful and can produce relatively complex forms. In this form, we have a combination of HTML and Contact Form 7 tags. You don’t really need to use any HTML but it makes the most sense to do that. What they’ve done here is they’ve taken your name and wrapped it in a paragraph tag and then put a line break in between your name and the field so that your name sits on top of the field. The same thing is true with your email and the email field.

Four Different Types of Input

We have 3 different types of input that are showing up here. Actually, we have 4 different types of input, although the text input and the email input are essentially the same. The one difference is that in an email input, if you’re using it with a mobile phone, devices that are smart enough will switch the keypad for you so it will give you an opportunity to have an ampersand and a .com that are easily inserted into the email rather than the standard keyboard.

Nevertheless, we’ve got a text input, an email input which is very much like a text input. Another text input is a text area input and the difference between the text and the text area is essentially this. This is a text input field, this is just a single line. This is a text area input field which is essentially a block that allows you to enter more stuff. That’s the difference between the text input and a text area input and that’s going to become important when we start talking about styling it.

A fourth type of input field that you have is the submit input or the submit button. In pressing the submit button, that immediately sends the file and does the validation. That’s what’s going on here inside of this form, each one of those groups is set inside of a p tag or a paragraph tag. Depending upon where it is on the site, that paragraph tag may have padding, margin or different styling.

The first thing we’re going to do here is put the form in the site. I’m going to put it in a page to start off with. I’m just going to stick it in a sample page because there’s simply not any place I really want to show it in a page like this.

All you do is paste the code just like that there and you can just paste it in there and hit update. It’s this code that will end up creating the contact form. Here it is, your name, your email, subject, your message and the send button. If you hit the send button without filling these out, you get this validation error messages. That’s the basic arrangement of the form.

Filling Out the Required Fields

There’s a couple of other things I’d like to draw your attention to. One of them is the asterisk right there at the end of text. It means that it has to be filled out, it is a required field. If there’s no asterisk, for example there’s no asterisk in the subject field, then it’s not automatically required. This form does not require you to insert any message or insert any subject but it does require a name and email address. That’s the thing that makes it required.

Adding Akismet Protection to our Form

One of the things that we want to do now that we have Akismet is to add Akismet’s ability to prevent spam to on this form. This is one of the reasons why I like Akismet and Contact Form 7 together because you don’t have to use some kind of weird captcha. You can have very professional-looking form that doesn’t do anything strange but that has excellent spam prevention ability through Akismet and it’s all transparent.

The regular person sending out the email, they don’t have to try and get through a spam filter because it will automatically happen for them. However, Akismet can be applied to 3 different text types of input. The first is where you’re going to put the name, the second is where there’s an email and the third is where there is a URL. All 3 of those things can take an Akismet protection.

I’m just going to take a text field here for just a second and you can see where it says, “Akismet (optional)”, if you check that box, it puts this thing in here, “akismet:author”. That’s what this new text field would look like if we were inserting this new field.

In this case, what we’re going to do is just beside your name, we’re going to type “akismet:author” and then beside the email, we do exactly the same thing here “akismet:author_email” and hit Save. Now we’ve added Akismet protection to our form without having to have some kind of odd captcha thing going on.

Customize Submit Button Text

There’s one other customization that you can do quite easily from here and that is you can customize the text of the submit button. Right here it says, “Send” but you can easily take “Send” and change to, “Send us a note”. If we hit Save, come back over to this sample page and refresh it. Now it says, “Send us a note” instead of “Send”.

It should be evident to you that you can change all of these here, right? Your name, your email, subject, your message. You can just as easily change it by simply taking out “your”. It could be name, email and hit Save because that’s just basic HTML. What you’re doing is change in the text in that section and refresh it. Now it says, “Name and Email” instead of “Your name and email”.

Style Contact Form Using Contact Form 7 Styles Plugin

As it turns out, it’s not the ugliest thing in the world but it’s not all that attractive either so one of the things we’re going to do tonight is style the contact form using my Contact Form 7 Styles plugin. Before we do that, let’s take it out of the page and put in a text widget. That’s the second way that Contact Form 7 intends itself to be used.

It intends two scenarios. One of them is to be put inside the content and the other is to be put inside of a text widget. If we grab text here, drop it in there, we can type up here “Contact Us” as a heading, hit Save, come back over here to our sample page and refresh that. You can see it’s now gone into our sidebar. This is how Contact Form 7 expects itself to be used.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment