WordPress как на ладони
campusboy и Kama5.7 лет назад4

Conditional Fields for Contact Form 7 │

Contact Form 7

Позволяет добавлять условную логику в формы плагина Contact Form 7.

Оглавление:

Создание обычной формы

Мы уже изучали, как создать форму в Contact Form 7, поэтому сразу перейдем к примерам. Пусть у нас есть форма "Запись на онлайн курсы":

<fieldset>
<legend>Основные поля</legend>

Ваше имя
[text your-name]

Ваш email
[email your-email]
</fieldset>

<fieldset>
<legend>Дополнительные поля</legend>

Какую CMS хотите выучить?
[select pick-cms "WordPress" "Joomla!" "Drupal" "Другую"]

Ваш вариант
[text other]
</fieldset>

[submit]

Создание условной логики

Рассмотрим варианты, где нужно отображать одни поля при одном условии и другие при другом, т.е. варианты условного отображения полей.

Допустим мы хотим дать возможность пользователю отображать ту или иную группу полей. Создадим в начале формы поле с выпадающим списком:

Какие поля вы хотели бы просмотреть?
[select pick-fields "Основные поля" "Дополнительные поля" "Все поля"]

Создание групп полей

После установки плагина Conditional Fields for Contact Form 7 на странице редактирования формы появится новая кнопка Conditional fields Group:

По нажатию на кнопку появится всплывающее окно, в котором надо задать имя (оно генерируется автоматически, можно оставить как есть):

Генератор создал новый шорткод [group group-basic][/group], после нажатия "Вставить тег" он попадёт в форму как есть. Этот шорткод создает условие, нечто очень похоже на конструкцию:

if( условие ) {
	// Делаем что-либо, если условие выполнено
}

Шорткод должен приобрести вид:

[group group-basic]
Тут контент, который должен отобразиться при выполнении условия
[/group]

Так как имя мы задали group-basic, соответственно этим контентом будут являться блок с основными полями. Обернем их в наш условный тег:

[group group-basic]

<fieldset>
<legend>Основные поля</legend>

Ваше имя
[text your-name]

Ваш email
[email your-email]
</fieldset>

[/group]

Если сейчас посмотреть как выглядит форма, то блок с основными полями будет скрыт, потому что мы ещё не задали условия при котором он должен отображаться.

Создание условий

После добавления полей и "условных шорткодов" очень важно сначала сохранить форму. В противном случае созданные поля и группы не будут отображаться на вкладке «Условные поля / Conditional Fields».

Добавим первое условие:

  1. За значением какого поля надо следить? Указываем имя поля, в нашем случае pick-fields.
  2. Само условие - "равно" или "не равно" значению, что будет указано в 3 пункте.
  3. Указываемое тут значение будет сверяться с выбранным значением у поля из 1 пункта.
  4. Какой блок отобразить при выполнении условия. В нашем случае это group-basic.

Условие будет читаться так:
Когда в поле pick-fields будет выбран вариант ответа "Основные поля" - отобразить контент внутри тега group-basic.

в старой версии можно было еще выбрать, что сделать, если условие выполнится - показать блок или скрыть? Теперь блок можно только показать (then show).

Но у нас несколько значений у поля pick-fields, поэтому нужно прописать больше условий, чтобы предусмотреть все варианты взаимодействия с формой.

Весь код формы:

Какие поля вы хотели бы просмотреть?
[select pick-fields "Основные поля" "Дополнительные поля" "Все поля"]

[group group-basic]

	<fieldset>
	<legend>Основные поля</legend>

	Ваше имя
	[text your-name]

	Ваш email
	[email your-email]
	</fieldset>

[/group]

[group group-advanced]

	<fieldset>
	<legend>Дополнительные поля</legend>

	Какую CMS хотите выучить?
	[select pick-cms "WordPress" "Joomla!" "Drupal" "Другую"]

	[group group-other]
		Ваш вариант
		[text other]
	[/group]

	</fieldset>

[/group]

[submit]

Все условия:

Результат:

Настройка шаблона письма

Начиная с версии плагина 0.2 можно генерировать сообщение электронной почты на основе того, какие группы были видны. Для этого вы можете просто обернуть части контента в шаблоне письма тегами [group-name] ... [/ group-name].

Составим шаблон письма для нашего примера:

Здравствуйте, уважаемый админ!

[group-basic]
Пользователь по имени [your-name] и почтой [your-email] решился записаться на курсы.
[/group-basic]

[group-advanced]
Пользователь указал, что хочет изучить CMS "[pick-cms]". [group-other]В примечании указал "[other]".[/group-other]
[/group-advanced]

С уважением, Ваш сайт!

Теперь, если пользователь заполнит только блок с основными полями, то на почту придёт письмо:

Пользователь по имени Дмитрий и почтой my-test@gmail.com решил записаться на курсы.

Если пользователь заполнил только блок с дополнительными полями и выбрал любой вариант CMS, кроме "Другую":

Пользователь указал, что хочет изучить CMS WordPress.

Если пользователь заполнил только блок с дополнительными полями и выбрал вариант CMS "Другую":

Пользователь указал, что хочет изучить CMS "Другую". В примечании указал "Grav".

А если всё вместе:

Пользователь по имени Дмитрий и почтой my-test@gmail.com решил записаться на курсы.

Пользователь указал, что хочет изучить CMS "Другую". В примечании указал "Grav".

--

Мы рассмотрели пример с выпадающими списками, так как такой вариант самый распространённый, но с помощью плагина Conditional Fields for Contact Form 7 можно создать условия на основе любого другого типа поля. В нашей специальной статье вы можете узнать, какие типы полей поддерживает Contact Form 7.

4 комментария
    Войти