Обзор форм - помощь Webflow
Формы — это один из самых мощных инструментов в интернете, позволяющий эффективно собирать информацию, будь то подписка на рассылку или запросы от потенциальных клиентов. С Webflow вы можете полностью настроить и оптимизировать свои формы под свои нужды. Вы можете добавить блок формы на свой сайт из Панель добавления → Элементы → Формы.
Анатомия формы
Блок формы наследует полную ширину родительского элемента и содержит три дочерних элемента:
- Форма — содержит все ваши поля ввода и элементы формы
- Сообщение об успехе — сообщение, возвращаемое при успешной отправке формы
- Сообщение об ошибке — сообщение, возвращаемое при возникновении проблемы с отправкой формы
Структура формы
Вы можете добавить или удалить любой из следующих элементов формы, чтобы настроить форму по своему усмотрению:
| Элемент формы | Назначение |
|---|---|
| Метка поля | Используется для описания функции или назначения поля формы. Метки полей важны для доступности. |
| Поле ввода | Используется для сбора данных в одну строку, например, короткий ответ на вопрос (например, имя или адрес электронной почты) |
| Загрузка файла | Позволяет посетителям сайта прикрепить файл к своей отправке формы |
| Текстовая область | Позволяет посетителям сайта вводить многострочные данные, например, длинное сообщение |
| Флажок | Используется для ввода данных, где посетители сайта могут выбрать один или несколько вариантов |
| Переключатель | Используется для ввода данных, где посетители сайта могут выбрать только один из многих вариантов |
| Выбор | Используется для того, чтобы посетители сайта могли выбрать варианты из выпадающего списка. Возможен множественный выбор |
| reCAPTCHA | Сервис Google, предотвращающий спам в формах |
| Кнопка отправки | Отправляет все данные, собранные в форме. Ни одна форма не завершена без Кнопки отправки |
Как настроить элементы формы
Вы можете дважды щелкнуть элемент формы (например, поле ввода, кнопку отправки), чтобы открыть его настройки. Каждый элемент формы имеет разные настройки ввода в зависимости от его типа:
| Настройка ввода | Назначение | Дополнительные заметки |
|---|---|---|
| Имя | Идентифицирует поле в отправках формы | н/д |
| Обязательное | Позволяет требовать заполнение поля формы для отправки формы | Блокирует пустые отправки |
| Заполнитель | Показывает текст в поле ввода, который исчезает при вводе; не должен заменять метки или важные инструкции | Недоступен для вспомогательных технологий или инструментов перевода; стилизуется из меню состояний |
| Тип текста | Указывает тип ввода (например, email, телефон, пароль) | Телефон принимает символы и показывает клавиатуру; пароль скрывает введенные символы |
| Автофокус | Определяет, будет ли поле автоматически фокусироваться при загрузке страницы | Следите за проблемами прокрутки/прыжков или скрытыми полями, блокирующими отправку |
Кнопка отправки
Настройки кнопки отправки позволяют установить:
- Текст кнопки: Что отображается на кнопке (по умолчанию: «Отправить»)
- Текст ожидания: Что заменяет кнопку после нажатия и до завершения отправки (по умолчанию: «Пожалуйста, подождите...»)
Как управлять настройками формы
Настройка состояний успеха и ошибки
Выберите блок формы и перейдите в Настройки блока формы, чтобы:
- Обычное: Состояние по умолчанию
- Успех: Сообщение после успешной отправки
- Ошибка: Сообщение после неудачной отправки
Установите имя формы
Имя, которое вы задаете, связывает форму с данными ее отправки. Если вы не зададите уникальные имена, все данные отправки будут отображаться под «Email Form». Дайте описательные имена, чтобы различать формы.
Управление отправками форм и уведомлениями
- Укажите получателей в настройках блока формы.
- Доступ к расширенным уведомлениям в настройках сайта → Формы → Уведомления формы.
- Для полных владельцев сайта: доступ/управление данными формы в настройках сайта → Формы → Отправки формы.
Перенаправление посетителей сайта при отправке формы
Добавьте URL в поле Перенаправление, чтобы отправить пользователей в другое место после отправки.
Установите пользовательское действие
Добавьте пользовательское действие для отправки данных в другое место (например, HubSpot). Когда вы добавляете это, Webflow не обрабатывает и не отправляет уведомление. Вы также можете подключить приложения для большего количества интеграций.
Просмотр подключений приложений
Подключенные приложения будут отображаться в Подключениях. Примечание: Отправка данных формы в Webflow всегда отображается, если вы полностью не обходите обработку Webflow.
Данные формы и GDPR
- Если вы собираете личные данные от жителей ЕС (включая через формы), вы являетесь контролером данных в соответствии с GDPR.
- Получите соответствующее согласие на сбор данных.
- Если вы создаете для клиентов, обучите их их обязанностям.
- Пересмотрите обязанности, если подключаете данные к третьим сторонам (например, Zapier).
Узнать больше:
Устранение неполадок
Если вашу форму нельзя отправить:
- Если вы включили reCAPTCHA, убедитесь, что все формы его содержат. В противном случае отправка не удастся.
- Если у вас есть скрытые поля, убедитесь, что Автофокус отключен для них.
- Бесплатные/нехостинговые сайты ограничены 50 общими отправками форм. Обновите план сайта, чтобы снять ограничение.
Если проблемы сохраняются, свяжитесь со службой поддержки.