CODEWITHSUNDEEP
wordpresscontact-form-7
Brian Preston
Brian Preston

Reputation: 23

Contact Form 7 - Validation Message Positioning Issue

I'm having issues with Contact Form 7 on a WordPress site I'm building. The validation error messages are not lining up with their respective fields. I'd even be happy hiding those messages altogether because I already have the fields highlighting red if a required one is left blank. Any help would be appreciated.

Here is my form code:

<div class="container">
  <div class="row">
    <div class="columns one-half">
      <div class="">
        <div class="row">
          <div class="columns full">
            <div class="field">[text* first-name placeholder "First Name"]
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="columns full">
            <div class="field">[text* your-email placeholder "Email"]
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="columns one-half">
      <div class="container">
        <div class="row">
          <div class="columns full">
            <div class="field">[text* last-name placeholder "Last Name"]
            </div>
          </div>
        </div>
      </div>
      <div class="container">
        <div class="row">
          <div class="columns full">
            <div class="field">[text* your-phone placeholder "Phone"]
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
<div class="container">
  <div class="row">
    <div class="columns full">
      <div class="field">[textarea* your-message placeholder "Message"] 
      [submit class:fullwidth-button "Send Message"][response]
      </div>
    </div>
  </div>
</div>

Here is some CSS I'm using for the look of the form:

body input[type=text].wpcf7-not-valid, body input[type=email].wpcf7-not-valid, body input[type=tel].wpcf7-not-valid, body textarea.wpcf7-not-valid {
border: 1px solid #ec3c06;
}
body span.wpcf7-not-valid-tip {
display: block;
color: #ec3c06;
border: none;
position: relative;
top: auto;
left: auto;
padding: 0;
margin-top: 2px;
background: none;
font-size: 15px;
}

body div.wpcf7-validation-errors {
background: #ffe2e2;
border: 1px solid #ff8a8a;
color: #ec3c06;
}

body div.wpcf7-response-output {
margin: 10px 0;
padding: 20px;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-radius: 5px;
}

body .wpcf7-mail-sent-ng {
background: #fff2e2;
border: 1px solid #ffbc8a;
color: #e17731;
}

body .wpcf7-mail-sent-ok {
background: #e8ffe2;
border: 1px solid #6fdf51;
color: #1ea524;
}

And this is what the form actually looks like when an error is detected. The error messages are all offset from their respective field.

Contact Form 7 error message positioning

Upvotes: 1

Views: 7118

Answers (1)

Jouni Kananen
Jouni Kananen

Reputation: 71

This will remove the alert message for input fields with invalid values:

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

Once the invalid input tip message is gone, be sure to highlight the invalid input fields with:

.wpcf7-not-valid {
  border: 1px solid red !important;
}

!important might be redundant, but I'll leave it there just to be sure - otherwise nothing indicates an invalid input value.

Upvotes: 3

Related Questions