Хотите отображать поля формы обратной связи, сделанной при помощи плагина Contact Form 7, в две или три колонки? Это простое руководство позволит вам настроить поля за пару минут.

Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей дочерней темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки CSS. Можно этот код добавить непосредственно в style.css плагина, он находится в директории: public_html/wp-content/plugins/contact-form-7/includes/css. Но в этом случае, при обновлении плагина он будет стираться и его придётся вновь добавлять...

.one-half, .one-third, .two-third, .one-fourth {
    position: relative;
    margin-right: 4%;
    float: left;
    margin-bottom: 10px;
}
.two-third {
  margin-right: 2.5%;
}
.one-half { width: 48%; }
.one-third { width: 30.66%; }
.two-third { width: 66%; }
.one-fourth {width: 22%;}
.last {
    margin-right: 0 !important;
    clear: right;
}
@media only screen and (max-width: 1024px) {
.one-fourth {
        width: 100%;
        margin-right: 0;
    }
}
@media only screen and (max-width: 767px) {
    .one-half, .one-third, .two-third {
        width: 100%;
        margin-right: 0;
    }
}
.wpcf-wrap {
    min-height: 90px;
}
div.wpcf7-response-output {
    width: 100%;
    clear: both;
    margin: 0;
}
.wpcf-accept {
  clear: both;
}
.wpcf7-acceptance > .wpcf7-list-item {
  margin: 0;
}
.wpcf-accept > .wpcf7-form-control-wrap {
    display: inline-block !important;
}

Поля Contact Form 7 в 2 колонки

Чтобы сделать поля формы в 2 колонки, необходимо использовать подобную конструкцию, которую нужно вставить в основное поле создания формы Contact Form 7:

 <div class="one-half">
<label> Ваше имя (обязательно)
    [text* your-name] </label>
</div>
 
<div class="one-half last">
<label> Ваш e-mail (обязательно)
    [email* your-email] </label>
</div>
 
<label> Сообщение
    [textarea your-message] </label>
 
[submit "Отправить"]

Поля Contact Form 7 в 3 колонки с подтверждением

Если же вы хотите сделать горизонтальную форму, где все поля и кнопка отправки будут находится в одну линию, а поле подтверждения согласия на обработку данных под ними, то используйте подобную конструкцию:

 <div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-half">
          [text* your-name placeholder "Ваше имя"]
    </div>
    <div class="one-half last">
          [tel* your-phone placeholder "Ваш телефон"]
    </div>
    <div class="wpcf-accept">
      [acceptance acceptance-487] 
Заполняя форму <a href="/">соглашаюсь</a> 
на обработку персональных данных [/acceptance]
    </div>
  </div><!-- .two-third -->
  <div class="one-third last">
    [submit "Получить консультацию"]
  </div>
</div>
<div style="clear: both"></div>
[response]

Поля Contact Form 7 в 3 колонки без подтверждения

Если же вы считаете, что подтверждение о согласии на обработку персональных данных для слабаков, то вот вариант без него:

 <div class="wpcf-wrap">
    <div class="one-third">
          [text* your-name placeholder "Ваше имя"]
    </div>
    <div class="one-third">
          [tel* your-phone placeholder "Ваш телефон"]
    </div>
  <div class="one-third last">
    [submit "Получить консультацию"]
  </div>
</div>
<div style="clear: both"></div>
[response]

Как убрать автоматическую вставку тега P в Contact form 7

По умолчанию Contact Form 7 вставляет тег <p> когда создаёт свою разметку. Это частенько приводит к неприятным сюрпризам и если вы столкнулись с таковым, то нужно сделать следующее.

1. Найдите в корневой папке вашего сайта файл wp-config.php;
2. Прокрутите файл до конца и отыщите комментарий /* Это всё, дальше не редактируем. Успехов! */ или /* That's all, stop editing! Happy blogging. */;
3. Вставьте этот код define( 'WPCF7_AUTOP', false ); НАД надписью из пункта 2;
4. Сохраните файл.

Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.

Копипаста с сайта Александра Парфилова - Спасибо ему огромное!!! 

https://wplovers.pw/contact-form-7-v-neskolko-kolonok/