Две формы CF7 на одной странице с выводом через php - одна теряет кастомизацию
Когда на страницу выводится одна форма -
<div class="container">
<div class="row">
<?php require_once(get_template_directory().'/form.php');
</div>
</div>
Но стоит добавить вторую
<div class="container">
<div class="row">
<?php if(get_field('narform')):?>
<?php require_once(get_template_directory().'/fracalc.php'); ?>
<?php endif;?>
<?php require_once(get_template_directory().'/form.php');
</div>
</div>
Как напрочь слетает кастомизация.

Формы сделаны в Contact Form 7. Не подскажите, в чем может быть проблема? Причем, кастомизация от второй формы на первую не передаются. Поэтому совсем непонятно...
CSS у второй формы не задан. CSS первой формы (который отлетает):
.modal-content {
padding: 30px 50px; }
#wpcf7-f226-o1 .wpcf7-response-output {
display: none !important; }
#wpcf7-f226-o1 .wpcf7-not-valid-tip {
display: none !important; }
#wpcf7-f226-o1 .form-label {
width: 100%;
font-weight: bold;
margin-top: 15px; }
#wpcf7-f226-o1 input {
margin-top: 5px;
border: 1px solid #cdcdcd;
-webkit-border-radius: 2px;
border-radius: 2px;
width: 100%;
padding: 15px;
font-weight: bold; }
#wpcf7-f226-o1 textarea {
font-weight: bold;
margin-top: 5px;
border: 1px solid #cdcdcd;
-webkit-border-radius: 2px;
border-radius: 2px;
width: 100%;
resize: none;
height: 100px;
padding: 15px; }
#wpcf7-f226-o1 .wpcf7-submit {
background-color: #e82b2b;
background: #e82b2b;
color: white; }
#wpcf7-f226-o1 .wpcf7-submit.checked {
-webkit-transition: 0s !important;
-o-transition: 0s !important;
transition: 0s !important;
background: url("/wp-content/uploads/2019/01/25.gif") no-repeat center center;
-webkit-background-size: 35px 35px;
background-size: 35px;
background-color: #e82b2b; }
#wpcf7-f226-o1 .wpcf7-submit.ok {
-webkit-transition: 0.5s !important;
-o-transition: 0.5s !important;
transition: 0.5s !important;
background: #08da19 !important; }
#wpcf7-f226-o1 .ajax-loader {
display: none; }
#wpcf7-f226-o1 .error-message {
color: #e40f24;
margin-left: 5px; }
#wpcf7-f226-o1 .policy-checkbox {
margin-top: 10px;
text-align: center; }
#wpcf7-f226-o1 .policy-checkbox .checkbox-container {
display: inline-block; }
#wpcf7-f226-o1 .policy-checkbox p {
display: inline-block;
margin: 0;
margin-left: 5px; }
#wpcf7-f226-o1 .policy-checkbox .fake-checkbox {
cursor: pointer;
border: 1px solid #efefef;
width: 30px;
height: 30px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
#wpcf7-f226-o1 .policy-checkbox .fake-checkbox i {
visibility: hidden; }
#wpcf7-f226-o1 .policy-checkbox .fake-checkbox.active i {
visibility: visible; }
#wpcf7-f226-o1 .policy-checkbox span {
display: inline-block; }
#wpcf7-f226-o1 .policy-checkbox a {
color: #e40f24;
border-bottom: 1px solid transparent; }
#wpcf7-f226-o1 .policy-checkbox a:hover {
border-bottom: 1px solid #e40f24; }
Ответы (1 шт):
Автор решения: Node_pro
→ Ссылка
Проблема в стилях CSS. Вы прописали в селекторе идентификатор формы. Это плохая практика, в случае его изменении у Вас слетают стили. Добавьте для формы "wrapper" в виде div с классом и опишите его.
HTML:
<div class='form-feedback'>
<?php require_once(get_template_directory().'/form.php'); ?>
</div>
CSS:
.modal-content {
padding: 30px 50px; }
.form-feedback .wpcf7-response-output {
display: none !important; }
.form-feedback .wpcf7-not-valid-tip {
display: none !important; }
.form-feedback .form-label {
width: 100%;
font-weight: bold;
margin-top: 15px; }
.form-feedback input {
margin-top: 5px;
border: 1px solid #cdcdcd;
-webkit-border-radius: 2px;
border-radius: 2px;
width: 100%;
padding: 15px;
font-weight: bold; }
.form-feedback textarea {
font-weight: bold;
margin-top: 5px;
border: 1px solid #cdcdcd;
-webkit-border-radius: 2px;
border-radius: 2px;
width: 100%;
resize: none;
height: 100px;
padding: 15px; }
.form-feedback .wpcf7-submit {
background-color: #e82b2b;
background: #e82b2b;
color: white; }
.form-feedback .wpcf7-submit.checked {
-webkit-transition: 0s !important;
-o-transition: 0s !important;
transition: 0s !important;
background: url("/wp-content/uploads/2019/01/25.gif") no-repeat center center;
-webkit-background-size: 35px 35px;
background-size: 35px;
background-color: #e82b2b; }
.form-feedback .wpcf7-submit.ok {
-webkit-transition: 0.5s !important;
-o-transition: 0.5s !important;
transition: 0.5s !important;
background: #08da19 !important; }
.form-feedback .ajax-loader {
display: none; }
.form-feedback .error-message {
color: #e40f24;
margin-left: 5px; }
.form-feedback .policy-checkbox {
margin-top: 10px;
text-align: center; }
.form-feedback .policy-checkbox .checkbox-container {
display: inline-block; }
.form-feedback .policy-checkbox p {
display: inline-block;
margin: 0;
margin-left: 5px; }
.form-feedback .policy-checkbox .fake-checkbox {
cursor: pointer;
border: 1px solid #efefef;
width: 30px;
height: 30px;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center; }
.form-feedback .policy-checkbox .fake-checkbox i {
visibility: hidden; }
.form-feedback .policy-checkbox .fake-checkbox.active i {
visibility: visible; }
.form-feedback .policy-checkbox span {
display: inline-block; }
.form-feedback .policy-checkbox a {
color: #e40f24;
border-bottom: 1px solid transparent; }
.form-feedback .policy-checkbox a:hover {
border-bottom: 1px solid #e40f24; }
