Как создать многошаговую форму в WordPress с расчетом и AJAX

Многошаговые формы в WordPress часто требуются для сбора сложных данных от пользователя без перегрузки одной страницы большим количеством полей. Особенно актуально, если нужно делать расчет на основе введенных данных и обновлять результат динамически, без перезагрузки страницы. В этой статье рассмотрим, как поэтапно создать многошаговую форму с динамическим расчетом на WordPress, используя AJAX и PHP, а также приведем рабочие примеры кода.

Зачем нужны многошаговые формы с расчетом в WordPress

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

В WordPress есть много плагинов для форм (Contact Form 7, Gravity Forms, WPForms), но не всегда они позволяют гибко реализовать многошаговость с кастомными расчетами. Поэтому полезно знать, как сделать это самому.

Создаем структуру многошаговой формы с HTML и CSS

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

<form id="wpcalc_multistep_form">
  <div class="step" data-step="1">
    <label>Введите количество<input type="number" name="quantity" required></label>
    <button type="button" class="next">Далее</button>
  </div>
  <div class="step" data-step="2" style="display:none;">
    <label>Выберите тип услуги<
      <select name="service_type" required>
        <option value="basic">Базовая</option>
        <option value="premium">Премиум</option>
      </select>
    </label>
    <button type="button" class="prev">Назад</button>
    <button type="button" class="next">Далее</button>
  </div>
  <div class="step" data-step="3" style="display:none;">
    <div id="wpcalc_result">Результат: -</div>
    <button type="button" class="prev">Назад</button>
    <button type="submit">Отправить</button>
  </div>
</form>

Здесь мы создали три шага: ввод количества, выбор типа услуги и отображение результата с кнопками навигации. По умолчанию виден первый шаг.

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

Навигация между шагами с помощью JavaScript

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

document.addEventListener('DOMContentLoaded', function() {
  const form = document.getElementById('wpcalc_multistep_form');
  const steps = form.querySelectorAll('.step');
  let currentStep = 0;

  function showStep(index) {
    steps.forEach((step, i) => {
      step.style.display = i === index ? 'block' : 'none';
    });
  }

  form.querySelectorAll('.next').forEach(button => {
    button.addEventListener('click', () => {
      if (validateStep(currentStep)) {
        currentStep++;
        showStep(currentStep);
        if (currentStep === steps.length - 1) {
          calculateResult();
        }
      }
    });
  });

  form.querySelectorAll('.prev').forEach(button => {
    button.addEventListener('click', () => {
      currentStep--;
      showStep(currentStep);
    });
  });

  function validateStep(stepIndex) {
    const inputs = steps[stepIndex].querySelectorAll('input, select');
    for (let input of inputs) {
      if (!input.checkValidity()) {
        input.reportValidity();
        return false;
      }
    }
    return true;
  }

  showStep(currentStep);
});

Этот код управляет видимостью шагов и проверяет заполнение полей перед переходом дальше. Когда пользователь доходит до последнего шага, запускается функция calculateResult(), о ней расскажем далее.

Динамический расчет результата через AJAX

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

Добавим JavaScript функцию calculateResult(), которая соберет данные формы, отправит их на сервер через AJAX и получит результат.

function calculateResult() {
  const formData = new FormData(document.getElementById('wpcalc_multistep_form'));
  fetch(wpcalc_ajax_object.ajax_url, {
    method: 'POST',
    credentials: 'same-origin',
    headers: {
      'X-Requested-With': 'XMLHttpRequest'
    },
    body: new URLSearchParams({
      action: 'wpcalc_calculate',
      quantity: formData.get('quantity'),
      service_type: formData.get('service_type')
    })
  })
    .then(response => response.json())
    .then(data => {
      document.getElementById('wpcalc_result').innerText = 'Результат: ' + data.result + ' ₽';
    })
    .catch(error => {
      document.getElementById('wpcalc_result').innerText = 'Ошибка при расчете';
      console.error(error);
    });
}

Для работы AJAX в WordPress нужно зарегистрировать обработчик на стороне PHP. Добавим следующий код в functions.php вашей темы или в плагин:

add_action('wp_enqueue_scripts', 'wpcalc_enqueue_scripts');
function wpcalc_enqueue_scripts() {
  wp_enqueue_script('wpcalc-script', get_template_directory_uri() . '/js/wpcalc-multistep.js', ['jquery'], null, true);
  wp_localize_script('wpcalc-script', 'wpcalc_ajax_object', [
    'ajax_url' => admin_url('admin-ajax.php')
  ]);
}

add_action('wp_ajax_wpcalc_calculate', 'wpcalc_ajax_calculate');
add_action('wp_ajax_nopriv_wpcalc_calculate', 'wpcalc_ajax_calculate');

function wpcalc_ajax_calculate() {
  $quantity = isset($_POST['quantity']) ? intval($_POST['quantity']) : 0;
  $service_type = isset($_POST['service_type']) ? sanitize_text_field($_POST['service_type']) : '';

  $price_per_unit = 0;
  switch ($service_type) {
    case 'basic':
      $price_per_unit = 100;
      break;
    case 'premium':
      $price_per_unit = 200;
      break;
    default:
      $price_per_unit = 0;
  }

  $result = $quantity * $price_per_unit;

  wp_send_json_success(['result' => $result]);
  wp_die();
}

Этот код обрабатывает AJAX-запрос, считывает данные формы, вычисляет итоговую сумму и возвращает результат в формате JSON.

Дополнительные советы и популярные плагины для расширения функционала

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

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

Также обязательно применяйте AJAX для повышения отзывчивости интерфейса, а PHP-хуки WordPress — для безопасности и расширяемости.

Итоговые рекомендации по созданию многошаговых форм с расчетом

Подытожим главные моменты:

• Разбейте форму на логические шаги в HTML, скрывая остальные блоки.
• Добавьте навигацию по шагам с проверкой валидности полей перед переходом.
• Для расчетов используйте AJAX, отправляя запросы на сервер и получая результат без перезагрузки.
• Обрабатывайте данные безопасно в PHP, с проверкой и фильтрацией входящих данных.
• Если нужна сложная логика, рассмотрите использование специализированных плагинов, например, Quizle или Expert Review.

Такой подход позволит сделать удобные, быстрые и функциональные многошаговые формы с динамическими расчетами на вашем WordPress-сайте.