Создание интерактивных веб-форм

Ключевые особенности отличного конструктора онлайн-форм

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

• Добавление различных вариантов полей: текстовые поля свободного ввода, выпадающие списки, даты, переключатели, флажки, слайдеры диапазона и другие;

• Базовое оформление (включая светлую и темную темы);

• Установка отдельных полей как обязательных, скрытых или опциональных;

• Настройка ограничений на типы данных (email-адреса, положительные числа и т.д.);

• Наличие адаптивного отображения для мобильных устройств;

• Встраивание формы на любой сайт.

Все эти функции включены в компонент формы Directual (подробное описание можно найти в Документации). Посмотрите на пример формы на базе Directual, встроенной прямо здесь:

Типичные проблемы конструкторов форм

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

Сложности возникают, когда вы хотите, чтобы форма была неотъемлемой частью приложения. Большинство широко используемых конструкторов форм не справляются со следующими бизнес-задачами:

• Включение доступа на основе ролей;
• Настройка параметров формы в зависимости от каких-либо данных, включая данные из внешних систем;
• Онлайн-обработка ответов (например, сложная валидация, проверка данных из базы данных, некоторые вычисления и т.д.).

Был только один способ справиться с такими задачами — писать код для формы традиционным способом — долго и дорого. На самом деле, так было до сегодняшнего дня. Компонент формы Directual позволяет легко решить все вышеупомянутые задачи! Давайте разберемся, как это работает!

Directual обеспечивает соответствие моделям данных и ролей

Благодаря мощным функциям backend, форма Directual становится крайне настраиваемой.

• Все данные передаются через API-эндпоинты. Это помогает сохранить приватные данные респондентов в безопасности. Никто не может читать или записывать данные, доступ к которым через API не разрешен.
• Существует два уровня настройки ролевой модели. С одной стороны, вы можете требовать авторизацию на веб-странице, с другой стороны — проверять параметры сессии пользователя на уровне API.
• Часто выпадающие списки в форме должны быть связаны со справочником из базы данных (например, пользователь выбирает город или несколько городов). Компонент формы автоматически отображает динамические выпадающие списки для полей типа link и arrayLink с опцией быстрого поиска.

Directual добавляет онлайн-обработку ответов

Еще одна задача, которую решает конструктор форм Directual — синхронная обработка ответов. Этот сценарий использования включает следующие приложения:

• Онлайн-вычисления. Например, калькулятор лизинга или задолженности;
• Проверка базы данных. Например, восстановление пароля: мы можем проверить, есть ли email в базе данных или нет;
• Запрос к API. Пример вы найдете ниже.

Посмотрите на следующую форму, где вы можете проверить погоду в своем городе. Вот она:

За кулисами работает синхронный сценарий, который вызывает API OpenWeatherMap и возвращает текущую температуру и влажность. Вот он:

Сценарий Directual

Заключение

Конструкторы форм раньше решали такие простые задачи, как опросы. Но почти любое приложение содержит формы. И форма внутри приложения должна быть тесно интегрирована с ним. Это соответствует философии Directual Design — сочетанию мощного backend, взаимосвязанных компонентов и возможности создавать новые сложные интерфейсы на React.

P.S. Форма Directual — это открытый React-компонент. Не стесняйтесь изучить его код на GitHub.