Подсказки для форм

Shepherd.js — это библиотека для создания интерактивных подсказок и пошаговых туров по интерфейсу. Для работы с формами она особенно полезна, поскольку позволяет поэтапно объяснять пользователю поля ввода, кнопки и другие элементы управления.

Для начала необходимо создать экземпляр тура:

const tour = new Shepherd.Tour({
  defaultStepOptions: {
    classes: 'shepherd-theme-arrows',
    scrollTo: { beh * avior: 'smooth', block: 'center' }
  }
});

Здесь defaultStepOptions задаёт общие параметры для всех шагов: визуальную тему и плавную прокрутку к элементу формы.

Создание шагов подсказки

Каждая подсказка формируется как отдельный шаг с указанием элемента, текста и позиции. Пример для поля ввода имени:

tour.addStep({
  id: 'name-field',
  text: 'Введите своё имя в это поле. Оно будет отображаться в вашем профиле.',
  attachTo: {
    element: '#name',
    on: 'bottom'
  },
  buttons: [
    {
      text: 'Далее',
      action: tour.next
    }
  ]
});

Ключевые моменты:

  • attachTo.element — CSS-селектор элемента формы, к которому прикрепляется подсказка.
  • attachTo.on — положение подсказки относительно элемента (top, bottom, left, right).
  • buttons — массив кнопок управления: переход к следующему шагу, завершение тура, возврат назад.

Навигация между шагами

Shepherd.js поддерживает управление туром через встроенные методы:

  • tour.next() — перейти к следующему шагу.
  • tour.back() — вернуться к предыдущему шагу.
  • tour.start() — запустить тур.
  • tour.complete() — завершить тур.

Для форм удобно использовать условные переходы, например, не давать пользователю перейти дальше, пока поле не заполнено:

tour.addStep({
  id: 'email-field',
  text: 'Введите корректный email. Формат: example@mail.com',
  attachTo: { element: '#email', on: 'right' },
  buttons: [
    {
      text: 'Далее',
      action: function() {
        const emailInput = document.querySelector('#email').value;
        if (emailInput.includes('@')) {
          tour.next();
        } else {
          alert('Пожалуйста, введите корректный email');
        }
      }
    }
  ]
});

Группировка шагов по секциям формы

Если форма состоит из нескольких логических блоков, шаги можно организовать в последовательности:

const steps = [
  { id: 'personal', element: '#personal-info', text: 'Заполните персональные данные' },
  { id: 'contact', element: '#contact-info', text: 'Добавьте контактные данные' },
  { id: 'preferences', element: '#preferences', text: 'Укажите ваши предпочтения' }
];

steps.forEach(step => {
  tour.addStep({
    id: step.id,
    text: step.text,
    attachTo: { element: step.element, on: 'bottom' },
    buttons: [{ text: 'Далее', action: tour.next }]
  });
});

Такой подход упрощает поддержку кода и позволяет легко добавлять новые блоки формы без дублирования логики.

Динамические подсказки для форм

Shepherd.js позволяет создавать шаги на лету в зависимости от состояния формы. Например, если пользователь выбрал определённую опцию:

document.querySelector('#newsletter').addEventListener('change', (e) => {
  if (e.target.checked) {
    tour.addStep({
      id: 'newsletter-options',
      text: 'Выберите, какие рассылки вы хотите получать',
      attachTo: { element: '#newsletter-options', on: 'top' },
      buttons: [{ text: 'Готово', action: tour.next }]
    });
    tour.next();
  }
});

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

Настройка внешнего вида подсказок

Shepherd.js поддерживает кастомизацию через CSS-классы:

tour.addStep({
  id: 'submit-button',
  text: 'Нажмите эту кнопку для отправки формы',
  attachTo: { element: '#submit', on: 'top' },
  classes: 'shepherd-theme-dark',
  buttons: [
    { text: 'Закрыть', action: tour.complete }
  ]
});

Можно использовать предустановленные темы (shepherd-theme-arrows, shepherd-theme-dark) или создать собственные стили для подсветки элементов формы.

Работа с формами в SPA и динамическим контентом

Если форма рендерится динамически (например, через React или Vue), шаги нужно создавать после загрузки элементов DOM:

document.addEventListener('DOMContentLoaded', () => {
  if (document.querySelector('#dynamic-form')) {
    tour.addStep({
      id: 'dynamic-step',
      text: 'Это поле появилось динамически',
      attachTo: { element: '#dynamic-field', on: 'right' },
      buttons: [{ text: 'Далее', action: tour.next }]
    });
    tour.start();
  }
});

Для SPA важно следить, чтобы селекторы были актуальны на момент добавления шага.

Подсказки с формами и валидацией

Shepherd.js можно интегрировать с существующей валидацией формы. Шаги могут блокировать переход, пока пользователь не выполнит условие:

tour.addStep({
  id: 'password-step',
  text: 'Пароль должен содержать минимум 8 символов',
  attachTo: { element: '#password', on: 'bottom' },
  buttons: [
    {
      text: 'Далее',
      action: () => {
        const password = document.querySelector('#password').value;
        if (password.length >= 8) {
          tour.next();
        } else {
          alert('Пароль слишком короткий');
        }
      }
    }
  ]
});

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

Полезные методы для форм

  • tour.cancel() — отменяет тур в любой момент.
  • tour.hide() / tour.show() — временно скрывает или показывает подсказку.
  • step.updateStepOptions() — позволяет динамически менять текст, кнопки или позицию шага, например, при изменении состояния формы.

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

Оглавление