Мультишаговые формы

Одной из популярных задач при разработке интерактивных веб-приложений является создание мультишаговых форм. Такие формы предоставляют пользователю возможность заполнять их поэтапно, улучшая пользовательский опыт и увеличивая конверсию. Для реализации мультишаговых форм в интерфейсе часто используются модальные окна. Библиотека tingle.js предоставляет простой и удобный инструмент для создания таких окон, включая поддержку анимации и кастомизации.

Подготовка и подключение библиотеки

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

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/tingle.js@0.15.1/dist/tingle.min.css">
<script src="https://cdn.jsdelivr.net/npm/tingle.js@0.15.1/dist/tingle.min.js"></script>

После подключения библиотеки можно сразу приступить к созданию модальных окон для каждого шага формы.

Структура модальных окон

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

Шаг 1: Личные данные

Для первого шага создадим модальное окно с полями для ввода имени и фамилии.

const modalStep1 = new tingle.modal({
  footer: true,
  stickyFooter: true,
  closeMethods: ['overlay', 'button'],
  closeLabel: "Закрыть"
});

modalStep1.setContent(`
  <div>
    <h2>Личные данные</h2>
    <form id="step1-form">
      <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>
      
      <button type="submit">Далее</button>
    </form>
  </div>
`);

modalStep1.addFooterBtn('Далее', 'tingle-btn tingle-btn--primary', function() {
  const formData = new FormData(document.getElementById('step1-form'));
  const firstName = formData.get('first-name');
  const lastName = formData.get('last-name');
  
  // Переход ко второму шагу
  showStep2(firstName, lastName);
  modalStep1.close();
});

modalStep1.open();

Шаг 2: Контактная информация

На втором шаге модального окна будут собраны данные о контактной информации пользователя.

function showStep2(firstName, lastName) {
  const modalStep2 = new tingle.modal({
    footer: true,
    stickyFooter: true,
    closeMethods: ['overlay', 'button'],
    closeLabel: "Закрыть"
  });

  modalStep2.setContent(`
    <div>
      <h2>Контактная информация</h2>
      <form id="step2-form">
        <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>

        <button type="submit">Далее</button>
      </form>
    </div>
  `);

  modalStep2.addFooterBtn('Далее', 'tingle-btn tingle-btn--primary', function() {
    const formData = new FormData(document.getElementById('step2-form'));
    const email = formData.get('email');
    const phone = formData.get('phone');

    // Переход к шагу 3 с переданными данными
    showStep3(firstName, lastName, email, phone);
    modalStep2.close();
  });

  modalStep2.open();
}

Шаг 3: Подтверждение данных

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

function showStep3(firstName, lastName, email, phone) {
  const modalStep3 = new tingle.modal({
    footer: true,
    stickyFooter: true,
    closeMethods: ['overlay', 'button'],
    closeLabel: "Закрыть"
  });

  modalStep3.setContent(`
    <div>
      <h2>Подтвердите данные</h2>
      <p><strong>Имя:</strong> ${firstName}</p>
      <p><strong>Фамилия:</strong> ${lastName}</p>
      <p><strong>Email:</strong> ${email}</p>
      <p><strong>Телефон:</strong> ${phone}</p>

      <button id="confirm-btn" type="button">Подтвердить</button>
      <button id="edit-btn" type="button">Изменить</button>
    </div>
  `);

  modalStep3.addFooterBtn('Закрыть', 'tingle-btn tingle-btn--secondary', function() {
    modalStep3.close();
  });

  document.getElementById('confirm-btn').addEventListener('click', function() {
    // Отправка данных на сервер или дальнейшая обработка
    alert('Форма успешно отправлена!');
    modalStep3.close();
  });

  document.getElementById('edit-btn').addEventListener('click', function() {
    modalStep3.close();
    // Возвращение к предыдущим шагам
    modalStep2.open();
  });

  modalStep3.open();
}

Обработка переходов между шагами

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

Каждое окно сохраняет данные предыдущего шага в локальные переменные, которые передаются в следующие окна, что позволяет пользователю видеть всю информацию на последнем шаге формы.

Кастомизация модальных окон

Библиотека tingle.js позволяет легко кастомизировать внешний вид и поведение модальных окон. Для изменения стилей можно использовать стандартные CSS-свойства, а для изменения поведения — соответствующие методы библиотеки. Например, можно добавить анимации, изменять размеры окон или использовать кастомные кнопки.

.tingle-modal {
  background-color: #f0f0f0;
}

.tingle-btn--primary {
  background-color: #4CAF50;
  color: white;
}

.tingle-btn--secondary {
  background-color: #FF5722;
  color: white;
}

Также можно добавить анимации при открытии и закрытии окон, используя параметр animation в конфигурации модального окна:

const modal = new tingle.modal({
  animation: 'fade'
});

Итоги

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