Contents
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:
- Styling form fields and the submit button.
- 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.
- Contact Form 7 default style
- Contact Form 7 default errors
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: To do so login to the Dashboard and go to:
- Contact
- Contact Forms
- Edit
- Paste the above snippet of code
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.
- 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 it’s no longer yellow.
- We’ve removed the background of inputs, added some padding and background, along with a box-shadow to their containers.
- We’ve changed the color palette of our Contact Form 7.
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 internal and external looks of our form. To add a custom class to the whole Contact Form 7 markup, make sure to add the html_class=”cf7_styled” to your shortcode.
So, to achieve the above result use the following CSS, either through
- Appearance -> Customizer -> Custom CSS
- Or through a manual CSS upload – through any other known mean, say a custom plugin or a 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/