Настройте форму сайта в соответствии со стилем и цветовыми решениями вашего бренда. Понятная и привлекательная форма побуждает посетителей отправлять сообщения. Вы можете изменить общий вид формы или настроить дизайн отдельного поля.
Подробнее:
Дизайн формы сайта
Выберите готовый дизайн с похожими цветами и темами или настройте дизайн формы по желанию.
Чтобы настроить дизайн формы сайта:
- Перейдите в редактор и нажмите на форму.
- Нажмите значок Дизайн
в верхней панели.
- Выберите дизайн из готовых вариантов. Нажмите на вариант, чтобы посмотреть его на странице. Содержание формы останется прежним.
- (Необязательно) Нажмите Настроить дизайн, чтобы настроить форму сайта самостоятельно.
- Измените дизайн полей ввода, кнопки отправки и фона формы.
Сначала выберите, какую часть формы вы хотите настроить:
- Поля ввода: обновите дизайн всех полей формы.
Примечание: этот параметр изменяет все поля формы. Нажмите на отдельное поле, чтобы настроить только это поле. - Кнопка отправки: настройте дизайн кнопки отправки формы.
- Фон формы: настройте фон формы (пространство вокруг полей формы).
Затем настройте элемент, используя следующие параметры дизайна:
- Цвета и прозрачность: настройте цвет фона элемента. Нажмите на поле цвета, чтобы выбрать цвет фона, и перетащите ползунок, чтобы увеличить или уменьшить прозрачность.
- Граница: добавьте и настройте границу элемента. Нажмите на поле цвета, чтобы выбрать цвет границы, и перетащите ползунок, чтобы увеличить или уменьшить прозрачность. Выберите стиль границы в разделе Стиль границы.
- Уголки: закругление углов элемента. Введите значение для каждого угла или нажмите значок замка в центре, чтобы изменить все значения одновременно.
- Тень: добавьте тень к элементу.
- Нажмите переключатель Добавить тень, чтобы включить ее.
- Настройте тень, используя доступные параметры:
- Угол: выберите угол тени.
- Расстояние (пикс.): перетащите ползунок, чтобы увеличить или уменьшить расстояние от строки до дальнего края тени.
- Размер (пикс.): перетащите ползунок, чтобы увеличить или уменьшить размер тени.
- Размытие: перетащите ползунок, чтобы увеличить или уменьшить размытие тени.
- Текст: для полей ввода и кнопки отправки вы можете изменить цвет и шрифт текста.
- Поля ввода:
- Название поля: измените цвет, прозрачность и текст заголовка над полем формы.
- Вводимый текст: измените цвет, прозрачность и шрифт текста-подсказки внутри поля формы.
- Кнопка отправки:
- В покое: перейдите на вкладку В покое, чтобы изменить дизайн кнопки в форме.
- При наведении: Перейдите на вкладку При наведении, чтобы изменить дизайн кнопки , когда посетители наводят на нее курсор.
Настройка отдельных полей формы
Если вы хотите внести изменения только в определенные поля формы (например, имя и номер телефона), вы можете выбрать отдельное поле для настройки дизайна.
Чтобы настроить отдельные поля формы:
- Перейдите в редактор и нажмите на форму.
- Нажмите на поле внутри формы, которое вы хотите изменить (например, Дата рождения).
- Нажмите значок Дизайн над полем формы.
- Выберите готовый дизайн для поля формы. В зависимости от выбранного поля вы увидите разные параметры. Например, текстовые поля позволяют вам настроить цвет текста и фон, а поля выбора даты (например, дата рождения) позволяют выбрать из разных дизайнов календаря.
- (Необязательно) Нажмите Настроить дизайн, чтобы продолжить настройку поля.
- Настройте поле формы, используя доступные параметры.
Некоторые поля имеют более одной вкладки (например, в покое и при наведении). Перемещайтесь между вкладками, чтобы настроить их.
- Цвета и прозрачность: настройте цвет фона поля. Нажмите на поле цвета, чтобы выбрать цвет фона, и перетащите ползунок, чтобы увеличить или уменьшить прозрачность.
- Граница: добавьте и настройте границу поля. Нажмите на поле цвета, чтобы выбрать цвет границы, и перетащите ползунок, чтобы увеличить или уменьшить прозрачность. Выберите стиль границы в разделе Стиль границы.
- Уголки: закругление углов поля. Введите значение для каждого угла или нажмите значок замка в центре, чтобы изменить все значения одновременно.
- Тень: добавьте тень к полю.
- Нажмите переключатель Добавить тень, чтобы включить ее.
- Настройте тень, используя доступные параметры:
- Угол: выберите угол тени.
- Расстояние (пикс.): перетащите ползунок, чтобы увеличить или уменьшить расстояние от строки до дальнего края тени.
- Размер (пикс.): перетащите ползунок, чтобы увеличить или уменьшить размер тени.
- Размытие: перетащите ползунок, чтобы увеличить или уменьшить размытие тени.
- Текст: измените цвет текста, шрифт и размер поля.
