Что такое Конструктор форм?

Конструктор форм позволяет создавать пользовательские формы с помощью визуального редактора. Добавляйте текстовые поля, выпадающие списки, чекбоксы и другие элементы, а затем экспортируйте форму как HTML или JSON-схему.

Выберите из четырнадцати типов полей: текст, эл. почта, телефон, URL, число, дата, загрузка файла, шкала оценки, выпадающий список, флажок, один выбор, многострочное поле, блоки описания для вводного текста и разрывы страниц, которые делят длинную форму на шаги. У каждого поля ввода есть подпись, необязательная подсказка, placeholder, отметка обязательности и список вариантов для списков и одиночного выбора. Начните с готового шаблона (контакт, отзыв, опрос, регистрация, заказ, бронирование), меняйте порядок полей стрелками вверх/вниз, смотрите живой предпросмотр с индикатором прогресса по страницам, а затем экспортируйте аккуратную оформленную HTML-страницу для вставки на любой сайт или JSON-схему для проверки на сервере.

Как использовать

1. Шаг 1 — нажмите «Добавить поле», чтобы вставить новое поле и выбрать его тип (текст, эл. почта, телефон, URL, число, дата, файл, шкала оценки, выпадающий список, флажок, один выбор или многострочное поле), добавьте разрыв страницы, чтобы разделить длинную форму на шаги, или загрузите готовый шаблон для быстрого старта.
2. Шаг 2 — Щёлкните по любому полю, чтобы задать его подпись, плейсхолдер и обязательность заполнения.
3. Шаг 3 — Просмотрите форму в реальном времени, затем экспортируйте как HTML-код или JSON-схему для интеграции в проект.

Когда использовать

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

Результат

Учитель создаёт форму регистрации в класс с полями: Имя ученика (обязательный текст), Класс (выпадающий список: 9–12), Email (с проверкой формата) и текстовая область для комментариев — затем экспортирует HTML для встраивания на сайт школы.

Частые вопросы

Куда уходят данные, когда кто-то отправляет форму?

По умолчанию никуда. У экспортированного HTML нет адреса в action, поэтому отправка никуда не уходит, а данные не покидают устройство. Чтобы получать ответы, пропишите в action собственный endpoint, Formspree, Google Forms или серверлес-функцию.

Можно ли загрузить существующую форму обратно в редактор?

Пока нет. Экспорт односторонний: из редактора в HTML или JSON. Если форму надо будет править позже, сохраните JSON-схему и пересоберите вручную или держите сессию редактора открытой, пока не закончите итерации.

Почему не показываются варианты выпадающего списка?

Выпадающие и радио требуют хотя бы один пункт в списке вариантов. Кликните по полю, откройте раздел «Варианты» и введите каждый пункт через запятую или с новой строки. Пустой список даёт пустой select без элементов.

Есть ли стили в экспортированном HTML?

Да — теперь каждый экспорт HTML включает небольшую встроенную таблицу стилей, поэтому форма выглядит аккуратно и читаемо сразу при открытии файла: ровные отступы, рамки полей, фокусное кольцо и стилизованная кнопка отправки. CSS минимальный и самодостаточный — оставьте как есть либо удалите блок стилей и подставьте свои классы Tailwind, Bootstrap или другого фреймворка.

Чем отличается экспорт HTML от JSON?

HTML готов к вставке в страницу и сразу отрисовывается. JSON — это структурированная схема с типами полей, подписями и правилами валидации, удобная для рендеринга через React, Vue или библиотеки вроде react-hook-form и Formik.

Похожие инструменты