title: Contact form 7 validation label form css
body: <p>I'm trying to style the validation css in the label/h3 field in Contact form 7 in wordpress. However the validation only applies to the inputs. What can I do so that once a person submit a form with errors or blank fields, the label/h3 field next to the input field become red in order to show which is wrong. </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;h2&gt;FREE CONSULTATION&lt;/h2&gt;
  
  &lt;div class="headerstyle formname"&gt;&lt;h3&gt;Your name&lt;/h3&gt;[text* your-name]&lt;/div&gt;
  &lt;div class="headerstyle formemail"&gt;&lt;h3&gt;Your email&lt;/h3&gt;[email* your-email]&lt;/div&gt;
  &lt;div class="headerstyle"&gt;&lt;h3&gt;Your phone&lt;/h3&gt;[tel your_phone]&lt;/div&gt;
  
  &lt;p&gt;[textarea your-message placeholder "Your message goes here"] &lt;/p&gt;
  
  &lt;p&gt;[submit "Send"]&lt;/p&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.homecontactform {
  width: 350px;
  position: relative;
  display: block;
  float: right;
  }
  .homecontactform:after {
  content: "";
  clear: both;
  }
  .homecontactform .wpcf7 {
  width: 100%;
  display: block;
  position: relative;
  background: #f4f4f4;
  text-align: center;
  border-radius: 15px;
  padding: 20px 15px;
  }
  .homecontactform .wpcf7 h2 {
  color: #567f56;
  font-family: 'Lato', sans-serif;
  font-weight: bold;
  margin-bottom: 20px;
  }
  .homecontactform .headerstyle {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  margin-bottom: 15px;
  }
  .homecontactform .headerstyle h3 {
  display: inline-block;
  position: relative;
  width:140px;
  color: #fff;
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 10px 5px;
  background: rgba(127,187,127,1);
  background: -moz-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(127,187,127,1)), color-stop(100%, rgba(84,125,84,1)));
  background: -webkit-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
  background: -o-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
  background: -ms-linear-gradient(top, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
  background: linear-gradient(to bottom, rgba(127,187,127,1) 0%, rgba(84,125,84,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7fbb7f', endColorstr='#547d54', GradientType=0 );
  border-radius: 15px 0px 0px 15px;
  -moz-border-radius: 15px 0px 0px 15px;
  -webkit-border-radius: 15px 0px 0px 15px;
  }
  .homecontactform .headerstyle h3:after {
      left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(106, 156, 106, 0);
      border-left-color: #6a9c6a;
      border-width: 8px;
      margin-top: -8px;
          z-index: 10;
  }
  .homecontactform .headerstyle p {
    margin-bottom: 0px;
  }
  .homecontactform .wpcf7 input[type="text"], .homecontactform .wpcf7 input[type="email"],
  .homecontactform .wpcf7 input[type="tel"] {
  width: 100%;
  padding: 12px 10px;
  border-radius: 0px 15px 15px 0px;
  -moz-border-radius: 0px 15px 15px 0px;
  -webkit-border-radius: 0px 15px 15px 0px;
  border: 1px solid #c6c6c6;
  box-sizing: border-box;
  }
  .homecontactform .headerstyle span {
  position: relative;
  }
  .homecontactform .wpcf7 input[type="text"].wpcf7-not-valid, .homecontactform .wpcf7 input[type="email"].wpcf7-not-valid,
  .homecontactform .wpcf7 input[type="tel"].wpcf7-not-valid {
  position: relative;
  border: 1px solid #f00;
  border-radius: 0px 15px 15px 0px;
  -moz-border-radius: 0px 15px 15px 0px;
  -webkit-border-radius: 0px 15px 15px 0px;
  }
  .homecontactform .wpcf7  .formname  .wpcf7-not-valid-tip:before {
  content: "Your name";
  color: #fff;
  display: block;
  position: absolute;
  width: 130px;
  top: -11px;
  left: -130px;
  font-family: 'Lato', sans-serif;
  font-weight: normal;
  font-size: 18px;
  margin: 0;
  padding: 8px 0px;
  background: rgba(253,102,107,1);
  background: -moz-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
  background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(253,102,107,1)), color-stop(100%, rgba(255,0,0,1)));
  background: -webkit-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
  background: -o-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
  background: -ms-linear-gradient(top, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
  background: linear-gradient(to bottom, rgba(253,102,107,1) 0%, rgba(255,0,0,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fd666b', endColorstr='#ff0000', GradientType=0 );
  border-radius: 15px 0px 0px 15px;
  -moz-border-radius: 15px 0px 0px 15px;
  -webkit-border-radius: 15px 0px 0px 15px;
  z-index: 20;
  }
  .homecontactform .wpcf7  .formname  .wpcf7-not-valid-tip:before:after {
          left: 100%;
      top: 50%;
      border: solid transparent;
      content: " ";
      height: 0;
      width: 0;
      position: absolute;
      pointer-events: none;
      border-color: rgba(254, 51, 53, 0);
      border-left-color: #fe3335;
      border-width: 10px;
      margin-top: -10px;
  }
  .homecontactform .wpcf7 span.wpcf7-not-valid-tip {
  position: absolute;
  top: 0;
  left:0;
    color: #f00;
  font-family: 'Lato', sans-serif;
    font-size: 1em;
    display: block;
  padding: 0 10px;
    border: none;
  box-sizing: border-box;
  z-index: 5;
  }
  .homecontactform .wpcf7 textarea  {
  width: 100%;
  border-radius: 15px;
  padding: 10px 10px;
  box-sizing: border-box;
  resize: none;
  border: 1px solid #c6c6c6;
  }
  </code></pre>
  
  <p>You can see the somewhat working example <a href="http://floridadui.client.sharkbiteadmin.com/" rel="nofollow">here</a> and <a href="http://codepen.io/kikibres/pen/dYRayW" rel="nofollow">codepen here</a> but the problem is that I cannot add the .wpcf7-not-valid to h3 due to some coding in Contact Form 7. Also I cannot add :before to the input because the input doesn't have content. What should I do so that when validation start, the green background of the h3 fields become red? </p>
  
  <p>The best solution is to edit the Contact Form 7 so that I can add the .wpcf7-not-valid to h3 too. However, I did try to look in their files and while I can read and understand some, I can't understand the rest and what I should do...:(</p>