Как пользоваться: Стилизатор форм HubSpot
- Выберите пресет, затем настройте шрифты, цвета, границы полей, отступы и кнопку. В предпросмотре используется та же разметка, которую HubSpot выводит для встроенных форм.
- Введите ваш Portal ID, Form ID и регион (все эти значения есть в коде встраивания формы в HubSpot).
- Нажмите Copy to Webflow (Code Embed), выберите место для формы в Designer и нажмите Ctrl/⌘+V.
- Предпочитаете чистые страницы? Используйте «только стили и контейнер» для страницы, а скрипт поместите в Page settings → Before </body> или Site settings → Custom code → Footer. Опубликуйте сайт и проверьте форму на реальном домене.
Почему формы HubSpot выглядят иначе на вашем сайте
Встроенная форма HubSpot приносит собственную разметку — .hs-form, .hs-form-field, .hs-input, .hs-button — а если её не отключить, и стандартную таблицу стилей HubSpot. Результат редко совпадает с тщательно продуманным сайтом на Webflow: другие шрифты, узкие поля, полуширинные колонки и типовая оранжевая кнопка. Чтобы оформить форму, нужно переопределить эти классы CSS-правилами с достаточной специфичностью.
Что покрывает этот стилизатор
- Макет — поля на всю ширину, единые отступы и блоки из двух или трёх колонок, перестроенные на flexbox (на мобильных устройствах расположены друг под другом).
- Поля — текст, email, список (со своей стрелкой), textarea, чекбоксы и радиокнопки в цвете вашего акцента.
- Состояния — рамка фокуса, некорректные поля и сообщения об ошибках HubSpot; общее сообщение «заполните все обязательные поля» скрыто.
- Текст согласия и ссылки — текст GDPR и юридические пояснения в меньшем и читаемом стиле.
- Кнопка — цвета, наведение, скругление, отступы и вариант на всю ширину.
- Сообщение после отправки — встроенный
.submitted-message.
Все правила ограничены классом контейнера .hubspot-form, поэтому они не повлияют на остальную часть страницы.
Важно: обычные HTML-формы и формы в iframe
CSS на вашей странице может стилизовать только форму, которая отображается непосредственно на странице. Формы HubSpot, встроенные классическим скриптом hbspt.forms.create (v2), выводятся как HTML, если форма настроена как raw HTML form (параметры формы в HubSpot; доступность зависит от вашего тарифа HubSpot). Формы, которые отображаются внутри iframe, включая формы из нового редактора HubSpot, извне стилизовать нельзя — для них используйте собственные настройки стилей HubSpot. Быстрая проверка: щёлкните правой кнопкой по полю формы на опубликованной странице и выберите «Посмотреть код». Если вы видите class="hs-input" прямо в странице, этот CSS будет работать.
Опция css: "" в коде встраивания говорит HubSpot не загружать стандартный CSS формы, чтобы ваши стили применялись без конфликтов. Снимите этот параметр, если хотите переопределить только отдельные детали.
Добавление формы HubSpot в Webflow
- Вставьте Code Embed из этого инструмента (или добавьте Code Embed и вставьте полный код встраивания).
- Форма появляется только на опубликованном сайте — в Designer встраивание выглядит пустым.
- Если на одной странице несколько форм, задайте каждой свой ID контейнера.
- Отслеживайте конверсии с помощью скрытых полей и UTM-меток или подпишитесь на callback
onFormSubmittedот HubSpot в скрипте футера.
Нужно подобрать цвета из дизайн-системы? Переведите их с помощью Color Converter и проверьте контраст текста в Contrast Checker. Для нативных секций Webflow см. HTML & CSS to Webflow.
Также ищут как: css для формы hubspot, форма hubspot webflow, hs-form css, hbspt.forms.create.
Инструменты, которые хорошо сочетаются с Стилизатор форм HubSpot
- Конвертер формата даты — Вставьте формат даты, например DD.MM.YYYY HH:mm, и получите эквивалент для Make, Zapier, n8n, date-fns, Python и PHP — с живым предпросмотром и готовыми выражениями для вставки.
- Поиск пути в JSON — Вставьте payload webhook или ответ API, нажмите на любое значение и скопируйте его точный путь — для JavaScript, JSONPath, jq, Python, PHP, n8n и Make.
- HTML и CSS в Webflow — Вставьте HTML и его CSS, нажмите Скопировать в Webflow и вставьте результат в Designer.
- UTM-генератор — Добавляйте utm_source, utm_medium, utm_campaign и другие параметры к любой ссылке, смотрите, в какой канал GA4 попадёт переход, и размечайте сразу целый список URL.
Часто задаваемые вопросы
Почему мой CSS не меняет форму HubSpot?
<iframe>, переключите форму на raw HTML form в HubSpot (если это позволяет ваш тариф) или стилизуйте её в настройках стилей форм HubSpot.Где найти Portal ID и Form ID?
portalId и formId находятся в этом фрагменте, там же указан регион (например, eu1 или na1).Почему форма пустая в Webflow Designer?
Можно ли стилизовать поля в две колонки?
fieldset.form-columns-2; сгенерированный CSS превращает их в гибкий ряд, который перестраивается в столбец на экранах уже 768px.