Contact Form 7 is an incredibly popular plugin for building WordPress contact forms with over 3 million active installs. It supports the building of forms without HTML coding. Forms can include CAPTCHAs, file upload, and quiz fields.

Đang xem: Contact form 7 css styling contact form 7 forms (video), how to style contact form 7 forms in wordpress

While Contact Form 7’s default markup and style are fine for most basic contact forms, often you’ll want to change it.

Improving Contact Form 7 Accessibility: A Quick Note

One plugin I recommend installing shortly after adding Contact Form 7 is Joe Dolson’s Contact Form 7: Accessible Defaults.

This changes the structure of the default form to make it more accessible by associating form labels with the form controls.

It also adds the shortcode above the form so that if there’s an error submitting the form it’s reported above the form itself.

For the standard form, the code generated by the plugin is:

Loading gist raewrites/e58f08409a85304f65e616ae21e0eb15

If you’re interested in finding out more about accessibility, check out The Ultimate Guide to Accessibility and WordPress.

Easy Contact Form 7 Styling With Plugins

If you want a quick form style, there are plugins that can do the hard work so you don’t have to.

Contact Form 7 Style

Contact Form 7 Style has a number of preset styles to choose from including Valentine’s and Christmas styles.


Six of the styles available in the Contact Form 7 Style plug.

For Twenty Fifteen theme users, there’s also a style to match.

To apply a style, go to Contact Styles > Quick Edit, check the form you want to apply the style to and click Update.


The Valentine Style contact form.

Contact Form 7 Style Custom Styles

Add your own styles and see the results on the fly by going to Contact Styles > Add New.

Using this tool you can customize just about any aspect of your form, including:

MarginsBordersPaddingColour and background – including hover statesFonts – a range of Google Fonts are included

When you add a value to (for example) padding, the editor sensibly copies across the value you have chosen, generating the same value for top, right, bottom and left padding. You can, of course, adjust the values. There’s a dropdown to choose between pixels, em or % too.

The custom style you can create also stretches to error and success messages too.

The preview area is at the bottom of the screen; scroll down to see your changes.

Here’s my finished form, using the Cherry Swash font:


Contact Form 7 styling with the Cherry Swash font.

Contact Form 7 Skins

To use Contact Form 7 Skins, create a new contact form and scroll down the page to the Skins section. There you can choose a template and a style for your form.

Xem thêm:

Templates include forms for events, registration, and suggestion.


Some of the available templates in Contact Form 7 Skins


Some of the available styles in Contact Form 7 Skins

Here’s what the Survey form looks like with Topaz styling using the Twenty Fifteen theme.


Contact Form 7 skin

Material Design For Contact Form 7

This plugin styles forms in the Material Design style.

The plugin suggests that you remove the default form and use its shortcodes.

Here is an example with Hestia theme. Note the floating label when the cursor is moved to a particular form field.


Material Design for Contact Form 7 example

A style customizer is available in the plugin’s Pro version.

Styling Contact Form 7 to Match Your Theme

Most of the time, Contact Form 7 will inherit styling from the theme selected. See this example with Coral Dark theme.


Contact Form 7 inherits the dark form fields and button with light labels from Coral Dark theme

A Bespoke Contact Form 7 Design for ColorMag Theme

Here is the form with no styling applied. It inherits the blue button colour from ColorMag theme.


Contact Form 7 in ColorMag theme, no styling applied.

I started by uploading a photo to use as a background image for the form and changing the code for the form labels from grey to white with a blue text-shadow.

The next changes were to increase the margins between the form labels and form fields, change the submit button hover color and add a border when the cursor enters the form fields.

The display of error/success messages when the form is submitted needed to be changed too so they would show up properly.

The spinning GIF when the form is submitted didn’t show up too well so I found an alternative at and referenced it with CSS.

This is the final form:


Custom Colour Contact Form 7 for ColorMag theme

And this is the code:

Loading gist abrightclearweb/7b5aa6785e5312b07aded44cbe41d151

Customizing Contact Form 7 With the Right Tools

For a free plugin, Contact Form 7 is powerful, especially when you start styling it with CSS. Hopefully, the plugins in this tutorial will help you get started with your own styling. The great thing about these plugins is that they’re free, so you can give them a go and see how they work before committing.

And if you’re interested in taking things to the next level, check out our post on how to extend Contact Form even further.

Free VideoWhy 100 is NOT a Perfect Google PageSpeed Score (*5 Min Watch)Learn how to use Google PageSpeed Insights to set realistic goals, improve site speed, and why aiming for a perfect 100 is the WRONG goal.


Watch the video
Share this article


Claire Brotherton
Claire Brotherton A web developer and accessibility advocate based in Edinburgh, Scotland, Claire works with businesses, nonprofits and entrepreneurs who are passionate about access and inclusion.

Xem thêm: Cách Sửa Lỗi Equation Trong Word 2013, 2016, Một Số Lỗi Mathype Trong Word 2013,2003

Do you use Contact Form 7? Which approach do you prefer for styling contact forms – use a plugin, or do it yourself? Let us know in the comments below.
What is WPMU DEV?



Related and Most Recent Posts

Getting Started With Contact Form Plugins for WordPress


Get fresh WP updates directly to your inbox.


Your turn… Cancel reply


Create a free account to post your comment

No credit card required or any silliness like that, we’ll take you straight to your comment


2x.png?v=1.1 2x” width=”176″ height=”101″ />

2x.png?v=1 2x” alt width=”411″ height=”271″ />

Take me to the video

Your email address

Related Post

Leave a Reply

Your email address will not be published. Required fields are marked *