FrugalWebGuy is Merging with Michael Mann Web Design under the new Title of I Do Web Work

Contact Form 7: Customize Your Forms

Video Available (Signup to Access - Members Only)

Contact Form 7 (CF7) is one amazing contact form plugin out of the box, but sometimes having your fields all light up right on top of each might not be what you have in mind. So let us take a look at some ideas for customizing the look and feel of your forms with some CSS.

Columnizing 2 Fields

So let's say you want to have 2 fields sitting side by side, such as a first name and a last name. we can do this very easily by using two CSS attributes: display and width. Let's take a look at what each does for us.

The display attribute gives us the ability to choose how something is displayed. Typically, using a paragraph format (that <p> tag you see in the default CF7) will create a block display, which is why each is on its own stacked below the one before. If we set the display to inline-block, this allows for us to create a columned effect.

The width attribute allows us to set a width to something. So we will be using a 48% width, which will give us roughly have the width of the space we are using. If you wanted to do 3 evenly spaced columns, roughly a 32% width should work.

Note: Keep in mind that while 50% and 50% equal 100%, as each browser displays things differently, you will use a smaller percentage to help everything fit without being wrapped.

The Final Results for our Contact Form

So, just what is the final result? Here is how I would structure things:

<div class="oneHalf">First Name<br />
[text firstname]</div>
<div class="oneHalf">Last Name<br />
[text lastname]</div>

Whoa! What's with these div's? Those are division tags and basically allow us to format our "columns". Now we are using CSS classes here, so the actually reference CSS would go into your child theme CSS file (typically style.css), or if you are not using a child theme you can use one of the many Custom CSS plugins out there (I recommend WP Add Custom CSS) and pop the css below in there:

.oneHalf { display: inline-block; width: 48%; }

If you have combined both the div section above and this CSS, you should end up with something like:

Customize Contact Form 7

Now that looks much better. Enjoy!