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

Преимущества многошаговых форм:

Удобство: Пользователи фокусируются на одном шаге за раз, что упрощает процесс.
Лучшая ориентация: Пользователи видят, сколько шагов им предстоит, что помогает им планировать.
Меньше отказов: Многошаговые формы могут уменьшить отказы, потому что они не кажутся бесконечными.
Валидация данных: Можно проверять данные на каждом шаге, предотвращая ошибки.
Улучшение опыта: Многошаговые формы делают взаимодействие с сайтом приятнее.

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

Теперь, давайте узнаем, как создать такие формы с помощью JavaScript.

Навигация по статье

HTML-структура для многошаговой формы

Форма содержит три шага для ввода информации: на первом шаге пользователь вводит свое имя и фамилию, на втором — контактные данные (email и телефон), и на третьем — создает пароль с его подтверждением. Каждый шаг предоставляет соответствующие поля для ввода и кнопки для перехода к следующему шагу или возврата к предыдущему.

<form id="multistep-form">
  <fieldset>
    <legend>Шаг 1: Личная информация</legend>
    <label for="first-name">Имя:</label>
    <input type="text" id="first-name" name="first-name" required />
    <label for="last-name">Фамилия:</label>
    <input type="text" id="last-name" name="last-name" required />
  </fieldset>

  <fieldset>
    <legend>Шаг 2: Контактная информация</legend>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required />
    <label for="phone">Телефон:</label>
    <input type="tel" id="phone" name="phone" required />
  </fieldset>

  <fieldset>
    <legend>Шаг 3: Пароль</legend>
    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required />
    <label for="confirm-password">Подтвердите пароль:</label>
    <input
      type="password"
      id="confirm-password"
      name="confirm-password"
      required
    />
  </fieldset>
  <input type="button" class="prev-button" data-step="2" value="Назад" />
  <input type="button" class="next-button" data-step="2" value="Вперед" />
</form>

Элемент <fieldset> является частью HTML-форм и представляет собой контейнер, который используется для группировки связанных элементов формы, таких как радиокнопки, флажки и метки. Преимущество элемента <fieldset> заключается в том, что он обеспечивает логическую организацию формы, делая ее более понятной и доступной для пользователей.

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

Стилизация многошаговой формы

Комментарии даны в коде.

/* Общие стили для формы и контейнера шагов */
.form-container {
  background-color: #f0f4f9;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 20px;
  width: 400px;
  margin: 0 auto;
}

/* Стили для каждого шага */
.form-step {
  display: none;
}

/* Стили для активного шага */
.form-step.active {
  display: block;
}

/* Стили для легенды шага */
fieldset legend {
  font-weight: bold;
  color: #007bff; /* Приятный синий оттенок */
}

/* Стили для полей ввода */
label {
  display: block;
  margin-top: 10px;
  color: #333;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"] {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Стили для кнопок "Далее" и "Назад" */
input[type="button"],
input[type="submit"] {
  background-color: #007bff; /* Приятный синий оттенок */
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 10px;
}

input[type="button"]:hover,
input[type="submit"]:hover {
  background-color: #0056b3; /* Изменение цвета при наведении */
}

Скрипт для многошаговой формы

Этот JavaScript код создает многошаговую форму, позволяя пользователям заполнять данные этап за этапом, и при необходимости возвращаться к предыдущим шагам. Когда все шаги формы заполнены, скрипт отправляет данные на сервер с использованием Fetch API и выводит сообщение об успехе или ошибке отправки данных.

document.addEventListener("DOMContentLoaded", function () {
  const formSteps = document.querySelectorAll("fieldset"); // Получаем все шаги
  const prevButton = document.querySelector(".prev-button");
  const nextButton = document.querySelector(".next-button");
  let currentStep = 0; // Индекс текущего активного шага

  const form = document.querySelector("#multistep-form");

  // Функция для отображения активного шага и скрытия остальных
  function showStep(stepIndex) {
    formSteps.forEach((step, index) => {
      if (index === stepIndex) {
        step.style.display = "block";
      } else {
        step.style.display = "none";
      }
      if (stepIndex === formSteps.length - 1) {
        // На последнем шаге заменяем текст на "Отправить"
        nextButton.value = "Отправить";
        // Меняем тип формы на submit, чтобы форма отправлялась
        nextButton.type = "submit";
      } else {
        // Восстанавливаем текст "Далее" на других шагах
        nextButton.value = "Далее";
        // Восстанавливаем тип формы на button на других шагах
        nextButton.type = "button";
      }
    });
  }

  // Обработчик нажатия кнопки "Далее"
  nextButton.addEventListener("click", function () {
    if (currentStep < formSteps.length - 1) {
      currentStep++;
      showStep(currentStep);
    }
  });

  // Обработчик нажатия кнопки "Назад"
  prevButton.addEventListener("click", function () {
    if (currentStep > 0) {
      currentStep--;
      showStep(currentStep);
    }
  });

  // Инициализация формы, начнем с первого шага
  showStep(currentStep);

  // Обработчик отправки формы
  form.addEventListener("submit", function (e) {
    e.preventDefault(); // Предотвращаем стандартное поведение отправки формы
    const formData = new FormData(form);

    // Отправляем данные с использованием Fetch API
    fetch("ваш_URL_для_обработки_формы", {
      method: "POST", // Может быть POST или другим методом, в зависимости от вашего сервера
      body: formData, // Данные формы
    })
      .then((response) => {
        if (response.ok) {
          // Обработка успешной отправки данных
          alert("Данные успешно отправлены");
        } else {
          // Обработка ошибки при отправке данных
          alert("Произошла ошибка при отправке данных");
        }
      })
      .catch((error) => {
        // Обработка ошибок сети или других исключительных ситуаций
        console.error("Произошла ошибка: " + error.message);
      });
  });
});

Чтобы сильно не усложнять код я не стал добавлять сюда валидацию для полей формы.