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

  • Higa

    a big thank you. Helped me a lot!

  • Jonas

    Thank you for the code snippets!

  • Hamid

    This one is very nice. But when you select an area and fill in the field and you click out of it, it still remains with the border red. It should dissapear to normal (because you have filled in the required field) Any update to this? Or is this over your scope..

  • Brian

    I followed this and for the most part it all has worked. However, for some reason it only adds the error border around my “textarea field” and not around my “email” and “text” fields. Any suggestions?

    Also is there a way to change the “Please Fill The Required Field” Text?

    • Amit Sonkhiya

      Hi Brian,

      Without link to your page I’m unable to check and assist you to correct your issue. To change the text, Goto your contact form > Message. There you can set responses as you wish.

      If you want to change each invidually, you would need to use custom jQuery. Write us at support@fellowtuts.com if you are interested.

      Thanks

  • Tamsin Paz

    I have added to the custom.css

    .wpcf7-mail-sent-ok {
    border: solid 2px #d1162e !important;

    }

    but the border remains the original green.
    Any idea why?

  • Santhosh Sandy

    How to disable the not valid tip only on a particular form?

    • Amit Sonkhiya

      Santhosh,

      Find the id of the form and add CSS rule for each input field