Стандартная форма Contact Form 7, это вертикальная колонка полей. Имя, email, тема, сообщение, друг под другом, растянутые на всю ширину. Выглядит топорно и съедает место на экране, особенно если полей больше трёх.

Но есть нюанс: редактор CF7 понимает HTML. А значит, поля можно обернуть в div-контейнеры, задать им ширину и выровнять в ряд. Без плагинов, без хаков, на чистом CSS.

Ниже, два рабочих способа разложить поля Contact Form 7 в 2, 3 или 4 колонки. Первый, универсальный (HTML + CSS), второй, через shortcode-систему темы. Оба проверены на живых сайтах и не ломают вёрстку на мобильных.

💡 Быстрый обзор:

• Посмотрите, как выглядит форма CF7 по умолчанию и в чём проблема вертикальной раскладки
• Скопируйте готовый CSS flexbox и вставьте в дочернюю тему, метод 1, без плагинов
• Если тема уже умеет колонки через шорткоды, включите их поддержку в CF7 и оберните поля, метод 2
• Проверьте результат на десктопе и мобильных, media-query в комплекте

Как выглядит форма Contact Form 7 по умолчанию

После создания формы через «Контактные формы» → «Добавить новую» вы получаете стандартную разметку: текстовые поля, email, сообщение и кнопка отправки, строго одно под другим. В редакторе это выглядит так:

На фронтенде, с темой TwentySeventeen или любой другой без кастомной стилизации форм, вывод будет вертикальным:

Поля «Имя» и «Email» занимают всю доступную ширину, хотя каждому из них хватило бы половины. Результат, форма выглядит громоздко, пользователь скроллит больше, чем нужно, конверсия снижается.

Редактор CF7 спроектирован так, что допускает HTML-разметку внутри шаблона формы. Именно это мы и используем.

Метод 1: HTML + CSS flexbox (рекомендуемый)

Суть метода: оборачиваем поля формы в <div> с CSS-классами колонок, а сами классы прописываем один раз в дочерней теме или через плагин кастомного CSS.

Никаких дополнительных плагинов для колонок не нужно, только CF7 и несколько строк CSS.

CSS-сетка для 2 и 3 колонок

Ниже, готовый CSS с flexbox. В отличие от float-решений, flex автоматически выравнивает колонки по высоте и не требует clearfix-костылей:

1
/* Строка колонок */
2
.cf7-row {
3
    display: flex;
4
    flex-wrap: wrap;
5
    gap: 4%;
6
    margin-bottom: 16px;
7
}
8
 
9
/* 2 колонки */
10
.cf7-col-2 {
11
    flex: 0 0 48%;
12
}
13
 
14
/* 3 колонки */
15
.cf7-col-3 {
16
    flex: 0 0 30.66%;
17
}
18
 
19
/* Мобильные: колонки — одна под другой */
20
@media only screen and (max-width: 767px) {
21
    .cf7-col-2,
22
    .cf7-col-3 {
23
        flex: 0 0 100%;
24
    }
25
}

CSS нужно разместить в дочерней теме (файл style.css) или через плагин Simple Custom CSS, он добавляет поле для стилей в админке, без правки файлов.

Разметка внутри CF7

Откройте редактор формы (Контактные формы → ваша форма) и оберните поля в div-контейнеры с классами из CSS выше. Для 2 колонок:

1
<div class="cf7-row">
2
  <div class="cf7-col-2">
3
    <label>Ваше имя (обязательно)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-2">
8
    <label>Ваш Email (обязательно)
9
      [email* your-email]
10
    </label>
11
  </div>
12
</div>
13
 
14
<label>Ваше сообщение
15
  [textarea your-message]
16
</label>
17
 
18
[submit "Отправить"]

На сайте результат будет таким:

Три колонки, та же логика

Для трёх полей в ряд меняем классы на cf7-col-3 и добавляем третий блок:

1
<div class="cf7-row">
2
  <div class="cf7-col-3">
3
    <label>Ваше имя (обязательно)
4
      [text* your-name]
5
    </label>
6
  </div>
7
  <div class="cf7-col-3">
8
    <label>Ваш Email (обязательно)
9
      [email* your-email]
10
    </label>
11
  </div>
12
  <div class="cf7-col-3">
13
    <label>Тема
14
      [text your-subject]
15
    </label>
16
  </div>
17
</div>
18
 
19
<label>Ваше сообщение
20
  [textarea your-message]
21
</label>
22
 
23
[submit "Отправить"]

Вывод на фронтенде:

Поля «Имя», «Email» и «Тема» выстроились в одну строку, а сообщение, на всю ширину под ними. На экранах уже 767px все колонки схлопываются в одну, форма остаётся читаемой на телефоне.

Плюс flexbox-подхода: если высота полей разная (например, длинный label в одной колонке), строка не разваливается, flex выравнивает колонки автоматически. Float-вёрстка такого не умеет без clearfix и танцев с margin-right.

Метод 2: shortcode-колонки темы

Часть тем WordPress, особенно коммерческие вроде GeneratePress, Kadence, Astra, поставляются со встроенной shortcode-системой для колонок. Выглядит это как кнопка в редакторе, генерирующая шорткоды вида [one_half]...[/one_half] или [column grid="6"]...[/column].

Если ваша тема такое умеет, колонки для CF7 делаются без CSS. Но нужно разрешить CF7 обрабатывать шорткоды внутри формы, по умолчанию он их игнорирует.

Шаг 1: включить шорткоды в редакторе CF7

Ставим плагин Contact Form 7 Shortcode Enabler, он минималистичный, весит несколько килобайт и делает ровно одну вещь: пропускает шорткоды через CF7.

Альтернатива без плагина, фильтр в functions.php дочерней темы:

1
add_filter('wpcf7_form_elements', 'cf7_do_shortcode');
2
 
3
function cf7_do_shortcode($form) {
4
    return do_shortcode($form);
5
}

Шаг 2: обернуть поля шорткодами колонок

Принцип тот же, что с div-классами, но вместо CSS-классов используются шорткоды темы. Кнопка генерации обычно находится в визуальном редакторе WordPress:

Генерируем шорткоды под нужное число колонок и вставляем контент:

Вывод на странице:

Теперь переносим шорткоды в редактор CF7. Для 2 полей в ряд:

1
[one_half]
2
<label>Ваше имя (обязательно)
3
  [text* your-name]
4
</label>
5
[/one_half]
6
 
7
[one_half_last]
8
<label>Ваш Email (обязательно)
9
  [email* your-email]
10
</label>
11
[/one_half_last]
12
 
13
<label>Ваше сообщение
14
  [textarea your-message]
15
</label>
16
 
17
[submit "Отправить"]

Результат на фронтенде, те же две колонки, что и в методе 1. Подход удобен, когда тема уже имеет короткие коды для сетки: не нужно писать CSS, вся адаптивность идёт из коробки.

Минус: вы привязаны к теме. Смените тему, shortcode-колонки исчезнут, форма развалится. Метод 1 с CSS переносится между любыми темами.

Видео: пошаговая настройка multi-column формы

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

⁉️🤔 Частые вопросы

Работает ли flexbox-разметка в старых браузерах?

Flexbox поддерживается всеми современными браузерами уже более десяти лет: Chrome, Firefox, Safari и Edge, полная совместимость без префиксов начиная с версий, вышедших в 2015-2016 годах. Единственное исключение, Internet Explorer 11, где flexbox работает с мелкими багами и требует префикс -ms-, но доля IE11 в мировом трафике упала ниже статистической погрешности. Для production-сайтов flexbox безопасен без префиксов.

Можно ли сделать разное число колонок в разных строках формы?

Да. Flexbox-контейнер .cf7-row изолирует строку: внутри неё могут быть 2, 3 или 4 колонки, а следующая строка, другая комбинация. Например, первая строка, имя + email (2 колонки), вторая, компания + телефон + город (3 колонки), третья, сообщение на всю ширину. Главное, закрыть один .cf7-row перед открытием следующего.

Что делать, если лейблы полей разной длины и колонки съезжают?

В flexbox-строке колонки по умолчанию растягиваются на высоту самой высокой. Явно это включается свойством align-items: stretch (в коде выше оно активно по умолчанию). Если лейблы всё равно визуально плывут, задайте фиксированную высоту лейбла через label { min-height: 48px; display: block; } внутри формы.

Нужно ли включать шорткоды для метода 1 с CSS?

Нет. Метод 1 использует чистый HTML (div-контейнеры с классами), CF7 пропускает HTML-разметку без дополнительных плагинов. Плагин Shortcode Enabler нужен только для метода 2, где внутри формы используются shortcode-колонки темы.

Как быть, если тема использует Gutenberg, а не шорткоды?

Gutenberg-колонки работают на уровне страницы/записи, но не внутри редактора CF7. Сама форма CF7 вставляется шорткодом [contact-form-7 id="..." title="..."] на страницу, и Gutenberg не управляет вёрсткой полей внутри неё. Для колонок внутри формы используйте метод 1 (CSS flexbox), он совместим с любым редактором.

Стоит ли заморачиваться с колонками?

Форма в одну колонку работает. Форма в две колонки, работает и собирает больше отправок, потому что выглядит аккуратнее и требует меньше скролла. Разница в конверсии на первый взгляд копеечная, но на дистанции, десятки лидов.

Flexbox-метод закрывает задачу полностью: 15 строк CSS, 5 минут настройки, ноль плагинов. Он не привязан к теме, не ломается при обновлении движка и не плодит зависимостей. Если тема уже умеет делить контент на колонки, shortcode-подход тоже работает, просто помните про плагин-активатор шорткодов и про то, что при смене темы колонки исчезнут.

Оба способа протестированы на CF7 версии 6.1 и выше, с WordPress 6.5+. Работают на продакшене без сюрпризов.