1

Есть интересная задачка.

Суть в следующем: Существует форма из 4 шагов, выводится в модальном окне, шаги подгружаются на ajax. На первых трех шагах пользователь отвечает на вопросы чекбоксами (первый шаг - вопрос: Что умеете делать? варианты: рисовать, кодить, писать | остальные шаги по аналогии), на четвертом шаге ему необходимо показать результат исходя из поставленных им чекбоксов (например: Художник: 4 из 18, Блогер: 11 из 18, Программист: 0 из 18), чтобы пользователь определился в чем он сильнее и ниже расположить поля с телефоном, мылом, селект на профориентацию и т.д. и еще ниже кнопка ОТПРАВИТЬ.

Таким образом я так понимаю, что мне необходимо в function.php написать функцию, которая обработала бы чекбоксы по нажатию на кнопку при переходе с 3 шага на 4?

Вот как это по-идее должно выглядеть:

[ШАГ1]

1. Что вы умеете?

[checkbox* checkbox-801 use_label_element "рисовать" "кодить" "писать истории"]

<button>Продолжить</button>

[ШАГ2]

2. Что еще умеете?

[checkbox* checkbox-802 use_label_element "еще рисовать" "еще кодить" " еще писать истории"]

<button>Назад</button> <button>Продолжить</button>

[ШАГ3]

3. Что еще?

[checkbox* checkbox-803 use_label_element "снова рисовать" "снова кодить" "снова писать истории"]

<button>Назад</button> <button>Продолжить c выполнением функции</button>

[ШАГ4]

Ваша профориентация:
[показать результаты подсчета чекбоксов]

Исходя из них вы можете зарегистрироваться
[select* menu-508 include_blank "Художник" "Кодер" "Блогер"]
[text your-name]
[email your-email]

<button>Назад</button> <button submit>ОТПРАВИТЬ</button>

Обработка чекбоксов идет следующим образом: из первого массива checkbox-801: 2,4,11 - прибавляют по +1 к переменной художника, а 1,3,6 +1 к переменной кодера

из второго массива checkbox-802: 1,2,3 - +1 к художнику, а 1,3,4 + 1 к блогеру и т.д. главное что один чекбокс может дать +1 как блогеру так и художнику.

Вывод результатов простенькой визуально понятной диаграммой типа:

<h1>Художник</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от художника>/18*100)%; background: #ff0000">
   </div>
</div>
<h1>Кодер</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от кодера>/18*100)%; background: #ff0000">
   </div>
</div>
<h1>Блогер</h1>
<div style="width:100%; background: #000">
   <div style="width: calc(<подставить переменную от блогера>/18*100)%; background: #ff0000">
   </div>
</div>

Реализуема ли данная задача с помощью одного лишь плагина contact form 7? Возможно ли выполнить функцию подсчета результатов ДО submit формы?

1
  • Нужна помощь в создании кода функции и прикрепления ее к кнопке перехода с 3-го шага на 4-ый. Из стандартных событый wpcf7, которые могут запустить скрипт и обработать чекбоксы есть лишь wpcf7mailsent, но он срабатывает лишь после нажатия кнопки submit
    – wyrmax
    Commented 8 февр. 2018 в 5:04

2 ответа 2

0

В общем случае да, реализуема.

Дело в том, что:

  • Contact Form 7 позволяет полностью настраивать вёрстку и можно попробовать добавить к форме нужные JS скрипты;
  • Как и многие другие плагины Contact Form 7, это open source проект. Поэтому при желании можно доработать этот плагин "под себя".
0

Для решения таких задач для CF7 существует масса разных плагинов-дополнений. Напр https://wordpress.org/plugins/cf7-conditional-fields/
https://wordpress.org/plugins/contact-form-7-multi-step-module/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.