Создать обратную связь с выбором услуг в WPForms

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

Почему важно использовать динамический выбор услуг в WPForms

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

С помощью динамического выбора можно:

• Показывать только релевантные поля;
• Упрощать процесс заполнения;
• Уменьшать количество ошибок;
• Автоматизировать обработку заявок.

WPForms отлично подходит для реализации таких задач благодаря своей гибкости и поддержке хуков.

Создание базовой формы с выбором услуги в WPForms

Начнём с создания самой формы. В админке WordPress перейдите в раздел WPForms и создайте новую форму. Добавьте следующие поля:

• Выбор услуги (Dropdown) – список услуг, например, "Консультация", "Разработка сайта", "Поддержка";
• Имя и Электронная почта – стандартные контактные данные;
• Текстовое поле или Текстовая область – для комментариев и дополнительной информации.

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

Динамическое отображение дополнительных полей с помощью JavaScript и WPForms

WPForms не имеет встроенного визуального конструктора для условного показа полей, но это можно реализовать с помощью кастомного JavaScript и небольшого PHP-кода для добавления полей.

1. Добавим в форму дополнительные скрытые поля для каждой услуги. Например, для услуги "Разработка сайта" — поле "Технические требования", для "Поддержка" — поле "Описание проблемы".

2. Включим на странице с формой кастомный скрипт, который будет отслеживать выбор в Dropdown и показывать соответствующие поля.

Пример кода JavaScript

document.addEventListener('DOMContentLoaded', function() {
  const serviceSelect = document.querySelector('select[name="wpforms[fields][1]"]');
  const devField = document.querySelector('#wpforms-123-field_4-container'); // технические требования
  const supportField = document.querySelector('#wpforms-123-field_5-container'); // описание проблемы

  function toggleFields() {
    const value = serviceSelect.value;
    devField.style.display = 'none';
    supportField.style.display = 'none';

    if (value === 'Razrabotka') {
      devField.style.display = 'block';
    } else if (value === 'Podderzhka') {
      supportField.style.display = 'block';
    }
  }

  serviceSelect.addEventListener('change', toggleFields);
  toggleFields();
});

Обратите внимание, что селекторы в коде нужно заменить под реальные ID вашей формы и полей.

Использование фильтров WPForms для валидации и обработки данных

Чтобы убедиться, что пользователь заполнил дополнительные поля, если они отображаются, используем фильтр wpforms_process_validate:

function wpformsru_custom_validate( $field_id, $field_submit, $form_data, $fields, $entry ) {
    if ( isset( $fields[1] ) ) { // поле выбора услуги
        $service = $fields[1]['value'];
        if ( $service === 'Razrabotka' && empty( $fields[4]['value'] ) ) {
            wpforms()->process->errors[ $form_data['id'] ][4] = 'Пожалуйста, заполните технические требования для разработки сайта.';
        }
        if ( $service === 'Podderzhka' && empty( $fields[5]['value'] ) ) {
            wpforms()->process->errors[ $form_data['id'] ][5] = 'Опишите проблему для поддержки.';
        }
    }
}
add_action( 'wpforms_process_validate', 'wpformsru_custom_validate', 10, 5 );

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

Автоматизация уведомлений и интеграция с CRM

После того, как форма соберёт данные, важно настроить уведомления для менеджеров и автоматическую передачу данных в CRM или Google Sheets.

WPForms поддерживает интеграции с популярными сервисами, а если нужно гибкое решение — можно использовать хук wpforms_process_complete для кастомных сценариев:

function wpformsru_after_submit( $fields, $entry, $form_data ) {
    $service = '';
    foreach ( $fields as $field ) {
        if ( $field['id'] === 1 ) { // ID поля выбора услуги
            $service = $field['value'];
            break;
        }
    }
    if ( $service === 'Razrabotka' ) {
        // Логика для передачи данных в CRM по разработке
    }
    if ( $service === 'Podderzhka' ) {
        // Логика для поддержки
    }
}
add_action( 'wpforms_process_complete', 'wpformsru_after_submit', 10, 3 );

Дополнительные советы по оптимизации формы с выбором услуг

Для улучшения UX и качества данных стоит:

• Добавить placeholder и подсказки к дополнительным полям;
• Использовать маски ввода, если нужна конкретная структура данных (например, телефон);
• Проверять корректность e-mail и других контактных данных;
• Тестировать форму на разных устройствах и браузерах.

Также рекомендуем использовать плагин WPForms Pro с расширенными возможностями по кастомизации и интеграциям.

Заключение

Создание формы обратной связи с выбором услуг в WPForms — это практическое решение, которое повышает удобство для пользователя и облегчает обработку заявок. С помощью приведённого кода и рекомендаций вы сможете быстро внедрить динамические поля, настроить валидацию и интеграции, что значительно улучшит ваш сайт и процессы коммуникации с клиентами.