Styling Contact Form 7 validation with CSS and border

Styling Contact Form 7 validation with border

Contact Form 7 uses minimum CSS for styling and validation. Hence lacking of better UI designing. We can overcome this issue by styling Contact Form 7 validation with CSS and border which I’m describing here in this article.

Here, we will apply some CSS rules for validation customization (as well as others too) on Contact Form 7 forms including styling Contact Form 7 validation with border or remove the default Please fill the required field as well as more.

If you inspect any form element in browser, you will see some classes are added or removed from form elements depending upon their validation status. We are modifying these classes to apply desired appearance. Add rules from below as per your requirement into your theme’s stylesheet or custom css block (if your theme supports this feature) or any custom css file attached.

Styling Contact Form 7 validation with border

Use this CSS to produce red border around input fields on validation failure.


Remove the ‘Please fill the required field’ message

If you don’t want to show the ‘Please fill the required field message’ underneath each input then use the code above.


Improve validation error message box

These CSS rules will change the look of response text validation error message into red box that is appearing above the Submit button.


Hide validation error message box

This rule is particularly useful if you wish to just show a red border around form elements on validation failure while hiding the error message box.


 Styling response based on mail sent status

These styles are a plus to enhance beauty of your form. You can decorate response messages  based on AJAX response received by Contact Form 7. Also take advantage of ‘!important’ attribute in your CSS during styling if your rule is being override.

These are a few examples to styling Contact Form 7 validation with CSS and border. Are you using more styles or CSS options to enhance CF 7 form’s UI? Comment and let me know.

You Might Interested In