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.

Add a Contact Form Using Contact Form 7

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

As part of creating a Professional Services Website you’ll want to have an easy way of potential clients contacting you on the site. For this we’re going to create a contact form. We’ll use it for a several pages on the site but not all pages.

Add Contact Form 7 Plugin

Come over here to plugins and Add New. My favorite free plugin for contact forms is Contact Form 7. There are a million contact forms to choose from but lots of them add extra junk that you don’t need. Then that gets loaded with your forms.

Also, Agility Skin for Thesis 2 comes with styles predefined for Contact Form 7 and so I recommend that you use it.

Contact Form 7 vs Gravity Forms

My favorite paid plugin and it’s actually the one that I use on BYOBWebsite is Gravity Forms. The main difference between Contact Form 7 and Gravity Forms is that Gravity Forms does have a sort of drag and drop builder. It also has lots of advanced functionality but it’s got drag and drop builder and it saves every contact form that is filled out.

Contact Form 7 all by itself doesn’t save each form that is filled out. Instead it just emails you the contact information. And it doesn’t have a drag and drop builder but it’s builder is simple enough that it’s easy to use.

Addon Plugins for Contact Form 7

There are probably a hundred add on plugins for Contact Form 7. There are several of them that will let you save the contact form in your database just like Gravity Forms. And there are even a couple of them that have drag and drop interfaces.

My thinking is that you’ve still got to learn how use that or the regular interface and I think using the regular interface is just fine. You can do a lot with Contact Form 7 and not have to spend any money on it.

So anyway, we are going to go ahead and install now. You can see it’s got over a million active installs so it’s a very popular plugin.

Autoresponder Function

Robin asks me “what about an autoresponder for the form?”. Well, Contact Form 7 does have a built in autoresponder. That is, it will send an email. We’ll look at how to create that email here in a minute but it will send an email both to you telling you that somebody asked you this question or filled out this form and it will also send an email to them telling them that you received their email and you will get back to them soon kind of message. You can create that automatic response.

Addon Plugins for Mailing Lists

If you want to add them to say like MailChimp or something like that once they’ve filled out the contact form, you can do that also. There are addons in that plugin section for Contact Form 7 that will add it to AWeber or MailChimp, etc. So if you want to add the contact information to a mailing list you can.

I don’t do it that way. I use Infusionsoft for my email contact information. If someone asks me a question in a contact form on my site I just answer their question. I don’t try to capture their email address and use it for anything else. But if you do want to do that as I said there are addons for Contact Form 7 that will let you do that.

The Contact Form

So, we’ve just installed and activated Contact Form 7 and now you see we’ve got this contact up here. If we go over to Contact Forms you’ll notice that there is a contact form already created.

Edit the Form

And so if you come over here and edit it, it has a your name, your email, a subject and a message. So let’s say that you want to capture a phone number also. What you would do is these little things right here, those are sort of shortcodes for form elements. And I should just go ahead and put this form on. Here’s the shortcode for the form up there.

And I’ll come over here to Appearance and Widgets and we’ll take just a straight text widget. Put the shortcode here. Now when we reload this, here’s our contact form.

Changing Contact Form 7 Width

Let’s move that widget. And let’s put this guy up here and reload the page. So here’s our contact form. Now the irritating thing about Contact Form 7 is if there’s not a specified width in these things then you end up with it being 40 rows long or whatever.

So, you do have to change this if you are using it in the sidebar like this. We’re going to do that now. And we’re going to say size:cols=31 right next to that.

It’s cols for the text area but for these things is size:cols. So you are putting them inside the brackets like this. And then for the text area as I said size doesn’t work, it’s cols. Let’s save this and reload it and now it all fits in there nicely.

So you’ve got this form that’s already set up. It’s button is already configured nicely and everything lines up right. That’s because Agility Skin has built into it the styles that make this work without having any other styles added to it.

How to Add a Phone Number Area

Let’s come back over to our form here and let’s say we want to add the phone number. What I would do here is copy that whole thing, so opening label to closing label. And then come down and paste it. Now instead of your email, just say your phone number. And we won’t make this one required so we can cut that out of the label.

And that also means that we don’t need that here because that’s how you make that required. So what I’m really going to do is just delete that whole thing right there and come over to this.

This is a tag generator and I’m going to insert the telephone tag right there. It’s not going to be required. We’re not going to add any text as a placeholder and we’re not going to give it an attribute, ID or class so it’s just going to be as it is.

We can just insert that there and then again we want the size 31. Let’s save this and reload it. Now you’ve got a phone number and email. These ones are required these are not.

Add Spam Protection to the Contact Form 7

Now if you leave it like that you are going to start getting hundreds of these filled out a day so we’re going to add some spam protection to it.

But first I want to change the button text. I don’t want the button text to say “send”. I want the button text to say “please contact me”. So down here in submit, instead of “send” you can just type in “please contact me”. Then save it and that will change the text in the button.

For autoresponder issues that happens over here in these other tabs. For example, mail. This mail right here is the mail that is sent to you. This is not the email that is sent to the person who filled out the form. This email is already set up as the email sent to you.

We need to change wording here. Rather than “WordPress” I would say “Rick”. If you don’t have an email address here that matches the domain name that it’s being sent from Google can automatically think of it as spam or rather the spam things in the mail client can think of them as spam.

That’s why it’s putting this “from” in place with the actual URL that this is at. Because that prevents it from getting seen as spam.

Now the other thing it does here is it puts in a reply to and the reply to allows you to click on “reply” and instead of going back to yourself the email goes to the person who emailed it. I’m going to put the real email address here like that. And this is going directly to you so it doesn’t matter.

If you want the mail to go to somebody else, say it goes to the person who filled it out, you’d check “use mail 2” and now it’s going to your email. This is the tag for the person’s email who filled out the form. If we go back and look at our form it’s your email. That’s what it’s referring to, this field.

Editing the Messages

So if we come over here to the other one that say’s your email, it’s not you your, this is just the name of the field that they filled out. So, it’s not really rick@byobwebsite.com. So, then in the additional headers you would reply to and again I’m going to put rick@byobwebsite.com.

And then what I would say here is instead of “I received your message”. Say “I received your email and I will respond to you as soon as I possible”. In fact you might say “Thanks for reaching out to me. I received your email and I will respond to you as soon as I possible.”. And then you can just come right down here and put in a signature.

“This email was sent because you filled out the contact form” and then hit save. And now what you have is the email that you are going to get and the email that they are going to get when they fill out a contact form.

You can also edit the messages that are displayed on the page when something happens. For example, if it was sent successfully, “Thank you for your message, it has been sent”. Or if there was a problem sending it or if there were validation issues, you can have another message. So you can adjust those.

Say you wanted for them to be directed to a thank you page once they had filled out the form or something like that, you could put the code snippet here.

If you go over here to this additional settings page on their link you can see they’ve got a bunch of little code snippets. If you look on their support for how to forward it off to a thank you page you’ll see that there is a little snippet that you can add to this section to do that.

In any case we’ve got a contact form done and it’s ready to go.

You can see we did in fact get our emails through here. This is the one that was sent to andersonrickanderson so this was the one that was sent to me. It said “Thanks Rick Anderson for reaching out to me I received your email and will respond as soon as possible.

And then this was the test content that I sent, “This email was sent because you filled out a contact form on etc, etc. This is the autoresponder version of the email. And then this one is the notification version which was sent to me.

Save $200 on Membership Now!

Start learning today for as little as
$0.82 PER DAY!
THIS IS A LIMITED TIME OFFER!
Subscription Options
0 Comments… add one
0 comments… add one

Leave a Comment