Стилізація форми
Auto Form Builder надає вам повний контроль над стилем форм. Підбирайте кольори вашого бренду, використовуйте шрифти, налаштовуйте інтервали та створюйте форми, які виглядають як природна частина вашого сайту.
Чому важливо стилізувати форму
Ваш вебсайт має бренд. Ваші форми повинні його відображати.
Коли форми виглядають інакше, ніж решта вашого сайту, відвідувачі вагаються. Вони задаються питанням, чи все ще перебувають на тому самому вебсайті. Ці вагання призводять до зниження конверсій.
Стилізовані форми також демонструють професіоналізм. Відшліфована форма показує відвідувачам, що вам важливі деталі, а якщо вам важливий дизайн форми, то, ймовірно, вам також важливі їхні дані.
Як працює стилізація форм
Auto Form Builder містить редактор візуальних стилів, вбудований в інтерфейс конструктора форм.
- Виберіть, що стилізуватиВиберіть контейнер форми, підписи полів, поля введення, кнопки або повідомлення про помилки.
- Налаштуйте налаштуванняВикористовуйте палітри кольорів, повзунки та випадаючі списки для зміни значень. Не потрібно вивчати чи запам'ятовувати синтаксис CSS.
- Миттєвий попередній переглядКожна зміна одразу відображається в режимі попереднього перегляду. Перегляньте, як саме виглядатиме ваша форма, перш ніж опублікувати її.
- Зберегти як налаштування за замовчуваннямАвтоматично застосовуйте свої стилі до нових форм. Створіть один раз, використовуйте повторно всюди.
Що можна налаштувати
Кольори
Керуйте кожним кольором у вашій формі. Кольори фону для контейнера форми та окремих полів. Кольори тексту для підписів, заповнювачів та вхідного тексту. Кольори меж для станів за замовчуванням, фокусу та помилок. Кольори кнопок для фону, тексту та ефектів наведення курсора.
Книгодрукування
Вибирайте шрифти для підписів та полів введення. Налаштовуйте розміри шрифтів незалежно один від одного: більші підписи для виділення, менший допоміжний текст для додаткової інформації. Контролюйте товщину шрифту для жирних підписів або світлішого тексту введення.
Інтервал і макет
Встановіть інтервали між полями, щоб створити простір для дихання. Налаштуйте відступи всередині полів для зручного введення тексту. Контролюйте поля по всій формі, щоб ідеально розташувати її в макеті сторінки.
Кордони та кути
Визначте ширину, стиль та колір межі. Заокругліть кути для сучасного вигляду або збережіть їх гострими для мінімалістичного дизайну. Застосовуйте різні стилі меж до різних станів форми — ледь помітні межі за замовчуванням, помітні межі у фокусі.
Кнопки
Створіть кнопки надсилання, які відповідають вашому бренду. Колір фону, колір тексту, радіус межі, відступи, розмір та товщина шрифту. Налаштуйте стан наведення курсора та активний стан, щоб кнопки реагували на враження та були клікабельними.
FormContainer
Стилізуйте загальну оболонку форми. Додайте колір фону або залиште його прозорим. Застосуйте тіні блоків для глибини. Встановіть радіус межі для заокруглених контейнерів форм. Контролюйте максимальну ширину, щоб запобігти надмірному розтягуванню форм.
Поширені сценарії стилізації форм
Керівні принципи бренду Match
Ваша компанія має певні кольори — #0F2D5F для основних, #F59E0B для акцентів. Введіть ці значення в редакторі стилів. Кнопки форми використовують ваш акцентний колір. Написи форм використовують ваш основний колір. Ідеальна узгодженість бренду.
Створення висококонтрастних форм
Темний фон для вебсайту? Створіть світлі форми, які виділяються. Світлий фон? Використовуйте облямовані форми з ледь помітними тінями, щоб окреслити область форми без візуальної конкуренції.
Дизайн мінімальних форм
Видаліть межі, зменште інтервали, використовуйте прозорий фон. Створюйте форми, які інтегровані в сторінку, а не замкнені в коробці.
Створюйте сміливі форми закликів до дії
Великі кнопки, насичені кольори, щедрі відступи. Створюйте форми, які привертають увагу для ваших найважливіших сторінок для генерування лідів.
Форми, що відповідають будь-якій темі
Auto Form Builder працює з кожною темою WordPress. Ваші стилізовані форми адаптуються до будь-якого дизайнерського контексту.
Використовуєте Woodmart, Astra, GeneratePress, Divi чи будь-яку іншу тему? Ваші форми виглядатимуть нативно. Редактор стилів надає вам достатньо контролю, щоб відповідати будь-якій системі дизайну.
Жодних конфліктів тем. Жодних проблем успадкування стилів. Тільки форми, які виглядають саме так, як ви хочете.
CSS не потрібен
Вам не потрібно писати власний CSS для стилізації форм. Візуальний редактор обробляє все.
Але якщо вам потрібен контроль над CSS, Auto Form Builder підтримує налаштування CSS для кожної форми. Додайте перевизначення для крайніх випадків або застосуйте розширені стилі, недоступні у візуальному редакторі. Досвідчені користувачі отримують необхідну гнучкість.
