Contact Form 7

Пример формы бронирования

<div class="booking">
	<p class="newform">
		 Даты:
	</p>
	<div class="row2">
		<div class="col-sm-6">
 <label> Дата заезда </label>[date date-27]
		</div>
		<div class="col-sm-6">
 <label> Дата выезда </label>[date date-79]
		</div>
	</div>
	<p class="newform">
		 Гости:
	</p>
	<div class="row2">
		<div class="col-sm-9">
 <span style="font-weight:600;">взрослые</span> [number number-796 min:0 max:10 "0"]
		</div>
		<div class="col-sm-9">
 <span style="font-weight:600;">дети от 6ти до 16 лет</span> [number number-501 min:0 max:10 placeholder "0"]
		</div>
		<div class="col-sm-9">
 <span style="font-weight:600;">дети до 6ти лет</span> [number number-393 min:0 max:10 placeholder "0"]
		</div>
	</div>
	<p class="newform">
		 Добавить оздоровительную программу:
	</p>
	<div style="text-align:center; margin-bottom:20px; font-weight:600;">
		 [checkbox checkbox-764 exclusive label_first "Да" "Нет"]
	</div>
	<p class="newform">
		 Контакты
	</p>
	<div class="row2">
		<div class="col-sm-6">
 <label>ФИО* </label>[text* your-name] <label>телефон* </label>[tel* phone-number] <label>e-mail* </label>[email* your-email]
		</div>
		<div class="col-sm-6">
 <label> Комментарий [textarea your-message] </label>
		</div>
	</div>
	<div style="text-align:center;">
 <label>* - поле обязательно для заполнения</label>
		[acceptance acceptance-306] Согласие на обработку персональных данных [/acceptance]
		<div>
			 [submit "Отправить"]
		</div>

.booking {
max-width:700px;
margin: 0 auto;
}
.booking label {
    font-size: 16px;
    text-transform: lowercase;
    font-weight: 600;
}
.booking p {
    font-size: 16px;
}
.row2 {
    display: flex;
    margin-right: -15px;
    margin-left: -15px;
	margin-bottom: 30px;"
}
.booking .wpcf7-form-control.wpcf7-number.wpcf7-validates-as-number {
    max-width: 55px;
}
.booking .wpcf7-form-control.wpcf7-date.wpcf7-validates-as-date {
    max-width: 200px;
}
.booking .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    max-width: 400px;
}
.booking .wpcf7-form-control.wpcf7-textarea {
    margin: 10px;
}
.booking .wpcf7-form-control.wpcf7-text.wpcf7-validates-as-required {
    padding: 8px;
    margin: 10px 0 0 0;
}
.booking .col-sm-6 {
    flex: 0 0 100%;
    max-width: 50%;
    text-align: center;
}
.booking .col-sm-9 {
    flex: 0 0 100%;
    max-width: 33%;
    text-align: center;
}
.newform {
    text-align: center;
    font-weight: 600;
    text-transform: uppercase;
}

Теперь наша форма на основе плагина Contact Form с колонками!

Recaptcha для Contact Form 7

Начиная с версии Contact Form 7 5.1 и выше в плагине предусмотрена интеграция с reCAPTCHA v3, теперь потенциальным спамерам не нужно ставить галочку «Я не робот» и выбирать велосипеды на картинках. reCAPTCHA v3 – работает, основываясь на оценках поведения пользователей вашего сайта.
Для регистрации сайта нужно быть зарегистрированным пользователем сервисов google, после авторизации в google или gmail переходим по ссылке https://www.google.com/recaptcha/admin/create
Вводим название своего сайта (без www, без http:// или https://), выбираем тип reCAPTCHA v3, отправляем запрос.
…В соответствии с разделом 3(d) Условий использования Google API вы соглашаетесь с тем, что, если вы используете API, вы несете ответственность за предоставление пользователям всех необходимых уведомлений, касающихся сбора данных и их отправки в Google, и за получение их согласия на эти операции…

Contact Form 7 - Маска телефонного номера

Поделиться: Спросить:

Сообщение успешно отправлено!

К сожалению, сообщение не отправлено.