WordPress как на ладони
Недорогой хостинг для сайтов на WordPress: wordpress.jino.ru Хостинг, VPS/VDS и отдельные сервера только на SSD дисках. 7 дней бесплатного тестирования.

Contact Form 7 — показ полей по условию

Плагин «Conditional Fields for 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.

campusboy 3079youtube.com/c/wpplus
Создатель YouTube канала wp-plus, на котором делюсь своим опытом. Активный пользователь wp-kama.ru. WordPress-разработчик. Разработка сайтов и лендингов. Доработка существующих проектов. Сопровождение ресурсов.
Редакторы: Kama 7099
6 комментов
  • Гога cайт: www.utoweb.com

    Спасибо за отличный контент!

    Ответить4 месяца назад #
  • Без плагина, сделать показ поля по условию можно следующим скриптом (пример для выпадающего списка):

    [select* city id:city first_as_label "-- Выберите город --" "Москва|msk@email.ru" "Санкт-Петербург|spb@email.ru" "Другой город|admin@email.ru"] 
    
    <div id="other-city-wrapper">[text other-city placeholder "Укажите город"]</div>
    
    <script>
    // Скрываем поле, выбрав обертку по ID
    document.getElementById("other-city-wrapper").style.display = 'none';
    // Ловим выбор пользователя
    document.getElementById("city").addEventListener("change", displayTextField);
    function displayTextField() {
    	// Получаем значение из селекта
    	let dropDownText = document.getElementById("city").value;
    	if (dropDownText === "Другой город") {
    		// Показываем, если выбрано нужное значение
    		document.getElementById("other-city-wrapper").style.display = 'block';
    	} else {
    		document.getElementById("other-city-wrapper").style.display = 'none';
    	}
    }
    </script>
    1
    Ответить3 месяца назад #
  • Юрий

    Добрый вечер! А подскажите есть вариант , типа: если поле 1=А а поле 2=В, тогда поле 3=С?

    Ответить2 месяца назад #
    • campusboy3079 cайт: www.youtube.com/c/wpplus

      Добрый. Этот плагин лишь управляет показом/скрытием полей и не может устанавливать полям какие-либо значения, поэтому условия 3=С сделать не сможет, лишь показать или скрыть его при условиях 1=А + 2=В.

      Ответить2 месяца назад #
      • Юрий

        Спасибо. А если способ реализовать это

        Ответить2 месяца назад #
        • campusboy3079 cайт: www.youtube.com/c/wpplus

          Не в курсе, плагины может есть какие, но не искал. Как правило под каждую задачу пишу индивидуальный код. Это достаточно быстро и удобно для меня.

          Ответить2 месяца назад #
Здравствуйте, !     Войти . Зарегистрироваться