У меня проблемы с контактной формой 7 на создаваемом мной сайте WordPress. Сообщения об ошибках валидации не совпадают с соответствующими полями. Я бы даже с удовольствием спрятал эти сообщения, потому что у меня уже есть поля, выделенные красным цветом, если обязательное поле оставлено пустым. Любая помощь будет оценена.
Вот мой код формы:
<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>
Вот какой-то CSS, который я использую для вида:
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;
}
И вот как выглядит форма при обнаружении ошибки. Все сообщения об ошибках смещены относительно соответствующего поля.
Контактная форма 7 позиционирования сообщения об ошибке