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

Хотите отображать поля формы обратной связи сделанной при помощи плагина 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 выстроятся в две колонки, а текстовая область для сообщения будет под ними.

Как убрать автоматическую вставку тега P в Contact form 7

По умолчанию Contact Form 7 вставляет тег <p> когда создаёт свою разметку. Это приводит к неприятным сюрпризам и чтобы отключить автовставку тега, нужно сделать следующее:

Через wp-config.php

1. Найдите в корневой папке вашего сайта файл wp-config.php;
2. Прокрутите файл до конца и отыщите комментарий /* Это всё, дальше не редактируем. Успехов! */ или /* That's all, stop editing! Happy blogging. */;
3. Вставьте этот код define( 'WPCF7_AUTOP', false ); НАД надписью из пункта 2;
4. Сохраните файл.

Через functions.php

Нужно вставить в functions.php темы или через плагин вставки кода эту строку:

add_filter('wpcf7_autop_or_not', '__return_false');

Видео как вставлять код через плагин сниппетов

Вот таким образом мы очень просто можем отображать форму Contact Form 7 в 2, 3 и даже 4 колонки. Разумеется, невозможно разобрать 1000 и 1 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.

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