Две формы 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; }
→ Ссылка