Хотите отображать поля формы обратной связи сделанной при помощи плагина Contact Form 7 в несколько колонок? Это простое руководство позволит вам сделать это за пару минут.
Вставьте этот CSS код любым удобным способом. Как вариант, это может быть: файл style.css вашей темы, дополнительные стили в настройщике активной темы или дополнительный плагин для вставки CSS.
Содержание
Готовый код
Разметка
<div class="horizontalForm"> <div class="horizontalField"> <label> Ваше имя [text* your-name autocomplete:name] </label> </div> <div class="horizontalField"> <label> Ваш e-mail [email* your-email autocomplete:email] </label> </div> <div class="formSubmit"> [submit "Отправить"] </div> [acceptance acceptance] Даю <a href="/politika/" target="_blank" rel="nofollow">согласие</a> на обработку персональных данных [/acceptance] </div>
Стили
/* Контейнер */ .horizontalForm { display: flex; flex-wrap: wrap; margin-left: calc( -20px/2 ); margin-right: calc( -20px/2 ); align-items: flex-end; row-gap: 15px; margin-bottom: 40px } /* Поля */ .horizontalField { width: 40%; } /* Кнопка */ .formSubmit { width: 20% } .wpcf7-submit { width: 100% } .horizontalField, .formSubmit { padding-right: calc(20px/2); padding-left: calc(20px/2); } .horizontalField input, .horizontalField label, [data-name="acceptance"] { width: 100% } /* Подтверждение */ .wpcf7-list-item { margin-left: 10px } /* Спиннер */ .wpcf7-spinner { display: none; } /* Ошибка валидации */ .wpcf7-not-valid-tip { position: absolute; top: -38px; right: 0 } input[type="text"].wpcf7-not-valid, input[type="email"].wpcf7-not-valid, input[type="tel"].wpcf7-not-valid { border-color: #dc3232 } @media (max-width: 800px) { .horizontalForm { flex-direction: column } .horizontalField, .formSubmit { width: 100% } .formSubmit { order: 1 } }
Поля имя и email выстроятся в две колонки, а текстовая область для сообщения будет под ними.
и как его понять
контейнеров и элементов
применения Flexbox
Как убрать автоматическую вставку тега P в Contact form 7
По умолчанию Contact Form 7 вставляет тег <p>
когда создаёт свою разметку. Это приводит к неприятным сюрпризам и чтобы отключить автовставку тега, нужно сделать следующее:
Через wp-config.php
- Найдите в корневой папке вашего сайта файл wp-config.php;
- Прокрутите файл до конца и отыщите комментарий
/* Это всё, дальше не редактируем. Успехов! */
или/* That's all, stop editing! Happy blogging. */
; - Вставьте этот код
define( 'WPCF7_AUTOP', false );
НАД надписью из пункта 2; - Сохраните файл.
Через functions.php
Нужно вставить в functions.php темы или через плагин вставки кода эту строку:
add_filter('wpcf7_autop_or_not', '__return_false');
Видео как вставлять код через плагин сниппетов
Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.
С уважением, Цифровой Алекс