Стандартна форма Contact Form 7 — це вертикальна колонка полів. Ім’я, email, тема, повідомлення, одне під одним, розтягнуті на всю ширину. Виглядає грубо й з’їдає місце на екрані, особливо якщо полів більше трьох.

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

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

💡 Швидкий огляд:

• Подивіться, як виглядає форма 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+. Працюють на продакшені без сюрпризів.