Before you begin

This article will only be useful if you:

1. Have a basic understanding of HTML and CSS. Learn more.
2. Understand and know how to use developer tools such as Firefox Firebug or Chrome Developer Tools – Learn more.
3. Understand child themes and/or how to update the CSS of your WordPress theme using a custom CSS plugin.
   • Learn more about child themes or
   • Learn more about custom CSS plugins.

Tip: If you are looking to make only minor changes to your CF7 Skins – Contact Form 7 form, and have only limited HTML & CSS skills, you might find Using a Custom CSS plugin to modify a CF7 Skins Style easier to follow and more suited to your current skill level.

Warning: If a CF7 Skins user has little or no HTML and CSS skills they may only be able to have their forms using the CF7 Skins Style as supplied. You may need to seek assistance from someone with the skills listed above to modify your forms.

Custom Styling for your Contact Form 7 Form

CF7 Skins makes it easy for you to generate beautifully styled Contact Form 7 forms for your WordPress website. Although it’s easy to apply an entirely new style to your form with CF7 Skins, there might be parts of the style you want to change.

This article will show you how you can tweak a few different parts of a CF7 Skins style.

Before you go through the examples, make sure that you have already selected a CF7 Skins Template and Style that is close to what you want.

As you go through these examples, there are 3 basic steps to remember:

1. Know which parts of the form you want to change
2. Find CSS classes and ids that you want to change using developer tools or the CSS file
3. Implement those changes in your child theme or using a custom CSS plugin.

Note: Without a CF7 Skins style, your form will apply the styling of your WordPress theme (if the author of the theme wrote styles for forms).

Selected CF7 Skins Template and Style

For all of the following examples, the Template used is Contact and the Style used is Caspar. Without any additional changes, the contact form looks like this:

Tip: Take some time to familiarize yourself with the classes, ids, and HTML using Firebug or Chrome Developer Tools on the above form before continuing.

I want a different overall color

Taking the Contact form from above, let’s change the outside border, inside border, and the color in the box around the word Contact.

Ensure you know the hex codes for the the colors you want to use. In this example, we will be using #fc354c.

Outside border

When you take a look at the HTML of your Contact form, it would look something like this:

When you look at the CSS, it will look like this:

What you want to focus on primarily is the border. In your child theme or custom CSS plugin, use the exact same class and change the border to:

border: 1px solid #fc354c

Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar {
	border: 1px solid #fc354c;
}

Tip: Code added in the child theme or custom CSS plugin will normally take precedence over the CSS added by the CF7 Skins plugin.

Inside border

Again using the inspector, find the inside border. In CSS, it will look like this:

Again, change the border to:

border: 1px solid #fc354c

Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar fieldset {
	border: 1px solid #fc354c;
}

Contact box color

To finish the changes by changing the color around the word Contact, inspect the title and look at the CSS.

Change the border to:
border: 1px solid #fc354c

and background to:

background: #fc354c

Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar legend {
	border: 1px solid #fc354c;
	background: #fc354c;
}

Your final Contact form, after making the changes to your child theme, would look like this:

I want to change the submit button color

In CF7 Skins, changing the submit button text is easy in the Form editing section. A very popular question is how to change the submit button color, as well as the color when you move your mouse (hovers over) the button.

Going back to our initial Contact Template with the Caspar Style, the HTML looks like this:

You want to target the border and background of the class:

.wpcf7-form.cf7s-caspar input[type="submit"] {
    background: none repeat scroll 0 0 #ededed;
    border: 1px solid #c3c3c3;
    color: #1a1a1a;
    padding: 5px 15px;
}

changing it to:

border: 1px solid #fc354c
background: #fc354c

Code added to child theme or custom CSS plugin:

.wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input[type="submit"] {
	border: 1px solid #fc354c;
	background: #fc354c;
}

Finally, for the hover, the CSS with the changes looks like:

Change the border and background to:

border: 1px solid #eb646d;
background: #eb646d;

Code added to child theme or custom CSS plugin:

.wpcf7 .wpcf7-form.cf7skins.cf7s-caspar input:hover[type="submit"] {
	border: 1px solid #eb646d;
	background: #eb646d;
}

That’s it! Your button will now have different colors when standing alone and when a mouse is hovered over it.

Normal submit:

Hovered submit:

I want to change the font size, type, and color

Fonts can be problematic because different browsers (Firefox, Chrome, Internet Explorer) recognize some fonts but not others. WordPress has a great article about Playing with Fonts that you should review before attempting to change your fonts.

Depending on your theme, most forms will have the same font as your posts. This often means you will need to add a specific font-family to a specific class in your child theme.

To change the font of your entire form, you want to target .wpcf7 .cf7s-caspar.

Depending on the font you choose, your entire form will have a different font. In this example, we’re going to change the font to font-family: Verdana, Arial, sans-serif;

The CSS for the Caspar theme, with your new font change, will have an additional font-family:

We also want to increase the font size using font-size: 18px;

In your WordPress child theme or custom CSS plugin add the following CSS code:

font-family: Verdana, Arial, sans-serif;
font-size: 18px;

Code added to child theme or custom CSS plugin:

.wpcf7-form.cf7s-caspar {
    font-family: Verdana, Arial, sans-serif;
    font-size: 18px;
}

When you have saved this change in your child theme, your CF7 Skins form will have your new font.

Completed Form

Summary of all Code added to child theme or custom CSS plugin:

.wpcf7 .cf7s-caspar {
	border: 1px solid #fc354c;
	font-family: Verdana, Arial, sans-serif;
	font-size: 18px;
}

.wpcf7 .cf7s-caspar fieldset{
	border: 1px solid #fc354c;
}

.wpcf7 .cf7s-caspar legend{
	border: 1px solid #fc354c;
	background: #fc354c;
}

.wpcf7-form.cf7s-caspar input[type="submit"] {
    background: #fc354c;
    border: 1px solid #fc354c;
}

.wpcf7-form.cf7s-caspar input:hover[type="submit"] {
    background: #feaeb7;
    border: 1px solid #feaeb7;
}

Giving a completed customised form as shown below:

Tip: You can use Firebug or Chrome Dev Tools to see how we’ve styled this form.

Tips

To remind you, as you go through these examples, there are 3 basic steps to remember:

1. Know which parts you want to change
2. Find what you want to change using developer tools
3. Implement those changes in your child theme or custom CSS plugin.

Have Questions or Need Help

If you are using the free version of CF7 Skins and have any questions, get in touch via the CF7 Skins community and also the Contact Form 7 community at WordPress.org Support.

If you are using the premium version, CF7 Skins Pro, then Premium Email Support is provided (manned by paid staff) to deal with your questions and problems.