English Español Português Русский العربية
Home / Features / Custom CSS
Для разработчиков

Pixel-perfect формы с CSS

Темы дают 80%. Кастомный CSS — оставшиеся проценты. Переопределяйте шрифты, цвета, отступы, анимации — всё, что не покрывает тема. Сохраняйте оверрайды на каждой форме.

Начать бесплатно Посмотреть темы
form-design.css
/* Brand fonts */
@import url('https://fonts.googleapis.com/css?family=Inter:400,600,700');
.fb-form {
font-family: 'Inter', sans-serif;
--brand: #5B47FF;
}
.fb-input {
border-radius: 14px;
border: 1px solid #E3E8EE;
transition: border-color .2s;
}
.fb-input:focus {
border-color: var(--brand);
box-shadow: 0 0 0 4px rgba(91,71,255,.12);
}

Где темы заканчиваются — начинается CSS

Встроенные темы покрывают типовые случаи. Кастомный CSS открывает long tail — особенности бренда, нестандартные шрифты, микровзаимодействия, тонкая настройка лейаута.

Встроенный редактор

Редактор CSS живёт прямо в настройках дизайна формы. Правьте, сохраняйте, видите изменения в живом превью.

Переопределяйте всё

Поля, лейблы, кнопки, состояния ошибок, focus, переходы — всё доступно стандартными CSS-селекторами.

Тема + CSS

Стартуйте с темы для основного, накладывайте свой CSS сверху. Оба мира — быстрый старт и полный контроль.

Сохраняется на форме

У каждой формы свой CSS. Разные бренды, разные формы, разные правила — без глобальных побочных эффектов.

Дизайнер и разработчик вместе

Дизайнеры визуально настраивают темы, разработчики доводят кастомным CSS. Оба процесса в одной форме.

Без шага сборки

Сохранили — стили применились к живой форме сразу. Без деплой-пайплайна, без ребилда, без ожидания.

Стилизуйте всё в форме

Типовые цели — и как о них думать.

  • Свои шрифты через @font-face или импорт Google Fonts
  • Бренд-токены цветов на инпутах, focus ring, кнопках
  • Border-radius, тени, объёмные эффекты
  • Отступы между полями, позиция лейблов, многоколоночные лейауты
  • Hover- и focus-анимации, плавные переходы
  • Свои состояния ошибок и сообщения валидации
  • Печатные стили для бумажных процессов
  • Мобильные оверрайды через media queries
FORM PREVIEW

Частые вопросы

Куда добавлять кастомный CSS?
Откройте форму, перейдите в Дизайн → Кастомный CSS. Появится редактор с подсветкой синтаксиса. Сохранили — стили применились к живой форме сразу.
Можно импортировать внешние шрифты?
Да. Используйте @import url(...) в начале вашего CSS для подгрузки Google Fonts, Adobe Fonts или любого веб-шрифта. Форма уважает импорт при загрузке.
Сломается ли мой CSS при обновлении рендерера формы?
Имена публичных CSS-классов мы считаем стабильным API и не переименовываем в обычных обновлениях. Большие редизайны документируются в чейнджлоге с заметками миграции.
Можно ли переопределить стили темы?
Можно переопределить всё. Кастомный CSS грузится после стилей темы, поэтому ваши правила побеждают в каскаде. !important в большинстве случаев не нужен.
Кастомный CSS доступен на бесплатном плане?
Кастомный CSS включён в платные планы. На бесплатном плане доступна полная система тем; уточните уровень на странице тарифов.
Можно ли делиться CSS между формами?
Сейчас у каждой формы свой CSS. Для общих стилей — копируйте сниппет или сохраняйте в командной системе заметок/сниппетов.

Связанное

Темы

5 встроенных тем покрывают типовые случаи. Настройте цвета и шрифты визуально, прежде чем тянуться к CSS.

Подробнее →

White-label

Уберите брендинг FormBuilder на платных планах. Сочетайте с кастомным CSS для полной фирменной идентичности.

Подробнее →

Drag-and-drop редактор

Визуальный редактор отвечает за структуру, поля, валидацию, условную логику. CSS — за внешний вид.

Подробнее →

Стилизуйте формы именно так, как нужно

Возьмите тему, наложите CSS, выпустите форму, не похожую ни на чью.

Начать бесплатно