Build Your Own Business Website header image

How to Layout a Contact Form into Two Columns Using Contact Form 7

Difficulty Level -

Filed Under Topics - ,

Listed Under Lesson Subjects -

Whoops, you've found some protected content!

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

In this session we show how to layout a contact form into two columns using Contact Form 7 and customize the settings using the BYOB Contact Form Styles Plugin. The way contact Form 7 works is that it gives columns and rows that can be adjusted according to width and height. We also show how the BYOB Plugin can be combined with Contact Form 7 to create a two column contact form in a single text widget.

Video Transcript

The next thing we’re going to do is talk about how to use Contact Form 7 to create that split contact form down here. What we’re going to do is be over to the example of it being completed or example of completed, this right here. So I’ve got a Contact Form 7 but I have it split into 2 columns in this widget area and it is going to require a little bit of code so let’s see… I need to change this over to a… no, that’s not right. It’s just in the wrong spot. Let’s go back to the homepage. There we go.

So we’re going to put that down here and we’re going to start off by going down the Contact Form 7 and I’m going to create a brand new instance of this widget. The way to do that is just to copy it and then I’m going to change this to a split contact form.

And so then this is widgets, right? This is widgets. Let’s see, this is id 182 so I’m going to come over here to this and we’re looking at footer row 1 widget column 2 which is empty, currently and we’re going to take my BYOB Contact Form and drop it in there. The id number is 182 and then what did we say we want it to say here? Does it say, “Drop us a line”, that’s what it says. Okay, “Drop us a line.” At the moment, we’re not going to select a form style because we don’t really have a… well, no, we’re not going to select a form style yet.

So we’re just going to hit save and we’re going to come back over here and take a look at that page. It’s not going to look the way we want it to look, obviously. So it’s just centered and dropping down like that.

And so the next thing for us to do is to configure this so that we have it the way we want it. And the way we’re going to do that is to adjust the widths of these things and then move the “Your message” and “Send us a note” over here to the right.

Okay so the easiest way to do that really is just to use a fairly simple inline HTML which is what we’re going to do. We’re going to create a div, just a wrapping div and we’re going to give it an inline style = float: left and then semi-colon and then width colon and we’re going to say 45%. Okay and that’s going to come all the way down to here. I’m going to copy that one ore time. It’s going to be for the 2nd row. I’m going to close out this div and I’m going to come down here and close out the div again.

I have essentially turned this into 2 columns where this one is going to be 45% of the available space and it’s going to float to the left which means it’s going to give room for someone else to float up beside it on the right hand side. And so actually, I suppose we could just do this float right. It’ll be a little bit more self-explanatory. Float this one to the right, width of 45% so essentially, we’ll have 10% in between these two things. And if we hit save on this and the refresh it, these things should pop up side by side.

Okay, they have popped up side by side. What we need to do now is change the widths of these. Right now, this is set at being too wide and so now we’re going to create a style for these that will make this behave the way we want it to. And I think we’re just going to come over here to BYOB Plugins and go down to the Contact Form 7 styles plugin and we’re going to create another style.

In this case, we are not going to customize the background or the border or shadow or corners or margin. Not yet, anyway. We are going to customize the heading font. I think we’ll leave padding alone for a moment. We are going to customize the typical form font, input font but we will customize the input field and the text area fields. And actually, I think we are going to customize the typical form. We’re going to do that too and then hit save.

Now that that is scoped, let’s keep that at 22 pixels tall. Actually, what I want to do is open up my Footer Widgets plugin and see what I’ve gotten for settings there. Let’s see, heading style, 24 pixels. That’s the color I’m using. Okay, normal spacing. So 24 pixels, color, normal spacing. Remove all caps. Center the heading text.

In terms of the font style, the thing we’re going to do here is… let’s see. Actually, let’s just save it for a moment and see what happens with the setting. Oh, I still need to adjust the widths in this thing. And if I use a little measuring thing, I think right now, the width is about 275. So if I make the width say 250 pixels, I think that’s probably good enough. So let me try that here.

So input form field style, width is going to be 250 and text area form field will also be 250 and then we’re going to hit save and refresh it. Come on. Oh, we haven’t applied this yet. We have to apply that style to this. That’s what my problem was there. So in this widgets now, we have to refresh this so we have a choice. So back to footer widget, footer row 1 widget column 2. We want to display the title on the page. That’s what I’ve forgotten about and then we want to choose contact form style 2. Hit save, refresh this.

Okay so the next thing we want to do with this is I think actually, the big thing we want to do here is change the height of this so our “Send us a note” comes up. In other words, I think I’m pretty happy with that. So the way Contact Form 7 works is that it gives you columns and rows.

So if we come back over to our contact form, and we’re editing our split contact form. We want to change the rows for this text area and probably, the easiest way to do that is just to generate a tag and then come down here and say rows. Let’s just call it 20 for a second and see what happens. So you can see that they’ve got to give you this little x20.

That’s what we have to add to our text area over here. So text area, your message, space, x20 and we’re going to save this. I’m going to see whether 20 is enough. We may need to bring this down. Oh yeah, okay so we need to bring it to like 5. That looks good just like that, doesn’t it?

Actually, I think what we’d want to do is give ourselves a little bit of bottom padding here but then get rid of some of the space in between these. If I inspect the element for just a minute here, width is 45%… width is 45%… obviously, it’s not quite what I had in mind but let’s see. Okay so right now, this line height and is 1.67 but it has a bottom margin of 1.429. I got rid of that bottom margin entirely. It’s probably a little bit too much but I could get rid of a bunch of it. I almost think I need to reduce the size of this a little bit more too, from 250, say down to 220. Okay that’s what I want to do. I’ll take that down to 220 and then I’m going to reduce the paragraph margin here.

So come back over to our form input. Instead of 250, we’re going to take it at 220. Text area input is going to be 220 and then the form text style, the typical paragraph bottom margin, I think we’re going to say is 10 pixels. Yeah, let’s say that and see what happens. Yeah.

Okay and so then you know, pretty much the next thing we can do is we could style this button from the last time we looked at this plugin. Let’s see, let’s just play with it because that’s the next thing we do really, is just style that button a bit. So customization options and I’ll leave the font alone. Well, I don’t know, let’s do everything. The font, leave the height and width alone. Leave the padding margin alone. We’re going to do the background. We’re not going to do a border but you know, I love drop shadows and rounded corners so we’re going to do both of those.

So we’re going to customize the background color, customize the hover background color. We’ll use 3 pixels, 3 pixels, and a gray and then 1 pixel, 1 pixels, and a darker gray. And then in terms of corners, let’s just do a 10-pixel rounded corner for a moment. And then so our main background color, I almost feel like this is the perfect color here so let’s try that. And so… oh, I thought I did that already. So we’ll grab that color,  the hover background, I think we’ll make it a little a bit darker version of that and let’s just try that. Let’s hit save, see what it looks like.

Doesn’t look good at all, does it? We need some padding around that thing. We need a darker color for the main text. What I really ought to do, instead of using a gray color for that is I should use a much darker color of the red. So let’s see some of that link background color. Okay, let’s drop that down to a darker color. And then for the drop shadow, instead of gray, let’s just pick a darker version of that. Let’s see how that looks. It looks like I’ve got border there, doesn’t it? I think I’m going to get rid of that border and… where was it?  Looks okay. What you’re seeing is why I don’t do my own design work like this because were very happy with this kind of stuff.

So let’s see, we’re going to customize the border and customize the padding. And so on the border, we’re going to get rid of the border altogether. And then in the padding, we’re going to say, maybe 5 pixels top and bottom and 15 left and right. And I already know I don’t like that color green there as my hover color so let’s just use a lighter color, see what happens with that. Okay, there we go.

So the button looks a little bit better now. I don’t know, I probably would actually be better off making the lighter color the main color and then the hover color be the darker color. So I think I’ll probably just switch that around. So submit button, hover background, and link background… let’s see, I think to save, off to the text file here and then copy that from my text file. Paste that back there. And then I think that maybe 5 pixels of padding on the top and the bottom wasn’t enough so I think we’ll take 8 and 8 and 20 and 20. There we go, pretty close.

Okay so anyway, that’s how you combine the plugin with Contact Form 7 and end up splitting the contact form in a common widget area.

0 Comments… add one

Save $200 on Membership Now!

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