Создание логики через плагин Quasar Form Pro

Как использовать логику?

Quasar form Pro имеет мощную встроенную условную логику. Вы можете использовать это для следующих задач:

  1. Показ / скрытие полей
  2. Изменение текста / изменения html в поле ‘custom text’
  3. Установить / изменить значение поля
  4. Обнулить значение чекбокса
  5. Пересчитать итог калькулятора
  6. Добавить класс / удалить класс
  7. Исключить поле из письма на почту/добавить поле в письмо на почту
  8. Cделать поле обязательным/необязательным для заполнения
  9. Добавить переменную / изменить значение переменной
  10. Скрыть таб / Показать таб / Переключить на таб

Принцип работы логики

Логика работает по простой схеме, которая состоит из двух элементов — условия и действия.

1) Условие. Состоит из 2 или 3 частей в зависимости от типа условия.

  1. Селектор условия — id поля, значение которого проверяется
  2. Тип условия — равно, не равно, больше, меньше, заполнено, не заполнено, имеет класс, не имеет класса.
  3. Значение условия (присутствует не во всех типах условий)

Пример (двигайте ползунок):

0%
Сколько визиток вам надо?

Минимальное количество для заказа 5 штук

В приведенной выше форме установлена следующая логика (скриншот):

Если значение ползунка станет больше 4, то будет показана скрытая кнопка «Отправить» (кнопка была скрыта, через настройки самого поля). Попробуйте — подвигать ползунок и сами все увидите.

2) Действие, вторая часть любой логики, может состоять из 3 и более значений в зависимости от типа действия. В форме приведенной выше — действие это показ кнопки.

Более сложная логика

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

Например (выберите тип материала  — Качественный и двигайте ползунок):

0%
Сколько визиток вам надо?

При заказе 10 визиток из качественного материала доставка бесплатна.

Материал
Нужна ли доставка?

В приведенной выше форме установлено 2 логики (скриншот):

Первая логика имеет 2 условия и 2 действия, если значение ползунка больше 10 и в выпадающем списке «Материал» выбрано «Качественный» сработают действия первой логики — скрыть поле с выбором доставки и изменить текст в поле на «Вы получаете бесплатную доставку».

Для чего нужна вторая логика?

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

Но некоторые действия, такие как «изменить html», не имеют противоположного эффекта, текст меняется раз и на всегда, даже если условие больше не выполняется текст не вернется к исходному. Поэтому, чтобы вернуть исходный текст надо создать еще одну логику, которая и будет возвращать нужный текст, поэтому в форме выше 2 логики.

Действия, которые не имеют противоположного эффекта:
1) изменить html
2) установить значение поля

Еще более сложная логика с переменными

Для реализации сложных задач, можно использовать переменные значения. Типичный случай — надо сделать калькулятор, в котором скидка будет зависеть от значения одного из полей.

0%

Если количество ручек больше 10, то стоимость каждого карандаша падает на 2 рубля

Количество ручек (10 р. за штуку)
Количество карандашей (5 р. за штуку)

Цена ручек: 0 р.

Цена карандашей: 0 р.

Скидка на карандаши получена!

Данный функционал можно было сделать и без переменных, при помощи действия «пересчет итога калькулятора», однако переменные позволяют вам создавать более сложные формы. В форме выше всего одна логика (скриншот):

Сначала мы устанавливаем переменную — а со значением 0. Далее мы присваиваем переменной значение поля — количество карандашей, потом умножаем на три (изначально в калькуляторе умножается на 5, но нам нужна скидка в 2 рубля поэтому умножаем на 3). Далее используем действие для пересчета итога калькулятора, куда просто вставляем нашу переменную.

Обратите внимание — имя переменной в полях с действиями пишется в фигурных скобках.

Также знайте — при помощи действия «изменить значение переменной» можно калькулировать значения разных переменных, например:

Разбор работы каждого действия

1) Показать поле — показывает поле, если оно было скрыто. Имеет противоположный эффект. Если условие больше не выполняется, поле автоматически скрывается снова.

2) Скрыть поле — скрывает поле. Имеет противоположный эффект. Если условие больше не выполняется, поле автоматически отображается снова.

3) Изменить html в пользовательском тексте — изменяет текст или html в поле «Пользовательский текст / html». Работает только с этим типом полей. Не имеет обратного эффекта. Если условие больше не выполняется, исходное содержимое поля не восстанавливается.

Главная особенность этого поля — возможность использовать любые html теги.

0%

Первый пример:

Меняем изображения при выборе значений в чекбоксе.

МЕСТА ПЕЧАТИ
0%

Второй пример:

Значения полей переносятся в таблицу

Имя
Телефон
Поле:Значение:
ИмяНе заполнено
ТелефонНе заполнено

Не все данные заполнены

4) Установить значение поля — устанавливает значение для поля. Не имеет обратного эффекта. Если условие больше не выполняется, исходное значение поля не восстанавливается.

0%

Первый пример:

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

Выберите
Автоматическое заполнение

Второй пример:

Большое текстовое поле будет заполняться значением из чекбокса.

Выберите
Автоматическое заполнение

5) Обнулить значение чекбокса — снимает все флажки у выбранного чекбокса. Пока условие выполняется задать значение данному чекбоксу будет нельзя.

6) Пересчитать итог калькулятора — пересчитывает значение поля «калькуляция». Работает только с этим типом поля. Эта логика может быть использована для реализации скидок, добавления в расчет новых полей или наоборот. Шорткод [itog] — это текущий итог калькулятора. Вы также можете использовать шорт коды с ID полей, как в формуле калькулятора.

Именно это действие позволяет вам создавать калькуляторы любой сложности — вы можете изменять формулу расчета на «лету».

Если условие больше не выполняется, то влияние этого поля для расчета исчезает. Пример реализации 20% скидки: [itog] — (( [itog] * 20) / 100 )

0%

Первый пример:

Изначально только 2 первых поля участвуют в расчете, каждое поле прибавляет по одной единице. Но когда сумма станет больше 10, при помощи логики, к расчету будет подключено третье поле.

Количество 1
-
+

Поле активно

Количество 2
-
+

Поле активно

Количество 3
-
+

Поле не активно

Сумма: 0 р.

Второй пример:

При достижении значения суммы в 20 р. будет 50% скидка.

Количество
Сумма: 0 р.

Скидка получена

7) Добавить класс — добавляет класс указанному элементу. Главная особенность этого действия — оно не ограничено пределами формы, класс можно добавить любому элементу на странице. Если условие больше не выполняется, класс не пропадает.

Действие состоит из двух полей. В первом вы указываете селектор — класс или ID элемента, которому нужно добавить класс. Во втором поле указывается сам класс.

8) Удалить класс — тоже самое, что и добавить, но только удаляет класс, принцип работы тот же.

9) Cделать поле обязательным — сделать поле обязательным для заполнения. Обязательные поля нельзя пропустить. Данная функция  помогает создавать квизы с несколькими ветками вопросов.

10) Сделать поле необязательным — сделать из обязательного поля необязательное.

11) Отключить отправку значения поля на почту — позволяет исключить поле и его значение из письма, которое вы получаете по электронной почте. Этот вариант подходит для квизов с несколькими ветками вопросов, чтобы не засорять письмо ненужной информацией.

12) Включить отправку значения поля на почту — аннулирует действие описанное выше.

13) Изменить значение переменной — позволяет установить значение переменной из других переменных. Значение может быть результатом вычисления нескольких переменных. Пример:

14) Присвоить переменной значение поля — установить значение переменной равным значению поля.

15) Скрыть таб — скрывает таб. Вы не можете переключиться на скрый таб. Обязательные поля на скрытой вкладке игнорируются.

16) Показать таб — показывает таб. Такой таб имеет статус обычного таба.

17) Переключить на таб — переключает форму на таб, указанный в данном действии. Чтобы переключиться на скрытую вкладку, сначала нужно ее показать. Также, если есть пустые обязательные поля, переключение не произойдет. При необходимости воспользуйтесь логикой отключения обязательного заполнения полей.

Дополнительная информация

1) Работа с большим количеством полей

Количество селекторов(полей) в условиях и действиях не ограничено. Для работы с большим количеством полей не потребуется создавать много логик.

На скриншоте выше показано одно условие и одно действие, но работа происходит с большим количеством селекторов(полей). Когда используется несколько условий между ними ставится «и» или «или» — это значит оба условия должны быть выполнены или только одно из них. В действии мы также видим много полей, которые будут показаны.

2) Количество логик

Количество логик в одной форме ограниченно только вашей фантазией. Когда логик становится много, для удобного их просмотра используйте инструменты, показанные на скриншоте:

3) Фильтрация полей

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

Здесь все просто, при выборе действия происходит автоматическая фильтрация полей, остаются только поля, подходящие под это действие.

Не нашли ответа на свой вопрос? Напишите в поддержку:

Email: support@quasar-form.com

Вацап: 8 (937) 449-34-42

Соц. сеть: вк