Уведомления формы обратной связи

iziToast — это современная JavaScript-библиотека для создания уведомлений на веб-странице. Она позволяет отображать сообщения любого типа: успех, ошибка, предупреждение, информация. Отличается простотой использования, гибкой кастомизацией и поддержкой различных позиций на экране.

Для подключения iziToast достаточно добавить в проект CSS и JS файлы библиотеки:

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

После подключения библиотека готова к использованию. Основной метод — iziToast.show(), который принимает объект с конфигурацией уведомления.

Создание базового уведомления

Простейший пример уведомления выглядит так:

iziToast.show({
    title: 'Успех',
    message: 'Форма успешно отправлена',
    position: 'topRight'
});

Ключевые параметры:

  • title — заголовок уведомления.
  • message — основное сообщение.
  • position — положение на экране. Возможные значения: topRight, topLeft, bottomRight, bottomLeft, topCenter, bottomCenter.

Дополнительно можно настроить:

  • timeout — время в миллисекундах, через которое уведомление исчезнет. Значение 0 удерживает уведомление до закрытия вручную.
  • theme — тема: light или dark.
  • color — цвет фона (можно использовать CSS-цвета или классы).

Типы уведомлений

Для уведомлений формы обратной связи важно выделять различные статусы отправки. iziToast предоставляет методы для типовых уведомлений:

  • iziToast.success() — для успешных операций.
  • iziToast.error() — для ошибок.
  • iziToast.warning() — для предупреждений.
  • iziToast.info() — для информационных сообщений.

Пример использования:

iziToast.success({
    title: 'Успех',
    message: 'Ваше сообщение отправлено!',
    position: 'topRight',
    timeout: 5000
});

iziToast.error({
    title: 'Ошибка',
    message: 'Не удалось отправить форму',
    position: 'topRight',
    timeout: 7000
});

Кастомизация уведомлений

iziToast позволяет детально настраивать вид и поведение уведомлений:

  • Иконки: с помощью параметра icon можно добавить графический элемент.
  • Кнопки: через buttons можно добавить интерактивные элементы, например кнопку “Повторить отправку”.
  • Анимация: animateInside, transitionIn, transitionOut управляют эффектами появления и исчезновения.
  • Размер: через CSS или параметр maxWidth можно ограничить ширину уведомления.

Пример уведомления с кнопкой:

iziToast.show({
    title: 'Ошибка',
    message: 'Не удалось отправить форму',
    position: 'topRight',
    buttons: [
        ['<button>Повторить</button>', function (instance, toast) {
            instance.hide({ transitionOut: 'fadeOut' }, toast, 'button');
            // Логика повторной отправки формы
        }]
    ]
});

Управление группой уведомлений

iziToast поддерживает управление несколькими уведомлениями одновременно:

  • iziToast.destroy() — удаляет все уведомления.
  • iziToast.hide() — скрывает текущее уведомление.
  • iziToast.settings() — глобальные настройки для всех уведомлений, например изменение темы или позиции по умолчанию.

Пример глобальной настройки:

iziToast.settings({
    timeout: 4000,
    position: 'bottomRight',
    transitionIn: 'bounceInRight',
    transitionOut: 'fadeOut'
});

Интеграция с формой обратной связи

При работе с формами важно показывать уведомления на основе результата отправки. Пример с AJAX:

document.querySelector('#contactForm').addEventListener('submit', function(e) {
    e.preventDefault();
    const formData = new FormData(this);

    fetch('/send', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            iziToast.success({
                title: 'Успех',
                message: 'Сообщение отправлено',
                position: 'topRight'
            });
        } else {
            iziToast.error({
                title: 'Ошибка',
                message: data.error || 'Не удалось отправить форму',
                position: 'topRight'
            });
        }
    })
    .catch(() => {
        iziToast.error({
            title: 'Ошибка',
            message: 'Сервер недоступен',
            position: 'topRight'
        });
    });
});

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

Настройка времени жизни уведомлений

timeout управляет временем отображения уведомления. Для критических сообщений лучше использовать timeout: 0, чтобы пользователь закрыл уведомление вручную. Для кратких уведомлений достаточно 3000–5000 мс.

Позиционирование уведомлений

iziToast позволяет размещать уведомления в шести ключевых местах экрана:

  • topRight
  • topLeft
  • bottomRight
  • bottomLeft
  • topCenter
  • bottomCenter

Позиция может быть выбрана глобально через iziToast.settings() или для конкретного уведомления через параметр position.

Заключение функциональных возможностей

Библиотека iziToast обеспечивает:

  • Быстрое и удобное отображение уведомлений.
  • Разделение типов сообщений для разных состояний формы.
  • Гибкую кастомизацию внешнего вида и поведения уведомлений.
  • Интеграцию с асинхронными операциями, такими как AJAX-запросы.
  • Управление множеством уведомлений на странице.

Эти возможности делают iziToast мощным инструментом для реализации визуальной обратной связи в любых веб-приложениях.

Оглавление