Categories HTML - CSS, WordPress

Styling Contact Form 7 validation with CSS and border

Updated: Comments Link39 Comments

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.

Styling Contact Form 7 validation with border

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

39 COMMENTS

LEAVE A REPLY
  1. Eylon Hamama says:

    Hey, I visited your site and I think that your content is amazing! It is really engaging and original, you must have worked so hard to generate such quality content.

    Reply
  2. Rodrigo Cruz says:

    Hi,

    I’m trying to use this tutorial, thank you!

    It works but the problem is that with

    span .wpcf7-not-valid {
    border: 1px solid #ff0000 !important;
    }

    Does not matter if user fill this field it still red bordered !

    There’s no way to show the red border but if user fill the form it remove the red border?

    Thanks!

    Reply
    1. Amit Sonkhiya says:

      @r@rodrigocardistry:disqus

      Please provide the URL of the page you’re experiencing the issue along with the input field name. There might be some class mismatch or other rule precedence.

      Reply
          1. Rodrigo Cruz says:

            Hi I follow the tutorial from this new link and still not working! I answer to you in this post or in the new one that you sent in your reply? Thanks!

          2. Amit Sonkhiya says:

            Hello @rodrigocardistry:disqus

            I would like to provide you custom JS/jQuery specific to your website but that will be a custom work. Drop me an email to amit@astech.solutions for implementaion.

    1. Amit Sonkhiya says:

      Hello @asmajamil:disqus

      I see that there is no such CSS rule in the page. You’ve used

      span .wpcf7-invalid {
      border: 1px solid #ff0000 !important;
      background-color: #FF9999;
      }

      But the both rules have separate names (wpcf7-not-valid vs wpcf7-invalid). Fixing this should solve your issue.

      Also, the Bootstrap framework isn’t used correctly so the page isn’t responsive actually. Second, the page isn’t made as per WordPress theme specifications, so it might be another trouble.

      Do let’s know if you wish to leverage our expert services.

      Reply
    2. Amit Sonkhiya says:

      Hello @asmajamil:disqus

      I see that there is no such CSS rule in the page. You’ve used

      span .wpcf7-invalid {
      border: 1px solid #ff0000 !important;
      background-color: #FF9999;
      }

      But the both rules have separate names (wpcf7-not-valid vs wpcf7-invalid). Fixing this should solve your issue.

      Also, the Bootstrap framework isn’t used correctly so the page isn’t responsive actually. Second, the page isn’t made as per WordPress theme specifications, so it might be another trouble.

      Do let’s know if you wish to leverage our expert services.

      Reply
      1. Asma Jamil says:

        Hi..
        Amit I tried yours first but it didn’t solve the problem. Then I tried the code that’s currently in the code but no progress.

        Could you please guide me for these two points? If possible..
        “Also, the Bootstrap framework isn’t used correctly so the page isn’t responsive actually. Second, the page isn’t made as per WordPress theme specifications, so it might be another trouble.”

        Reply
        1. Amit Sonkhiya says:

          Hi @asmajamil:disqus

          This time the desired code is there. But the form isn’t in working as AJAX request. It means you submit the form, the whole page goes to the server and comes with errors and the wpcf7-invalid class won’t be there in the form fields.

          Hence, it fails again. If you want to know the AJAX difference, check another page:
          http://www.littlepandaselc.com/contacts-us/

          To fix it, the page needs to be prepared as per WP standards or should have CF7 JS file at least.

          Further, i have looked the website just for a glance for few minutes. There are many issues with it including CF7, SEO, Bootstrap, WordPress, code, twice rendering resources etc.

          I would indeed like to assist you for what you have asked and what are troubling. But it’s not feasible to assist you here in this contact form. Also, this will take considerable time and efforts, hope you could understand this as well.

          Do let us know how can we serve you. You can contact us here:
          https://www.astech.club/contact-us/request-estimate/

          Or email to contact@astech.club

          Reply
          1. Asma Jamil says:

            Hi Amit.
            Thanks for getting back to me..

            The problem is only the following code is not working
            span .wpcf7-not-valid {
            border: 1px solid #ff0000 !important;
            }

            I’ve also used this piece of code in my page
            div.wpcf7-validation-errors {
            background: #ffe2e2;
            border: 1px solid #ff0000;
            color: #C10000;
            }
            And its worked perfectly. The problem is just with the first code

          2. Amit Sonkhiya says:

            Hi @asmajamil:disqus
            https://uploads.disquscdn.com/images/a0084cd9311d9856aa5c4973b25eec8ce0e964f86c8dd83d74398eceea4a1f28.png

            The wpcf7-validation-errors class is to style the red box as shown in the attachment above and it’s working perfectly.

            The wpcf7-not-valid class rule is present in your code but this class is absent in the Text box markup once you submit the form.

            For your reference, I’m adding markup of First Name Text box:

            While it should be (After empty submission):

          5. Asma Jamil says:

            Hey Amit..
            I had sent across an email on the above mentioned email addresses, but got no response.

          6. Asma Jamil says:

            I finally figured it out..
            I was manually removing the message from contact form rather than hiding it using this code:
            span .wpcf7-not-valid-tip {
            display: none;
            }

            Now it is working fine..
            Thanks 🙂

          7. Amit Sonkhiya says:

            Congratulations and I’m happy if it’s resolved. You might interested in fixing other issues I have pointed and you asked as well. So check again the email.
            As your email provider has the toughest filters in the industry so might be the mail has gone to spam/junk. However, this time I have forwarded the same from *****its@gmail.com. It should reach to you. Do let me know.

          8. Amit Sonkhiya says:

            @asmajamil:disqus

            I have replied your email two days ago. Hope you have gotten that. If not then do let me know.

  6. Alan Pollenz says:

    I have the same problem as Brian. Here is a link to my page:

    https://pollenzlaw.com/contact/

    First Name, Last Name, Phone, Email, and Message are required. I added the following css:

    span .wpcf7-not-valid {
    border: 1px solid #ff0000;
    }

    span.wpcf7-not-valid-tip {
    display: none;
    }

    If you click the Send button without filling in any fields, 5 should have a red border, but only the message textarea is bordered. The 4 text fields above it are not bordered.

    Any ideas?

    Alan

    Reply
    1. Amit Sonkhiya says:

      Hi @alanpollenz:disqus
      The CF7 CSS is taking precedence over given rules. Just use the following and the problem will be fixed. I have updated the article as well.

      span .wpcf7-not-valid {
      border: 1px solid #ff0000 !important;
      }

      Reply
      1. Alan Pollenz says:

        Thanks for the quick reply and a solution that works. Funny thing is I am aware of !important and don’t know why I didn’t try it.

        Another question… I want to apply this same solution to a different and change the border color. I have tried

        span .wpcf7-not-valid {
        border: 1px solid #ff0000;
        }

        #wpcf7-f1718-p220-o3 span .wpcf7-not-valid {
        border: 1px solid 000000;
        }

        span.wpcf7-not-valid-tip {
        display: none;
        }

        where #wpcf7-f1718-p220-o3 is the id of the form I want to change to have black borders around inputs with invalid or blank data. Any ideas?

        Finally, on this same form (#wpcf7-f1718-p220-o3) I want the [response] (valdation errors alert) to have a different font color, border color, and background color. Any ideas on this?

        Thanks in advance.

        Alan

        Reply
          1. Amit Sonkhiya says:

            @alanpollenz:disqus

            I’m glad to know you’ve fixed everything. If there is anything else regarding CF7 then let me know.

  8. Tamsin Paz says:

    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?

    Reply
  9. Brian says:

    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?

    Reply
    1. Amit Sonkhiya says:

      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

      Reply
  10. Hamid says:

    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..

    Reply

Leave a Reply

Enclose a code block like: <pre><code>Your Code Snippet</code></pre>.