Styling Contact Form 7 – a guide for beginners

Intro

Contact Form 7 is a widely used WordPress Contact Plugin, which comes with several basic, yet useful features out of the box.

Furthermore, its built-in, shortcode-based editor is simple to use, yet it requires some basic programming knowledge to style according to our needs.

Hence, in this article, I’ll guide you through the process of styling Contact Form 7 and I’ll cover the following topics:

1. Styling form fields and the submit button.
2. Modifying layout based on the width of the device used.

Default Contact Form 7 layout

By default Contact Form 7 is not that eye-appealing. Its layout is simple, its fields are square. On top of that its default error notifications are plain ugly. It’s simply lacking in an interesting UX.

In, one of my previous posts, I covered the topic of adding two columns to the Contact Form. I’ll improve that guide with responsive options, where contact form would be displayed in one column on mobile, and two columns on desktop.

So, as a reminder, to those who read my previous post, and as something new to those who haven’t let’s modify the Contact Form 7 layout, with the following code:

Note: The layout can be modified at: Contact -> Contact Forms -> Edit part of the Dashboard.

Improved Contact Form 7 layout

Now then, we need to improve the CSS we’ve worked on previously, so, let’s go ahead and improve the looks of the form, to achieve the following results:

Here, we made the following changes:

• We’ve added a maroon color to the fields that were improperly filled in, letting our viewers identify the fields with problems easily.
• We’ve increased the size of each field and the border radius for some of the fields.
• We’ve added two columns to the desktop view of Contact Form 7.
• We’ve improved the clarity of the error notice. Usually, a shade of red denotes a problem, so it’s important its no longer yellow.

Furthermore, if you paid close attention, we’ve added some extra classes to the Contact Form 7 form markup. This gave us a little bit more room to control the looks of our form.

So, to achieve the above result use the following CSS, either through Appearance -> Customizer -> Custom CSS, through a manual CSS upload, or through any other known mean, say a custom plugin / mu-plugin.

Final Result

Note: the form submit button is disabled here – until all fields were filled in. To achieve this, I used the following trick: https://wp-doin.com/2024/04/11/contact-form-7-prevent-submissions-before-front-end-validation/

Please leave this field empty

Oh hi there 👋
It’s nice to meet you.

Sign up to receive WordPress tips in your inbox, every month.

Email Address *

I don’t spam! Read my privacy policy for more info.

Check your inbox or spam folder to confirm your subscription.