联系表单7验证标签表单css

我试图样式验证css在标签/h3字段在联系表单7在wordpress。然而，验证只适用于输入。我能做些什么，以便一旦一个人提交了一个有错误或空白字段的表单，输入字段旁边的标签/h3字段变成红色，以显示哪个是错误的。

<h2>FREE CONSULTATION</h2>
<div class="headerstyle formname"><h3>Your name</h3>[text* your-name]</div>
<div class="headerstyle formemail"><h3>Your email</h3>[email* your-email]</div>
<div class="headerstyle"><h3>Your phone</h3>[tel your_phone]</div>
<p>[textarea your-message placeholder "Your message goes here"] </p>
<p>[submit "Send"]</p>

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

你可以在这里看到一些工作的例子，在这里相互依存，但问题是，我不能添加。wpcf7-not-valid到h3由于一些编码在Contact Form 7。此外，我不能添加:before到输入，因为输入没有内容。我应该怎么做，当验证开始时，h3字段的绿色背景变成红色?

最好的解决方案是编辑联系人表单7，这样我就可以将。wpcf7-not-valid也添加到h3中。然而，我确实试图查看他们的文件，虽然我可以阅读和理解一些，但我无法理解其余的和我应该做什么…