Как изменить дизайн формы отправки запроса в «Поддержку»

Внешний вид и содержимое формы, с помощью которой посетители сайта отправляют вам вопросы и другие сообщения, можно легко изменять: с помощью конструктора формы и CSS-стилей в приложении «Поддержка».

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

1. Конструктор формы

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

Изменение набора полей

Чтобы добавить новое поле, используйте ссылки «Добавить поля контакта» и «Добавить поля запроса» — в зависимости от того, хотите ли вы получить от автора запроса какие-то его личные либо общие данные.

Чтобы удалить поле, наведите курсор на название поля и щелкните по иконке удаления, которая появится справа.

Чтобы изменить порядок расположения полей, перетащите поля в нужное место в форме с помощью иконки управления слева от названия поля.

Индивидуальные настройки полей

Чтобы изменить индивидуальные настройки каждого поля, щелкните по названию нужного поля в конструкторе. После этого выберите или введите нужные параметры во всплывающей области.

В настройках поля можно выбрать следующие свойства:

  • Подпись: текстовый заголовок, который должен отображаться рядом с полем.
  • Размещение подписи: слева или над полем, либо не отображать совсем.
  • Вид:
    • Выпадающий список или набор радио-кнопок. Эта настройка доступна только для полей, допускающих выбор одного из доступных вариантов. Такое поле можно создать в разделе «Админ → Конструктор полей», выбрав тип поля «Выпадающий список».
    • Простой текст или редактор. Эта настройка доступна для полей, допускающих ввод многострочного текста.
  • Подсказка: стандартный текст, который будет отображаться в текстовом поле, когда оно еще не заполнено посетителем сайта. При вводе текста в поле подсказка исчезает.
  • Обязательное: необходимо ли пользователю заполнить это поле, для того чтобы отправить вам запрос.
  • Идентификация: для поля «Телефон» возможна автоматическая привязка автора запроса к существующему контакту при совпадении значения.

Дополнительные элементы формы

С помощью конструктора в форму легко добавлять дополнительные фрагменты текста и горизонтальные линии для визуального разделения частей большой формы друг от друга. Для этого используйте элементы «Параграф текста» и «Горизонтальный разделитель».

2. CSS-стили

Профессиональное оформление формы достигается путем использования CSS-стилей. Для их изменения используйте встроенный CSS-редактор, который становится доступным по ссылке «Редактировать CSS» после включения настройки «Использовать форму на сайте». Примеры форм, использующих разнообразное стилевое оформление.

2 комментария

  • +1
    - - 9 марта 2017 13:35 #

    Все круто, только вот есть один момент, если у Вас на странице 2 или более форм с разными стилями, причем структура то у форм одинакова, чьей же формы CSS будет применен к обоим?

    Можно ли пример, где на одной странице будет опубликовано 2 формы с разными стилями и как решить эту задачу не влезая во внутренности?


    • +1
      Михаил Ушенин Михаил Ушенин Webasyst 9 марта 2017 18:00 #

      Разместите код формы на странице сайта внутри элемента с уникальным именем класса и в редакторе CSS-стилей формы используйте селекторы с использованием этого класса.

      Добавить комментарий

      Чтобы добавить комментарий, зарегистрируйтесь или войдите