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 11 – Part 6 – Add a Contact Form to Genesis Using Contact Form 7

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

The next thing we’re going to do is create a contact form and put it on our page. We go back over to plugins and say, Add New, we will search for Contact Form 7 and install it.

Contact Form 7 Plugin

There are lots of other plugins that you could use but Contact Form 7 is very powerful, very easily configured and I chose to make a plugin to style it in Genesis so I think you’ll find it to be very useful here. Install plugin and activate the plugin.

Now, once Contact Form 7 has been installed, you’ll see this contact menu item here. What you do is just click on that and it brings you to the main contact form page and it automatically creates for you a sample contact form. If we are at my site and we look at the contact forms on BYOB Website, come down here to the contact form and select it, what happened there?

I must have an older version installed here because rather than taking me to this overall thing here which we see in this one, it took me to this version where you could see these various contact forms you could choose from in a list here. This is a newer version that I have on my site. Anyway, we’re going to take a look at this default contact form that was created for us.

Contact Form 7 is really well documented so if you look up here, they’ve got a link to their docs and they’ve got all kinds of tutorials. They’ve got quite a bit of useful information here so if you run into a brick wall in something you want to do, this is a great place to come and look. They do have a FAQ and they also have a support forum so you can get support here if you need it.

What you see here is the name of your contact form and this is the place where you can change the name here so instead of Contact Form 1, we’re just going to call it Basic Contact Form. This is the shortcode here that you will use to insert it. When we change this name up here, this title changes as well. When we insert this into a page, we’re going to use this shortcode to do that.

I’ll just go ahead and save this now. If we come back over and just look at our contact list, now it’s called the Basic Contact Form and you can just copy that shortcode right here. Let’s go back over to the basic contact form.

Generate Contact Form Fields

Now, the basic contact form has number fields. This is the form area and it’s divided into two parts. First, the form itself and the second is the form-generating tag area. I have a lot of videos on the site on how to use Contact Form 7 and there are plenty of them that show you how to generate tags using this generate-tag field. I want you to learn more about how to do this, just search the site for Contact Form 7 and look at some of the tutorials about that.

Be that as it may, this is where you can sort of automatically generate additional fields for your form if you’re starting from scratch. The form is just standard HTML so you can see it’s got a label here in a paragraph tag with the carriage return or a line break then it’s got this Contact Form 7 tag that looks like a shortcode, it’s text* your-name and the same thing for email address, subject and message. That’s the form that’s going to be generated.

Contact Form Email Setup

The next thing is the mail. This is the mail that the system sends to you, the website owner. Here’s the email, you want the email to send to, here’s it’s from your-name and your-email which in this case, stand for your name and your email. These tags are essentially the same, your name, your email are represented by [your name]

You can put any kind of text in here you want. This piece of text here reminds you where you got this email from and I’m going to show you one of those emails. This is an email sent from a Contact Form 7 contact form. There is the [your-name] and the [your-email] and I actually filled out the subject myself. I said it right down here, Subject: Support Question so I would know that it came from my Support Question Form as oppose to some other forms. There’s the message that says it was sent from a contact form and I could’ve identified the contact form if I wanted to in this note.

Setup Email (2)

If you watched one of the other tutorials, you’ll see that I show you how to use mail (2) and this is the mail that gets sent to the person who posted this. If you post a question to me from one of these contact forms, you’ll get an email back from me saying I got your email, I’ll respond to it right away. That email is automatically sent and it gets filled out here in mail (2). Take a look at the videos that I have on Contact Form 7 and you’ll see how to use that.

The next are message and this is really a way for you to customize things like validation errors or your message was sent successfully things. There are different kinds of error messages and validation errors that you can add to this then there’s this additional settings section. You can ignore the additional settings section for the time being but once you get more advanced on how to use Contact Form 7, that additional settings section will become useful.

We’re just going to start this without really making any real modifications to this form. We’re going to save the form and insert it. Let’s find a page to insert it on, let’s do it on our About Us page. We’ll edit that page, maybe right here in the middle of the text we’ll put our contact form. We place our shortcode in there, hit update, view the page and there’s our contact form. This send button gets its color from the Genesis Theme Settings so if I had green instead of red, that button color would’ve changed to green.

Create Required Fields

Now, there are a couple of things I wanted to show you about this. One of them is how to make these fields required. If we come back over to our Contact Form 7 and if you look closely at this, you’ll see there’s this asterisk. By placing that asterisk there, you are indicating that you want this field to be required. For example, we could make subject required and if we’re going to do this, we would just insert an asterisk there then your subject would be required.

What it means is that the user will be prompted to fill the form in before the thing gets sent. Now, you can see this so I’ll put my name in and if I hit send, it’s going to say, “Please fill in the required fields”, it’s not going to let this happen. That is the validation error so those are the messages that you can edit if you wish and that’s what happens if you make something required and they don’t put something in. In this case right now, your name, your email and subject are all required and your message is not required. That’s how you make it required.

Use of Akismet to Prevent Spam

If you know anything about websites, you know these forms can collect spam because the spam bots can’t tell the difference between a comment form and a contact form so the spam bots just jump a bunch of trash in, hit submit and then your inbox can get full of trash that way from your contact form. The thing I use to prevent spam on my site is Akismet and as luck would have it, I can use Akismet with Contact Form 7 to protect the form.

Now, if you don’t want to use Akismet, you can also use captcha fields and things like that. The other videos that I have on Contact Form 7 will show you how to do that but I am going to show you how to add the Akismet to this. I’m just going to generate a tag with the text field and under Akismet, I’m going to say this field requires the author’s name. The deal here is that Akismet can check 3 fields. It can check the author’s name, it can check the author’s URL and if I went on an email field, then I could test their email address.

You can see what happens here is that it generates this new thing and it adds to that Akismet:author_email. What I’m going to do is just copy that and for the email section, I’m going to put that right here, your-email akismet:author_email.

If I go back to my text field, it’s akismet:author so here’s the author name. I’m going to protect by author name and author email. We’re not requiring a URL here so we won’t be validating the URL but this will test Akismet’s database for name and email address and will reject email that’s in the spam database so it’s a pretty handy feature, hit save.

Change the Text and the Submit Button

One other thing I want to show you is how to change the text and the submit button. Right now, in double quotes it says, “Send” but you can easily say, “Drop Us a Line” or “Ask Your Question” or just about anything you want, you don’t have to say, “Send” or “Submit”. That was putting in the page, what happens if we try to put it in the text widget because that’s the way this is suppose to work so it was to put this both in pages, posts and text widgets so let’s test that.

We’ll grab the shortcode, come over here to Appearance and Widgets, we will open up our Primary Sidebar, grab a text widget and put it right up above “Sign up for Our Newsletter”, paste it there. I’m going to say, “Contact Us”, hit save, refresh this and now we have our contact form in the sidebar although the fields are too long, they don’t fit there.

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