Формирование стиля
Auto Form Builder предоставляет вам полный контроль над оформлением форм. Подберите цвета вашего бренда, используйте ваши шрифты, отрегулируйте интервалы и создавайте формы, которые органично вписываются в ваш сайт.
Почему важна форма и стиль
У вашего сайта есть свой бренд. Ваши формы должны его отражать.
Когда формы выглядят иначе, чем остальная часть вашего сайта, посетители колеблются. Они задаются вопросом, находятся ли они все еще на том же сайте. Эта нерешительность снижает конверсию.
Оформленные формы также демонстрируют профессионализм. Продуманная форма говорит посетителям о том, что вы внимательны к деталям — а если вы заботитесь о дизайне форм, то, вероятно, заботитесь и об их данных.
Как работает стилизация форм
В Auto Form Builder встроен визуальный редактор стилей, интегрированный в интерфейс конструктора форм.
- Выберите, что вы хотите оформить.Выберите один из вариантов: контейнер формы, метки полей, поля ввода, кнопки или сообщения об ошибках.
- Настройка параметровИспользуйте палитры цветов, ползунки и выпадающие списки для изменения значений. Не нужно изучать или запоминать синтаксис CSS.
- Предварительный просмотрВсе изменения мгновенно отображаются в режиме предварительного просмотра. Вы сможете увидеть, как будет выглядеть ваша форма, прежде чем публиковать её.
- Сохранить как значения по умолчаниюАвтоматическое применение стилей к новым формам. Создайте один раз, используйте везде.
Что можно настроить
Цвета
Управляйте каждым цветом в вашей форме. Цвета фона для контейнера формы и отдельных полей. Цвета текста для меток, заполнителей и текста ввода. Цвета границ для состояний по умолчанию, при фокусировке и при ошибке. Цвета кнопок для фона, текста и эффектов при наведении курсора.
книгопечатание
Выберите шрифты для подписей и полей ввода. Настройте размер шрифта независимо — более крупные подписи для выделения, более мелкий вспомогательный текст для второстепенной информации. Управляйте толщиной шрифта для жирных подписей или более светлого текста в полях ввода.
Расстояние и макет
Установите расстояние между полями, чтобы создать ощущение простора. Отрегулируйте отступы внутри полей для удобного ввода текста. Настройте поля вокруг всей формы, чтобы идеально расположить ее в макете страницы.
Границы и углы
Задайте ширину, стиль и цвет границы. Закруглите углы для современного вида или оставьте их острыми для минималистичного дизайна. Применяйте разные стили границ к разным состояниям формы — по умолчанию это незаметные границы, а при фокусировке — заметные.
Кнопки
Создайте кнопки отправки, соответствующие вашему бренду. Выберите цвет фона, цвет текста, радиус скругления углов, отступы, размер шрифта и толщину шрифта. Настройте состояния при наведении курсора и активности, чтобы кнопки были отзывчивыми и кликабельными.
ФормаКонтейнер
Оформите форму в целом. Добавьте фоновый цвет или оставьте его прозрачным. Примените тени для придания глубины. Установите радиус скругления углов для закругленных контейнеров форм. Контролируйте максимальную ширину, чтобы формы не растягивались слишком сильно.
Типичные сценарии оформления форм
Соответствие рекомендациям бренда
В вашей компании используются определенные цвета — #0F2D5F для основного цвета, #F59E0B для акцентных. Введите эти значения в редакторе стилей. Кнопки форм используют акцентный цвет. Подписи форм используют основной цвет. Идеальное соответствие фирменному стилю.
Создание высококонтрастных форм
Сайт с темным фоном? Создайте светлые, выделяющиеся формы. Светлый фон? Используйте формы с рамками и едва заметными тенями, чтобы обозначить область формы, не создавая визуального конфликта.
Проектируйте минималистичные формы
Удалите границы, уменьшите отступы, используйте прозрачный фон. Создавайте формы, которые органично вписываются в страницу, а не находятся в замкнутом пространстве.
Создавайте привлекательные формы призыва к действию.
Большие кнопки, яркие цвета, большой отступ. Создавайте формы, которые привлекают внимание на ваших самых важных страницах для генерации лидов.
Формы, подходящие к любой тематике
Auto Form Builder работает со всеми темами WordPress. Ваши стилизованные формы адаптируются к любому дизайну.
Используете Woodmart, Astra, GeneratePress, Divi или любую другую тему? Ваши формы будут выглядеть как нативные. Редактор стилей предоставляет достаточно возможностей для настройки под любую систему дизайна.
Никаких конфликтов тем оформления. Никаких проблем с наследованием стилей. Просто формы, которые выглядят именно так, как вы хотите.
CSS не требуется
Вам не нужно писать собственный CSS-код для оформления форм. Визуальный редактор всё делает автоматически.
Но если вам нужен контроль над CSS, Auto Form Builder поддерживает создание пользовательских CSS-стилей для каждой формы. Добавляйте переопределения для особых случаев или применяйте расширенные стили, недоступные в визуальном редакторе. Опытные пользователи получают необходимую гибкость.
