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 7 – Style the Contact Form Using BYOB Genesis Contact Form 7 Styles plugin

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

One of the reasons why I wrote a plugin to style Contact Form 7 for the Genesis theme is that there are various stylistic changes that you may want to make when you’re using a contact form. Up until my plugin, the only way for you to change those things was to use a custom.css file. We’re not going to use custom.css to do this, we’re going to use my new plugin, BYOB Genesis Contact Form 7 Styles Plugin.

BYOB Genesis Contact Form 7 Styles Plugin

We’re going to come over to plugins, Add New, upload, choose the file and this is called BYOB Genesis Contact Form 7 Styles plugin. Under the same place, now we have Contact Form Styles to play with so we’ll open that up.

The way this works is you choose how many contact form styles you want and on a big Genesis theme site, you might have a lot of different styles. For the time being, we’re only going to do two. Once you say two, hit save settings and you’ll have options for two.

Next you scope the kinds of changes you want to make to the contact form and once you set those, you save your settings and a whole bunch of new settings are available to you. On this contact form, what I want to do is style the submit button padding and style the form elements which are the text input and the text area input fields. There are sort of 4 big parts to this form.

Customization Features

There’s the overall form which is the wrapper around the form, there is the form heading, there are the various form elements and there’s the submit button. There are all kinds of customization you can do with the submit but for the time being, we’re going to stick it to this. Let’s give it a drop shadow and hit save. Now that we have done that, we get a bunch of settings here.

For the text form input setting, the text input style and the text area style, the only things you can set here are the widths but that’s exactly what we want to do . We want to set the widths and for the moment, let’s just make them say, 250px wide and hit save.

In terms of our submit button padding, what I want to do here is change the left and right padding, I want the button to be bigger so I’m going to make it 20px on either side. For the submit button drop shadow, I want it to be 5px wide, 5px blur and I’m going to drag a light gray here. When you hover over it, I want it to look like it’s depressed so I’m going to take 2px wide, 2px of blur and a somewhat darker color gray and hit save settings. Now we have this contact form style set up.

If we scroll down here to number 2, let’s give our contact form a border, a drop shadow and we’ll customize the input field. I’m going to do a bunch of videos on how to use all the features of this later but right now we’ll call these ones 200px wide. Let’s give it a 3px border, let’s make it a bright blue, keep it solid and our drop shadow, let’s just make it 5px wide, 5px of blur and let’s go back to a pretty light gray and hit save. Now we’ve just defined two different styles for contact forms.

BYOB Contact Form Widget

The other thing that this does is once you’ve defined the style, it actually creates a widget for you so that you can apply the style. If we come on over here to our Appearance and Widgets, now you see we have this BYOB contact form widget. If we come back over to our Primary Sidebar and drag our contact form widget over here, we’ll leave the title in there as “Contact Us”, we will display the title on the page. What we do is we need the form ID number.

If we come back over and just take a look at the forms for a second, you can see right here the ID is 132. That’s going to show up in all these shortcodes so that’s what we want. Come back over here and our contact ID is 132. If we say, No Form Style, what’s going to happen is it’s going to look exactly like it did without the plugin. There it is, Contact Us looks exactly the same but we can apply a style, let’s say we want Contact Form Style 1, hit save and hit refresh.

Now, these things went down to 250px wide and why did I loose my top and bottom padding? I need to go and fix that but you can see what happens, it looks like that thing floats in the air but anyway, we narrowed our widths. Let’s go back over and fix that style then scroll down here to padding and let’s say it’s 10px top and bottom. Now, this will automatically reflect that change, so we have it, Drop Us a Line, we now get a bigger thing.

Maybe we feel like that font is too small so we can decide to style the font, hit save. On our font, we can go ahead and pick a font size, let’s say we want that to be 16px, now it stands out quite a bit more. See this contact form doesn’t have any style applied to it but this contact form does. That’s a way in which you can add a contact form to the sidebar.

Style the Contact Form

We can also apply styling to this contact form and we do that by means of a different shortcode. If you want to see information about how to use this, come up over here to my Help. I have a whole bunch of Help information here, description on how to use the widget and a description on how to use the shortcode with the sample shortcode thing to do here.

What the shortcode is it’s byobcform7 then id represents the ID of the form so we would put 132 in and the style represents the style number that we chose so either style 1 or style 2. What I’m going to do is copy that, come back over to our to edit our page. Let’s scroll down here to that shortcode and we’re going to take out their shortcode and put in mine. The ID is 132 and we’ll leave style 1 in there for the moment.

If we view the page, now we’ve applied style number 1 to this. We could change that to style 2 and when we refresh that to style 2, now it looks quite a bit different. Now it’s got the line around it, it’s got some drop shadow going on and its stuff is too small.

Add Padding and Margin

We didn’t change the button but what we can do with this, is link in these, we can add padding around it. For example, let’s go down to style 2, let’s round the corners, let’s add some padding and actually, let’s add some margin. The other thing we’re going to do is come down here and make this 350px so now we have the opportunity to style padding.

Let’s give this a corner radius of 10, a typical padding of 20px and let’s do a right margin of 200px, that might be too big but hit save, hit refresh. Yes, it’s too big, maybe make it 180 or something like that but we apply the style that’s different than this style.

These are exactly the same form but we’ve got a style 1 and a style 2 and there are all kinds of things you can do with this besides the things I’ve just shown you but this is a way for you to get a customized look to your contact form or to make your contact form fit comfortably inside the sidebar.

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