Scotts Web Dev Banner
Did you notice... every article on this site has an associated video? Consider subscribing to Scotts Web Dev on YouTube! :)

How To Add A Class or Multiple Classes To Contact Form 7 Input Fields

Contact Form 7 Is Versatile

Contact Form 7 is my favorite contact form plugin for WordPress. It’s extremely customizable and it’s free. It’s one of my must use WordPress plugins. It has tags that you can use to output form elements and it gives you great control over them.

With that said, while you can style your inputs using pure CSS, sometimes you need to add a utility class or a reusable class to your input fields in Contact Form 7.

Add A Class Or Multiple Classes

You can add one class, two classes, or 77 classes. However many you need is up to you and your design. Contact Form 7 provides a tag structure to add classes to your input fields. The syntax looks like this (example):

[email* your-email class:class1]

This would add an email input field that is required with the class of class1. Replace class1 with the name of your CSS class.

[email* your-email class:class1 class:class2]

This would add two classes with the name of class and class2 to your input field. Repeat the class:classname syntax for as many classes as you need.