EN
Оставить заявку

Как создать веб-форму

В главном меню откройте раздел «Веб-слой» и выберите «Формы». Вы увидите список всех форм. Нажмите кнопку «Создать» на верхней панели, чтобы перейти в редактор.

Давайте создадим опрос удовлетворенности клиентов и на его примере разберем каждый шаг создания веб-формы.

Введите имя формы. При желании кратко опишите задачи, которые решает форма. Установите группы доступа и теги для быстрого поиска.
Если необходимо, измените идентификатор формы. Идентификатор используется в отчётах или при подстановке данных из формы в шаблон письма.
Выберите язык формы — на этом языке в форме будут отображаться кнопки и всплывающие подсказки. Например, если пользователь введёт невалидный электронный адрес в email-поле, он увидит подсказку на выбранном языке.
Активируйте форму, нажав на переключатель «Опубликована» в правом верхнем углу. Пользователи могут видеть и, соответственно, заполнять только опубликованные формы. В любой момент вы можете скрыть форму для пользователей, еще раз кликнув на переключатель.
Вы также можете настроить даты начала и окончания публикации формы. Для этого используйте поля «Опубликовать форму на дату» и «Скрыть форму на дату». Такая опция будет полезна, если вы работаете с краткосрочной формой, например, форма для регистрации на вебинар. Когда пользователь попытается заполнить форму, у который истёк срок действия, он увидит такое сообщение:

Вернёмся к нашему опросу удовлетворённости клиентов. Чтобы получить больший отклик от клиентов, мы обещаем им подарить промокод на скидку за прохождение опроса. Такой взаимовыгодный обмен будет действовать только десять дней. Вот как будет выглядеть настройка:

Опция «Скрывать кнопку отправки» не позволит пользователю увидеть кнопку отправки и кнопки для перехода между страницами формы, пока он не заполнит все обязательные поля.
Финальная страница — это страница, которую увидит пользователь после того, как заполнит форму и успешно её отправит. Здесь доступны следующие опции:
Ссылка при успешно заполненной форме — это ссылка, по которой может перейти пользователь после заполнения формы. В этом случае после заполнения всех полей пользователь увидит кнопку «Перейти на сайт». Он может нажать на неё, а может и не нажимать.
Если вы указали ссылку при успешно заполненной форме, а теперь активируете опцию «Перенаправлять на указанную ссылку, минуя финальное сообщение» то после того, как пользователь нажмёт кнопку «Отправить», его сразу будет кидать по указанной ссылке. Он даже не увидит финальной страницы.
Заголовок и сообщение — это текст на финальной странице, который увидит пользователь после заполнения всех полей и страниц формы. По умолчанию выглядит так:
При активации опции «Ограничить повторное заполнение формы» вы сможете настроить страницу, которую увидит пользователь, в случае повторного заполнения формы.
Укажите количество дней, которое должно пройти до того, как будет разрешён повторный доступ к заполнению формы в поле «Ограничивать в течение дней».
В поле «Заголовок и сообщение» введите текст, который увидит пользователь при повторном заполнении формы.
Если вы хотите, чтобы пользователь при повторной попытке открыть уже заполненную форму сразу переходил на другую страницу, нажмите на переключатель «Перенаправлять на указанную ссылку, если форма ранее заполнялась».
У вас также есть возможность добавить дополнительный код в форму.

С помощью этого кода можно:

  • стилизовать страницы формы (HTML + CSS);

  • добавить скрипты, например, для аналитики или регистрации цели (JavaScript).
Пример использования дополнительного кода для оформления формы

На этом работа с основными настройками завершена. Далее перейдём в конструктор формы.

На второй вкладке «Конструктор» происходит настройка структуры формы и ее полей.

Форма состоит из страниц и полей. Одно поле — один вопрос респонденту. На одной странице может быть любое количество полей.

Если форма простая, достаточно одной страницы. Деление на страницы удобно, если вы создаёте длинную форму. В таком случае вы сможете разбить вопросы по смысловым блокам. Также деление на страницы используется для добавление сложной логики в форму — переход между страницами в зависимости от ответа пользователя. Если в форме несколько страниц, пользователь может переходить между ними, используя кнопки «Следующая» и «Предыдущая»

Добавление полей во вкладке «Конструктор» подробно описано в данной статье.

По завершении работы с «Конструктором» приступим к оформлению формы.

Перейдём на вкладку «Оформление».

На данной вкладке настраивается оформление формы:

  • Шрифты (семейство, размер)

  • Цветовая схема (текст, фон, кнопки)

  • Выравнивание (отсутствие выравнивания, по левому/правому краю, по центру)

В левой части отображается предпросмотр формы в реальном времени.

Также в форме доступна стилизация кнопок:

  • «Отправить» (для отправления формы)

  • «Назад» (для перехода на следующую страницу формы)

  • «Вперед» (для перехода на предыдущую страницу формы)

  • Кнопка перехода на сайт на финальной странице

Для каждой кнопки вы можете указать:

  • текст, который будет отображатьcя в кнопке

  • размер шрифта (в пикселях)

  • иконку

После оформления формы сохраните изменения, нажав кнопку «Применить» в верхней части страницы. Теперь вы можете поделиться ссылкой на форму или разместить её на странице вашего сайта. О том, как это сделать, читайте в этой статье.

Может быть интересно

Продолжая использовать наш сайт, вы даете согласие на обработку файлов cookie, которые обеспечивают правильную работу сайта. 

Подробнее...