Хотите отображать поля формы обратной связи сделанной при помощи плагина 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 ситуацию всего в одной статье. Пишите в комментариях свои ситуации! Будем разбирать и дополнять статью вместе. Только указывайте какой вариант кода используете.

Тоже достал спам приходящий с форм Elementor Pro? Тогда смотри видео и внедряй один из способов защиты форм Элементор от спама.

Связанные видео

Выделение части заголовка — https://youtu.be/IfwOCA9b_Xc

Плагины для защиты Elementor от спама

Создать капчу — https://www.google.com/recaptcha/admin/create

Правила скрытия капчи — https://developers.google.com/recaptcha/docs/faq#id-like-to-hide-the-recaptcha-badge.-what-is-allowed

Атрибуция reCaptcha v3

Сайт защищён Google reCAPTCHA с применением
<a href="https://policies.google.com/privacy" target="_blank" rel="nofollow noreferrer">Политики конфиденциальности</a> 
и <a href="https://policies.google.com/terms" target="_blank" rel="nofollow noreferrer">Правилами пользования</a>.

Скрытие reCaptcha V3

.grecaptcha-badge {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    -webkit-clip-path: inset(50%);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

Библиотека маска ввода: https://github.com/digitalBush/jquery.maskedinput

Первый код для подключения файла библиотеки:

function wpl_scripts() {
  	$uploads = wp_upload_dir();
  $upload_path = $uploads['baseurl'];
    wp_enqueue_script('masked-input', $upload_path . '/FOLDER_NAME/jquery.maskedinput.min.js', array('jquery'), '1.1', true);
}
add_action( 'wp_enqueue_scripts', 'wpl_scripts' );

Второй для инициализации:

<script type="text/javascript"> 
jQuery(document).ready(function($) {
  $('input[type="tel"]').mask("+7-(999)-999-9999",{placeholder:" "});
});
</script>

Внимание! Яндекс изменил код отслеживания и он немного отличается, но принцип остался прежним. Нужно заменить XXXXXX на номер счётчика.

Код для одной цели:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
	ga('send', 'event', 'Feedback', 'Submit');
	ym(XXXXXX, 'reachGoal', 'feedback');
}, false );
</script>

Код для учёта целей из нескольких форм:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
if ( '747' == event.detail.contactFormId ) {
  ga('send', 'event', 'Feedback', 'Submit');  
  ym(XXXXXX, 'reachGoal', 'write');
 }
if ( '1033' == event.detail.contactFormId ) {
  ga('send', 'event', 'Leads', 'Submit');  
  ym(XXXXXX, 'reachGoal', 'leads');
 }
if ( '1034' == event.detail.contactFormId ) {
  ga('send', 'event', 'Bid', 'Submit');  
  ym(XXXXXX, 'reachGoal', 'bid');
 }
}, false );
</script>