Как разместить поля Contact Form 7 в две и более колонок
Контактная форма cf7 своими руками с двумя и более полей горизонтально
<div class="customForm">
<div class="customField">
[text* your-name autocomplete:name placeholder "Введите ваше имя"]
</div>
<div class="customField">
[phonetext* phonetext-620 minlength:9 maxlength:10 placeholder numberonly "ваш телефон"]
</div>
<div class="customTextarea">
[textarea textarea-165 placeholder "Введите ваше сообщение"]
</div>
<div class="customSubmit">
[submit "Отправить"]
</div>
<div class="customAcceptance" style="font-size: 11px;">
[acceptance acceptance] Вы соглашаетесь с <span style="text-decoration: underline;"><a href="/privacy-policy">условиями обработки персональных данных</a> [</acceptance>
</div>
</div>
/* Контейнер */
.customForm {
display: flex;
flex-wrap: wrap;
margin-left: calc(-20px / 2);
margin-right: calc(-20px / 2);
align-items: flex-end;
row-gap: 0px;
margin-bottom: 0px;
}
/* Поля */
.customField {
width: 50%;
}
/* Текстовое поле */
.customTextarea {
width: 100%;
padding-right: calc(20px / 2);
padding-left: calc(20px / 2);
}
.customTextarea textarea {
width: 100%;
box-sizing: border-box;
min-height: 89px;
border-radius: 20px; /* Скругление углов поля */
}
/* Кнопка */
.customSubmit {
width: 100%;
}
.customSubmit .wpcf7-submit {
width: 100%;
}
.customField, .customSubmit {
padding-right: calc(20px / 2);
padding-left: calc(20px / 2);
}
.customField input, .customField label,
[data-name="acceptance"] {
width: 100%;
height: 60px; /* Высота input */
border-radius: 50px; /* Скругление углов поля */
}
/* Подтверждение */
.wpcf7-list-item {
margin-left: 10px;
}
/* Спиннер */
.wpcf7-spinner {
display: none;
}
/* Ошибка валидации */
.wpcf7-not-valid-tip {
position: absolute;
}
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) {
.customForm {
flex-direction: column;
}
.customField, .customSubmit {
width: 100%;
}
.customSubmit {
order: 1;
}
}
Вот такая форма у нас получилась в конечном итоге! Для вывода маски номера телефона в поле формы использовался доп. плагин https://wordpress.org/plugins/country-phone-field-contact-form-7/
Если у вас самостоятельно не получилось реализовать по данной инструкции такую форму, пишите в мессенджеры помогу с реализацией!
