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 3 – Style the Contact Form Using BYOB Thesis Contact Form 7 Styles Plugin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Applies to - ,

Download and Install Thesis Contact Form 7 Styles Plugin

You can download my plugin from last week’s lesson because I thought I was going to get to this done last week. The plugin is in Lesson Resources. There’s this “Download Thesis Contact Form 7 Styles Plugin (beta version)”, so you can just download that. Once you’ve got it downloaded, you just install it just like any other plugin.

Go ahead and click install, activate the plugin and go back over to Appearance and Widgets. What this does is it creates a widget called “BYOB Contact Form” and the widget gives you a chance to change the title, to decide whether or not you’re going to display on the form or not. We’re going to display it and put the contact form ID Number in this field.

Choosing a Form Style

In this case, the ID is 171. that You can see that from this section here and you can choose a form style. We haven’t created any form style so there’s no form style to choose but if we go ahead and hit Save, come back over to our sample page, we have a second contact form there exactly the same as the first one until we start styling it. I’m going to get rid of this.

In This contact form, because it’s inside of the widget, it can be styled using one of the widget styles that we created using the Widget Styles Plugin. You could hit Save there, I just chose widget style 2, maybe widgets style 2 wasn’t the one, maybe it was widget style 1. “We love helping small business”, that’s style 1, that’s what it was.

Choices In Styling The Form

You can use the other plugin partially to style it but we’re not going to do that, we’re going to use the plugin itself to at least to contribute to the style. We’re going to use Thesis Theme Default for the styling there. Come over to BYOB Thesis Plugins and we have our Contact Form Styles plugin.

This follows a very familiar pattern, that is you start off by choosing the number of styles you want. We’re just going to have 1 contact form style at the moment, and hit Save. Once you’ve chosen how many contact form styles you want, you can scope the things out that you want to change.

In this case, we could customize the form background. We could use a background color, we could use a form border, we could do a drop shadow, rounded corners, padding on the inside, we could customize the margin and then we have the opportunity to style some of the other elements, for example we could customize the heading padding.

We’ll leave the typical fonts alone but we may need to come back in here and customize what we do. We need to customize the text input field and the text area input field because they’re too wide at the moment and we need to make them narrower. Now we hit Save options, all the choices we’ve made will appear and we can customize those settings.

Customize Fonts and Color

For example, let’s do 2 pixels wide and use a dark gray, we’ll make it solid, our drop shadow will be 5, 5, a dark gray, we’ll do 20 pixels for rounded corners, our overall padding, let’s give ourselves 20 pixels of typical padding all the way around, our heading font style is Arial at 22 pixels and we’ll make our font color pink for the moment. We’ll make it normal spacing, remove all caps and center the heading text. Let’s hit Save, come back over here and refresh this.

We haven’t selected the style so we’ll come back over to Appearance and Widgets. Now that we’ve created the style, we have to tell the contact form that we want to use that style because right now, it says, “No Form Style”, so we’ll say, “Contact Form Style 1”, that’s our style and hit Save, come back over here and refresh it. There we go, now we have a contact form styled the way we might like it.

Actually, there’s not really very much change we need to make to this. We could probably give ourselves 25 pixels of padding on the left and instead of 20, I’ll just shove that over a bit at which point we might be good without changing the widths of these. We said that we wanted to customize the text input form field and right now the only thing you can do with that is set its width.

Instead of doing that, let’s just turn those off, we won’t customize the text input field and the text area input field but we will customize the heading padding. That’s good, we’ll do that.

Customize the Heading

Let’s take a quick look at our Widget Styles Plugin. I want to see what color we chose for our heading. Heading font style and number 1, this is our color. We’ll copy that color, make it bold and give ourselves 20 pixels of bottom padding. We’ll do exactly the same thing here, our heading font style color will be that, we’re going to make it bold, we’ll give ourselves 20 pixels of bottom padding and we should adjust that overall padding on the left so maybe give it 25 pixels, hit Save and refresh this. Our 20 pixels of padding didn’t actually take here.

Like I said this is a beta version of it and I’ve got a couple of things to work out yet obviously but moving that over 5 pixels probably split it just fine. We could move it a bit or we could make these things a little bit wider using that other option to move them over. We can also change the style of text and the size of text if we choose but at the moment, we’re not going to bother with that.

Customize the Submit Button

We are going to change up this “Send Us A Note” because that looks a little plain. We’ll use that color again so we’re going to come back over to the contact form settings and under Customization Options, there’s a bunch we can do about our submit button.

We’re going to customize the button font, we’re not going to customize its height and width but we are going to customize its padding which will have a similar effect. We’ll leave the margin alone for a moment but we are going to customize its background. I think we’ll leave the border alone but we will do a drop shadow and round the corners.

In our text style, we’d like to bring this up a bit so I’m going to bring it up to 16 pixels. The white is a good color but in terms of a hover color, I’m going to make it a darker gray. We don’t need to worry about a line height, if this thing was going to turn into more than 1 line, we worry about line height but we’re not going to do that here.

Standard and Hover Shadows

In terms of bottom padding, we’ll give our top and bottom padding 10 pixels but we’ll give our left and right padding 20 pixels. We’re going to customize the background color for the link and for the hover. You have two different sets of shadows to set here, whenever there’s a standard shadow, the second one is the hover shadow.

The reason I give you both options is because I like it when it looks like the button is being pressed when you hover over it and one thing to do there is to decrease the amount of shadow. If we say 5 and 5 and make it a dark gray, then 2 and 2 and to make it a darker gray, that’s going to make it look like it’s being pressed. We’ll take 20 pixels for the rounded corners and we’ll hit Save.

This is what it looks like all by its lonesome right now and you do get that appearance of pressing it down when you hover it. Our link background color is going to be that red again, that heading font style color. The submit button hover color, I’m just going to make it a little darker and that 20 pixels of padding is too much so we’re going to take that down to 10.

Getting Rid of the Borders

One of the other things I want to do is get rid of the border. There is that border around this so I’m going to dump the border and we’ll do that under Customization Options, I’m down to Submit Button Border and we’ll get to our border style. We’re just going to remove all borders.

You can “Configure each link state border separately”, you can configure each border differently just like any of my other plugins. There’s tons of flexibility with this and I’m trying to show some of the simple functionality that’s available with the plugin. Those borders are gone and with those borders gone, maybe we even make that drop shadow just a tad smaller so instead of 5, we do 3 and instead of 2, we do 1, hit Save and refresh.

Creating the Two Column Contact Form In the Footer

That’s my new little plugin for customizing Contact Form 7. We could actually have made these colors that green, I suppose that might not have been a bad idea but we won’t bother with it now. In any case, that’s how to use Contact Form 7 and how to use my plugin to style the contact form.

I’m going to show on Wednesday how to create the contact form that I did here. If we come back over and look at what I did once upon a time, I’ve got this 2-Column Contact Form right here. I thought I was going to be able to make the plugin do this but I ran out of time so I’m going to demonstrate on Wednesday how to create this contact form with Contact Form 7.

That is Wednesday during one of my live sessions. That video will be available but it will take a little bit of HTML work on somebody’s part in order to make this work.

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