HubSpot Form Styler — CSS Kustom untuk Webflow

Kenapa form HubSpot terlihat berbeda di situs Anda

Form HubSpot yang di-embed membawa markup sendiri — .hs-form, .hs-form-field, .hs-input, .hs-button — dan, kecuali Anda mematikannya, stylesheet default HubSpot. Hasilnya jarang cocok dengan situs Webflow yang didesain dengan matang: font berbeda, input sempit, kolom setengah lebar yang mengambang, dan tombol oranye generik. Untuk men-styling form, Anda perlu menimpa class-class tersebut dengan CSS yang cukup spesifik agar menang.

Apa saja yang ditangani styler ini

• Tata letak — input selebar penuh, jarak yang konsisten, dan fieldset dua atau tiga kolom yang dibangun ulang dengan flexbox (menumpuk di mobile).
• Input — teks, email, select (dengan panah kustom), textarea, checkbox, dan radio dengan warna aksen Anda.
• Status — ring fokus, field tidak valid, dan pesan error HubSpot, dengan pesan roll-up “please complete all required fields” disembunyikan.
• Teks persetujuan dan tautan — teks GDPR dan hukum dengan gaya yang lebih kecil dan mudah dibaca.
• Tombol — warna, hover, radius, padding, dan opsi lebar penuh.
• Pesan terima kasih — .submitted-message inline setelah submit.

Semua aturan dibatasi pada class container .hubspot-form, jadi tidak akan memengaruhi apa pun di halaman lain.

Penting: form HTML mentah vs form iframe

CSS di halaman Anda hanya bisa men-styling form yang dirender di dalam halaman. Form HubSpot yang di-embed dengan script klasik hbspt.forms.create (v2) dirender sebagai HTML jika form diatur sebagai raw HTML form (opsi form di HubSpot; ketersediaannya bergantung pada paket HubSpot Anda). Form yang dirender di dalam iframe — termasuk form yang dibuat dengan editor form HubSpot yang lebih baru — tidak bisa di-styling dari luar; atur gayanya lewat pengaturan style HubSpot. Tes cepat: klik kanan pada field form di halaman live dan pilih Inspect — jika Anda melihat class="hs-input" langsung di halaman, CSS ini akan berfungsi.

Opsi css: "" di kode embed memberi tahu HubSpot agar tidak memuat CSS default form-nya, sehingga style Anda diterapkan dengan bersih. Jika Anda hanya ingin menimpa beberapa detail, nonaktifkan opsi “Keep HubSpot’s default CSS”.

Menambahkan form HubSpot di Webflow

1. Tempel Code Embed dari tool ini (atau tambahkan Code Embed dan tempel kode embed lengkap).
2. Form hanya muncul di situs yang sudah dipublikasikan — Designer hanya menampilkan embed kosong.
3. Jika ada beberapa form dalam satu halaman, beri setiap form ID container yang berbeda.
4. Lacak konversi dengan field tersembunyi dan parameter UTM, atau dengarkan callback onFormSubmitted dari HubSpot di script footer Anda.

Ingin mencocokkan warna dari design system Anda? Konversi dengan Color Converter dan cek kontras teks dengan Contrast Checker. Untuk section Webflow native, lihat HTML & CSS to Webflow.

Juga dicari sebagai: css form hubspot, styling form hubspot, custom css hubspot form, hubspot form webflow, kode embed hubspot, desain form hubspot, hs-form css, hbspt.forms.create.

Tool yang cocok dipakai bersama Styler Form HubSpot

• Konverter Format Tanggal — Tempel format tanggal seperti DD.MM.YYYY HH:mm dan dapatkan padanannya untuk Make, Zapier, n8n, date-fns, Python, dan PHP — lengkap dengan pratinjau langsung dan ekspresi siap pakai.
• JSON Path Finder — Tempel payload webhook atau respons API, klik nilai mana pun, dan salin path persisnya untuk JavaScript, JSONPath, jq, Python, PHP, n8n, dan Make.
• HTML & CSS ke Webflow — Tempel HTML dan CSS-nya, klik Copy to Webflow, lalu tempel di Designer.
• Generator UTM — Tambahkan utm_source, utm_medium, utm_campaign dan parameter lainnya ke link apa pun, lihat channel GA4 tempat kunjungan akan masuk, dan beri tag sekaligus pada daftar URL.