Standardowy formularz Contact Form 7 to pionowa kolumna pól. Imię, email, temat, wiadomość, jedno pod drugim, rozciągnięte na całą szerokość. Wygląda to niezgrabnie i zajmuje miejsce na ekranie, zwłaszcza gdy pól jest więcej niż trzy.

Jest jednak pewien niuans: edytor CF7 rozumie HTML. Oznacza to, że pola można opakować w kontenery div, nadać im szerokość i wyrównać w rzędzie. Bez wtyczek, bez hacków, na czystym CSS.

Poniżej przedstawiam dwa działające sposoby na rozłożenie pól Contact Form 7 w 2, 3 lub 4 kolumny. Pierwszy, uniwersalny (HTML + CSS), drugi, wykorzystujący system shortcode'ów motywu. Oba zostały sprawdzone na działających stronach i nie psują układu na urządzeniach mobilnych.

💡 Szybki przegląd:

• Proszę zobaczyć, jak wygląda domyślny formularz CF7 i na czym polega problem układu pionowego
• Proszę skopiować gotowy CSS flexbox i wkleić go do motywu potomnego, metoda 1, bez wtyczek
• Jeśli motyw obsługuje już kolumny przez shortcode'y, proszę włączyć ich wsparcie w CF7 i opakować pola, metoda 2
• Proszę sprawdzić wynik na desktopie i urządzeniach mobilnych, media query w zestawie

Jak wygląda domyślny formularz Contact Form 7

Po utworzeniu formularza przez „Formularze kontaktowe" → „Dodaj nowy" otrzymują Państwo standardowy znacznik: pola tekstowe, email, wiadomość i przycisk wysyłania, ściśle jedno pod drugim. W edytorze wygląda to tak:

Na froncie, z motywem TwentySeventeen lub dowolnym innym bez niestandardowej stylizacji formularzy, wynik będzie pionowy:

Pola „Imię" i „Email" zajmują całą dostępną szerokość, choć każdemu z nich wystarczyłaby połowa. W rezultacie formularz wygląda nieporęcznie, użytkownik przewija więcej, niż to konieczne, a konwersja spada.

Edytor CF7 został zaprojektowany tak, że dopuszcza znaczniki HTML wewnątrz szablonu formularza. Właśnie to wykorzystujemy.

Metoda 1: HTML + CSS flexbox (zalecana)

Istota metody: opakowujemy pola formularza w <div> z klasami CSS kolumn, a same klasy definiujemy raz w motywie potomnym lub przez wtyczkę do niestandardowego CSS.

Żadne dodatkowe wtyczki do kolumn nie są potrzebne, jedynie CF7 i kilka linijek CSS.

Siatka CSS dla 2 i 3 kolumn

Poniżej znajduje się gotowy CSS z flexboxem. W przeciwieństwie do rozwiązań opartych na float, flex automatycznie wyrównuje kolumny na wysokość i nie wymaga sztuczek z 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 należy umieścić w motywie potomnym (plik style.css) lub przez wtyczkę Simple Custom CSS, która dodaje pole na style w panelu administracyjnym, bez edycji plików.

Znacznik wewnątrz CF7

Proszę otworzyć edytor formularza (Formularze kontaktowe → Państwa formularz) i opakować pola w kontenery div z klasami z powyższego CSS. Dla 2 kolumn:

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 "Отправить"]

Na stronie rezultat będzie następujący:

Trzy kolumny, ta sama logika

Dla trzech pól w rzędzie zmieniamy klasy na cf7-col-3 i dodajemy trzeci blok:

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 "Отправить"]

Wyświetlanie na frontendzie:

Pola „Imię", „Email" i „Temat" ułożyły się w jednym rzędzie, a pole wiadomości zajęło całą szerokość pod nimi. Na ekranach do 767px wszystkie kolumny zwijają się w jedną, formularz pozostaje czytelny na telefonie.

Zaleta podejścia flexbox: jeśli wysokość pól jest różna (na przykład długa etykieta w jednej kolumnie), rząd się nie rozjeżdża, flex wyrównuje kolumny automatycznie. Układ oparty na float nie radzi sobie z tym bez clearfix i kombinowania z margin-right.

Metoda 2: kolumny przez shortcode motywu

Część motywów WordPress, zwłaszcza komercyjnych, takich jak GeneratePress, Kadence, Astra, jest dostarczana z wbudowanym systemem shortcode do tworzenia kolumn. Wygląda to jak przycisk w edytorze, który generuje shortcody w rodzaju [one_half]...[/one_half] lub [column grid="6"]...[/column].

Jeśli Państwa motyw to obsługuje, kolumny dla CF7 tworzy się bez CSS. Trzeba jednak zezwolić CF7 na przetwarzanie shortcode wewnątrz formularza, ponieważ domyślnie je ignoruje.

Krok 1: włączenie shortcode w edytorze CF7

Instalujemy wtyczkę Contact Form 7 Shortcode Enabler, jest minimalistyczna, waży kilka kilobajtów i robi dokładnie jedną rzecz: przepuszcza shortcody przez CF7.

Alternatywa bez wtyczki, filtr w functions.php motywu potomnego:

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

Krok 2: opakowanie pól shortcode kolumn

Zasada jest taka sama jak przy klasach div, ale zamiast klas CSS używa się shortcode motywu. Przycisk generowania znajduje się zwykle w edytorze wizualnym WordPress:

Generujemy shortcody dla potrzebnej liczby kolumn i wstawiamy zawartość:

Wyświetlanie na stronie:

Teraz przenosimy shortkody do edytora CF7. Dla 2 pól w rzędzie:

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 "Отправить"]

Rezultat na frontendzie: te same dwie kolumny co w metodzie 1. Podejście jest wygodne, gdy motyw ma już gotowe shortkody do siatki: nie trzeba pisać CSS, cała responsywność działa od razu.

Minus: jest Pan/Pani związany z motywem. Przy zmianie motywu kolumny z shortkodów znikną, a formularz się rozsypie. Metoda 1 z CSS działa niezależnie od motywu.

Wideo: konfiguracja formularza wielokolumnowego krok po kroku

Szczegółowy poradnik wideo po angielsku, autor pokazuje oba podejścia, w tym konfigurację flexboksa i dostosowanie do urządzeń mobilnych:

⁉️🤔 Często zadawane pytania

Czy układ flexbox działa w starszych przeglądarkach?

Flexbox jest wspierany przez wszystkie nowoczesne przeglądarki od ponad dziesięciu lat: Chrome, Firefox, Safari oraz Edge, pełna kompatybilność bez prefiksów począwszy od wersji wydanych w latach 2015-2016. Jedynym wyjątkiem jest Internet Explorer 11, gdzie flexbox działa z drobnymi błędami i wymaga prefiksu -ms-, ale udział IE11 w globalnym ruchu spadł poniżej błędu statystycznego. W przypadku witryn produkcyjnych flexbox jest bezpieczny bez prefiksów.

Czy można zrobić różną liczbę kolumn w różnych wierszach formularza?

Tak. Kontener flexboksowy .cf7-row izoluje wiersz: wewnątrz niego mogą być 2, 3 lub 4 kolumny, a w kolejnym wierszu inna kombinacja. Na przykład pierwszy wiersz: imię + email (2 kolumny), drugi: firma + telefon + miasto (3 kolumny), trzeci: wiadomość na całą szerokość. Kluczowe jest zamknięcie jednego .cf7-row przed otwarciem następnego.

Co zrobić, gdy etykiety pól mają różną długość i kolumny się rozjeżdżają?

W wierszu flexboksowym kolumny domyślnie rozciągają się do wysokości najwyższej. Jawnie włącza to właściwość align-items: stretch (w powyższym kodzie jest ona domyślnie aktywna). Jeśli etykiety nadal wizualnie „pływają", proszę nadać stałą wysokość etykiecie przez label { min-height: 48px; display: block; } wewnątrz formularza.

Czy trzeba włączać shortkody dla metody 1 z CSS?

Nie. Metoda 1 wykorzystuje czysty HTML (kontenery div z klasami), CF7 przepuszcza znaczniki HTML bez dodatkowych wtyczek. Wtyczka Shortcode Enabler jest potrzebna tylko dla metody 2, gdzie wewnątrz formularza używa się shortkodów kolumn z motywu.

Co zrobić, jeśli motyw używa Gutenberga, a nie shortkodów?

Kolumny Gutenberga działają na poziomie strony/wpisu, ale nie wewnątrz edytora CF7. Sam formularz CF7 wstawia się na stronę shortkodem [contact-form-7 id="..." title="..."] i Gutenberg nie kontroluje układu pól wewnątrz niego. Do kolumn wewnątrz formularza proszę użyć metody 1 (CSS flexbox), jest ona kompatybilna z każdym edytorem.

Czy warto zawracać sobie głowę kolumnami?

Formularz w jednej kolumnie działa. Formularz w dwóch kolumnach działa i zbiera więcej wysyłek, ponieważ wygląda schludniej i wymaga mniej przewijania. Różnica w konwersji na pierwszy rzut oka wydaje się groszowa, ale w dłuższej perspektywie to dziesiątki leadów.

Metoda flexboksowa rozwiązuje zadanie w całości: 15 linii CSS, 5 minut konfiguracji, zero wtyczek. Nie jest związana z motywem, nie psuje się przy aktualizacji silnika i nie generuje zależności. Jeśli motyw już potrafi dzielić treść na kolumny, podejście z shortkodami również działa, proszę tylko pamiętać o wtyczce aktywującej shortkody i o tym, że przy zmianie motywu kolumny znikną.

Oba sposoby przetestowano na CF7 w wersji 6.1 i wyższej, z WordPress 6.5+. Działają na produkcji bez niespodzianek.