Статьи

Условные поля для Contact Form 7 Учебное пособие для работы с Contact Form 7 — Conditional Fields

Мы пока оставим эти опции неотмеченными и создадим нашу первую группу под названием Technical-support-selected.

Условные поля для контактной формы 7 Учебное пособие - Контактная форма 7 Условные поля

Нажмите Insert Tag кнопку, чтобы вставить этот код [group technical-support-selected][/group]. Теперь вам нужно будет ввести соответствующую часть формы между закрывающим и закрывающим тегами, например:

[group technical-support-selected]
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"]
  Please specify your OS version: [text version]
[/group]

Вложенные группы – обратите внимание, что группы также могут быть вложенными. Таким образом, внутри группы технической поддержки можно добавить группу с полем, в котором пользователь может указать версию своей ОС.

[group technical-support-selected]
  Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows"] 
  [group os-selected]
    Please specify your OS version: [text version]
  [/group]
[/group]

Если вы сохраните форму на этом этапе, все, что находится между тегами группы, будет невидимо во внешнем интерфейсе. Это не очень полезно. Итак, переходим к следующему шагу!

Добавление условной логики

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

Условные поля для контактной формы 7 Учебное пособие - Контактная форма 7 Условные поля

Нажмите кнопку добавления нового условного правила и введите эту информацию:

Условные поля для контактной формы 7 Учебное пособие - Контактная форма 7 Условные поля

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

show [os-selected] if [operating-system] not equals ""

Это правило приведет к тому, что текстовое поле Версия появится после того, как пользователь выберет ОС. Мы достигаем этого, проверяя, не соответствует ли выбранный вариант в раскрывающемся списке пустой строке. (Обратите внимание, поскольку мы используем first_as_label, значение на -- Choose your operating system -- самом деле не установлено. Если мы опустим параметр first_as_label, условие будет следующим:

show [os-selected] if [operating-system] not equals "-- Choose your operating system --"

Это нормально, но нам нужно что-то более продвинутое. Если пользователь выбирает «Другое» из раскрывающегося списка, мы не хотим отображать группу [os-selected], но вместо этого мы хотим показать еще 2 поля, где они могут указать свою версию ОС.

Таким образом, нам нужно скрыть [os-selected], если выполняется указанное выше условие, И если [операционная система] не равна «Other». Для этого мы можем нажать кнопку И рядом с первым условием и заполнить поля следующим образом:

Условные поля для контактной формы 7 Учебное пособие - Контактная форма 7 Условные поля

Теперь, если выбрана любая ОС (кроме «Другой»), появится группа [os-selected] .

Я надеюсь, что основы теперь ясны. Далее доработаем форму и добавим все условия.

Готовая форма

Если вы хотите воспроизвести форму в верхней части этой страницы, просто вставьте этот код формы в форму обратной связи 7.

Your name: [text your-name]
Your email address: [email your-email]
<p>What kind of support do you want?
[select support-type first_as_label "-- Choose support type --" "Technical support" "Sales"]</p>
[group technical-support-selected]
  <p>Your operating system: [select operating-system first_as_label "-- Choose your operating system --" "Android" "iOS" "Linux" "Windows" "Other"]</p>
  [group os-selected]
<p>Please specify your [group os-android inline]Android[/group][group os-iOS inline]iOS[/group][group os-linux inline]Linux[/group][group os-windows inline]Windows[/group] version:
    [text version]</p>
  [/group]
  [group os-other-selected]
    <p>Please specify your OS and version.
    [text other-os "Operating System"][text other-version "Version"]</p>
  [/group]
[/group]
[group sales-support-selected]
  <p>Where is your business located?
  [select continent first_as_label "-- Choose your continent --" "Europe" "America" "Africa" "Asia" "Oceania" "Antarctica"]</p>
[/group]

<p>[textarea comments]</p>

[submit "Send"]

Сохраните форму, перейдите на вкладку Условные поля и введите эти правила в текстовом представлении :

show [technical-support-selected] if [support-type] equals "Technical support"
show [sales-support-selected] if [support-type] equals "Sales"
show [os-selected] if [operating-system] not equals ""
               and if [operating-system] not equals "Other"
show [os-android] if [operating-system] equals "Android"
show [os-iOS] if [operating-system] equals "iOS"
show [os-linux] if [operating-system] equals "Linux"
show [os-windows] if [operating-system] equals "Windows"
show [os-other-selected] if [operating-system] equals "Other"

Нажмите кнопку Условия перезаписи, и вы должны увидеть следующие поля:

Условные поля для контактной формы 7 Учебное пособие - Контактная форма 7 Условные поля

Сохраните форму еще раз, скопируйте шорткод Контактной формы 7 на новую страницу (если вы еще этого не сделали) и опубликуйте свою страницу. Это оно! Осталось только одно.

Настройка сообщения электронной почты

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

Мы просто хотим показать текст «Спасибо за отправку вопроса о технической поддержке», если пользователь выбрал техническую поддержку, и «Спасибо за ваш вопрос о продажах», если он выбрал Продажи. Затем мы собираемся перечислить только те поля, которые были видны во время отправки формы в таблице HTML.

Мы можем добиться такого индивидуального сообщения:

[technical-support-selected]
Thank you for submitting your technical support question
[/technical-support-selected][sales-support-selected]
Thank you for your sales question
[/sales-support-selected]

Обратите внимание, что мы открываем [sales-support-selected]тег сразу после закрытия [/technical-support-selected], это необходимо для предотвращения появления нежелательных пробелов в сообщении электронной почты.

Затем мы можем создать таблицу со всеми полями следующим образом:

<table>
<tr><td>your-name</td><td>[your-name]</td></tr>
<tr><td>your-email</td><td>[your-email]</td></tr>
<tr><td>support-type</td><td>[support-type]</td></tr>
[technical-support-selected]
  <tr><td>operating-system</td><td>[operating-system]</td></tr>
  [os-selected]
    <tr><td>version</td><td>[version]</td></tr>
  [/os-selected]
  [os-other-selected]
    <tr><td>other-os</td><td>[other-os]</td></tr>
    <tr><td>other-version</td><td>[other-version]</td></tr>
  [/os-other-selected]
[/technical-support-selected]
[sales-support-selected]
  <tr><td>continent</td><td>[continent]</td></tr>
[/sales-support-selected]
<tr><td>comments</td><td>[comments]</td></tr>
</table>

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

Кнопка «Наверх»