Как отображать поля Contact Form 7 в 2 или более колонок

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

Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки 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 "Отправить"]

Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.

Поля 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]

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

Ну и на дорожку, поля и кнопка Contact Form7 в 4 колонки. С подтверждением:

<div class="wpcf-wrap">
  <div class="two-third">
    <div class="one-third">
          [text* your-name placeholder "Ваше имя"]
    </div>

  <div class="one-third">
          [email* your-email placeholder "Ваш email"]
    </div>

    <div class="one-third 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]

И без подтверждения:

<div class="wpcf-wrap">
    <div class="one-fourth">
          [text* your-name placeholder "Ваше имя"]
    </div>

  <div class="one-fourth">
          [email* your-email placeholder "Ваш email"]
    </div>

    <div class="one-fourth">
          [tel* your-phone placeholder "Ваш телефон"]
    </div>

  <div class="one-fourth 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 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.

С уважением, Цифровой Алекс