Custom Styling your Contact Form 7 Form

With CF7 Skins you’re able to apply a Style and get a great looking Contact Form 7 form quickly and easily without having any HTML or CSS skills.

Sometimes, though, you might want to make small changes. Using a Custom CSS plugin is a relatively easy way to make small adjustments to your Contact Form 7 form.

Tip: If you are looking to make larger changes, it is recommended that you update the styling using a child theme.

Before you begin

But before we get started, there are a few things you need to know:

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.

In this article, using the CSS plugin Simple Custom CSS, we’ll walk through how to change the Submit button color for a CF7 Skins Style.

Tip: If you are looking to make major changes to your CF7 Skins – Contact Form 7 form, you should read How to Customize your Selected CF7 Skins Style – in this article we go through a number of examples of editing the style of your form.

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.

Please note that we will be using Firefox Firebug, which is a great tool for figuring out the CSS changes you want to make before actually making them in your Custom CSS plugin. If you prefer you can also use Chrome DevTools to do this.

Modifying the Submit Button Color

The form below is a Contact Form 7 form built using the Contact Template with the CF7 Skins Caspar Style applied and no styling modifications made.

Tip: Take some time to familiarize yourself with the CSS and HTML used in the above form using Firebug or Chrome Developer Tools before continuing.

In making changes to your form 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 custom CSS plugin.

Using Firebug to inspect the form

To begin, you want to use Firebug to inspect the Submit button and figure out your changes to the color.

1. Go to the webpage that has the Contact Form 7 form you want to modify.
2. Launch Firebug by right clicking the Submit button and selecting Inspect element with Firebug.

In the main Firebug window, this code
input class="wpcf7-form-control wpcf7-submit" type="submit" value="Submit"
should be highlighted to indicate you are inspecting the submit button.

Now that you have the inspector open and pointed to the submit button, look to the right hand side where you can see the CSS being applied.

3. You can now use Firebug to temporarily test your color change. In this example, we will be using a light blue colour #38B5E6. So edit the color to this value in Firebug.

Change the hex code to the color that you want.

4. Once you change the color using Firebug, you should be able to see the change take effect on your Submit button.

5. Copy the new CSS for the Submit button.

Tip: Firebug and Chrome DevTools are great tools for figuring out the CSS changes you want to make before actually making them in your CSS plugin. Both of these can be launched by highlighting the content you want to change, right clicking, and selecting Inspect Element.

Making the CSS Changes in Simple Custom CSS

1. On the left menu, click Appearance.
2. Select Custom CSS.
3. In the window, paste the CSS you copied from earlier. It should look something like this:

4. Include only the CSS code that you want to change. You can delete all the other CSS that is already included in the CF7 Skins Style.

.wpcf7 .cf7s-caspar input[type="submit"] {
    background: #38b5e6;
}

5. Click Update Custom CSS.

To make sure your changes worked, go back to the webpage that has the Contact form you wanted to modify. Refresh the page and you should see your new Submit button color.

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

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.