Contact-Form-7 : How to add class to validation error messages

Contact Form 7 Custom Class For Validation Message

When customizing the look of the Contact Form 7 plugin in WordPress, you might want to add your own custom classes to either your form tag, form’s individual elements or validation error alert messages. Validation messages use <span> tag that already contains classes defined by the plugin, so we could simply override those classes, but what if we already have our own classes that we want to use? This post will show how to add classes in validation messages and other elements in CF7 plugin.

Let’s first examine, how to add our own class to validation alert error messages. We can achieve this using specific Contact Form 7 filter.

Adding custom class to a validation alert element using a filter

To add custom class to validation message, we need is to use Contact Form 7 wpcf7_validation_error filter. Add the following code to functions.php file.

function cf7_add_custom_class($error) {
$error=str_replace("class=\"","class=\"MyClass1 MyClass2 ", $error);
return $error;
}
add_filter('wpcf7_validation_error', 'cf7_add_custom_class');

The $error variable contains the HTML code of <span> tag validation message. Inside the tag is a class attribute. The above code adds two classes named MyClass1 MyClass2 at the beginning of that class attribute using str_replace function.

You can of course add as many classes as you want.

Important!!!! Notice the blank space after MyClass2. This is needed, so that the plugin's specific classes that the $error variable already contain don’t get broken.

If for any reason you don’t want to use filters, then you can simply modify styles of classes that the plugin already uses for validation messages. This is shown next.

Customizing Contact Form 7 classes specific for validation message

CF7 uses wpcf7-not-valid-tip class inside validation <span> element. All that is needed is to override that class.

In the example below, we put the following code inside our main style.css file, to make the message fonts bold and dark red.

.wpcf7-not-valid-tip
{
color: #800;
font-weight: bold;
}

To modify style of the field that failed the validation, override .wpcf7-not-valid class.

Tip:For a nice example on how to style Contact Form 7 validation by overriding plugin's classes, check this article.
MyThemeShop - Premium WordPress Themes & Plugins
Choose between Blog, Magazine, WooCommerce, Business Themes.
  • Fully Responsive Designs
  • Premium Support 24x7
  • 30 Day Money Back Policy
  • Buy Once, Use for Lifetime
  • SEO Friendly
  • Use On Unlimited Sites
Check it now
This is an affiliate ad.

What about other elements of the plugin? How do we add our own custom class there? This is shown next.

Adding our own class to other Contact Form 7 elements

To add our class names in other parts of our contact form, we don’t need to modify either functions.php or style.css. We can accomplish that directly from the Dashboard.

Add a class to Form HTML tag

To add a custom class to the <form> tag, put html_class attribute inside the CF7 shortcode. An example is shown below:

[contact-form-7 id="10" title="Contact Us" html_class=”MyClass”]
Tip: To add an ID, use html_id attribute.

Individual form elements

For individual elements, we need to edit Contact Form Tags in the template of your contact form.

Go to Dashboard > Contact, choose your contact form and click Edit. In the Form tab, the templates are shown. Insert option class:MyClass inside the field tag between the square brackets [] as shown below:

[text* contact-name class:MyClass]

Here we are adding MyClass custom class to the required text field for the contact name.

Conclusion

Contact Form 7 is a very popular WordPress plugin and to customize it using our own classes, we can modify classes that the plugin uses or we could add our custom classes to class attribute. In this post, we learned how to do that for <form> tag, for individual element inside the form and for validation error messages.

If you found this article useful, please take a moment and share it on social networks or drop a comment below.

Share this page

Add a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top