После добавления контактной формы вы можете настроить её внешний вид. В этом руководстве будет показано, как изменять стили, цвета и макеты форм вашего веб-сайта.
В блоке «Форма» имеется богатый выбор стилей дизайна форм.
- Выберите Представление в виде списка в верхнем левом углу редактора. Значок выглядит как три расположенные друг над другом горизонтальные линии.
- Найдите блок «Форма» и щёлкните по нему.
- В настройках блока на правой боковой панели перейдите на вкладку Стили (она обозначена чёрно-белым кружком).
- Выберите стиль.
- По умолчанию: имена полей ввода отображаются вне полей, без анимации.
- Анимация: имена полей ввода отображаются внутри полей, с короткой анимацией; поле, на которое нажимает посетитель, визуально выделяется.
- Контур: имена полей ввода отображаются внутри полей, с короткой анимацией и постоянным контуром вокруг настроек блока.
- Нажмите кнопку «Сохранить» вверху страницы.
Текст-заполнитель — это образец текста, который располагается в поле формы до того, как посетитель нажмёт на него, а затем исчезает, когда пользователь начинает вводить свой текст. Он может пригодиться посетителям сайта в качестве образца заполнения формы.
Чтобы добавить текст-заполнитель в контактную форму, выполните следующие действия:
- Щёлкните любое поле в форме.
- Откройте боковую панель настроек блока.
- Прокрутите страницу вниз до настройки «Текст-заполнитель».
- Введите образец текста в поле. Он станет отображаться в поле формы.
- Нажмите кнопку «Сохранить» вверху страницы.
По умолчанию поля формы соответствуют ширине контейнера формы. Чтобы изменить ширину отдельных полей, выполните следующие действия:
- Щёлкните любое поле в форме.
- Откройте боковую панель настроек блока.
- Прокрутите страницу вниз до настройки Ширина и установите ширину 25 %, 50 %, 75 % или 100 %.
- Если вы хотите, чтобы два поля располагались рядом, задайте для каждого из них значение 50 %. При наличии места на одной строке может отображаться несколько полей.
- Нажмите кнопку «Сохранить» вверху страницы.
Можно выбрать режим отображения цвета и текста для каждого отдельного поля формы или настроить её таким образом, чтобы ко всем полям формы были применены одни и те же настройки цвета и текста.
При нажатии на отдельное поле формы в настройках блока появится переключатель «Синхронизировать стиль полей». Если установить его в положение «ВКЛ.», то изменения, внесённые в это поле, будут применены ко всем полям. Переведите его в положение «ВЫКЛ.», если хотите изменить настройки только одного поля.
Чтобы обеспечить единообразие формы, можно синхронизировать следующие параметры:
- Цвет. Задаёт цвета следующих элементов:
- Текст названия. Текст, который отображается над полем формы.
- Текст в поле. Шаблонный текст-заполнитель (по желанию), а также текст, вводимый в поле.
- Фон поля. Фон внутри поля ввода формы.
- Контур. Граница вокруг поля формы.
- Стили поля ввода: задаёт размер текста, высоту строки и стили границ поля.
- Стили названий. Задаёт размер текста и высоту строки названий полей.
Чтобы настроить цвета формы, выполните следующие действия:
- Откройте представление в виде списка и найдите блок «Форма» и отдельные поля внутри него.
- Выбрав блок «Форма» целиком, откройте настройки блока на боковой панели и перейдите на вкладку Стили (обозначена чёрно-белым кружком).
- С помощью настроек цвета можно управлять цветом текста в форме, цветом фона и цветом ссылок, используемых в форме.
- Затем щёлкните отдельное поле формы и снова откройте настройки блока.
- Здесь можно настроить следующие цвета для каждого отдельного поля формы:
- Текст названия. Текст, который отображается над полем формы.
- Текст в поле. Шаблонный текст-заполнитель (по желанию), а также текст, вводимый в поле.
- Фон поля. Фон внутри поля ввода формы.
- Контур. Граница вокруг поля формы.
- Активируйте переключатель «Синхронизировать стили полей», чтобы применить изменения ко всем полям, или отключите его, чтобы управлять каждым полем по отдельности.
- Нажмите кнопку «Сохранить» вверху страницы.
Поддержка 