HubSpot Form Styler — CSS tùy chỉnh cho Webflow

Vì sao HubSpot form trên website của bạn trông khác

HubSpot form nhúng đi kèm markup riêng — .hs-form, .hs-form-field, .hs-input, .hs-button — và trừ khi bạn tắt đi, còn có stylesheet mặc định của HubSpot. Kết quả thường không khớp với một website Webflow được thiết kế kỹ lưỡng: font khác, ô nhập hẹp, các cột nửa chiều rộng bị float và một nút màu cam chung chung. Muốn tùy chỉnh form, bạn cần ghi đè các class đó bằng CSS đủ cụ thể để có hiệu lực.

Công cụ này xử lý những gì

• Bố cục — ô nhập full chiều rộng, khoảng cách đồng nhất, và các fieldset hai hoặc ba cột được dựng lại bằng flexbox (xếp chồng trên mobile).
• Ô nhập — text, email, select (với mũi tên tùy chỉnh), textarea, checkbox và radio theo màu nhấn của bạn.
• Trạng thái — viền focus, ô không hợp lệ và thông báo lỗi của HubSpot, với thông báo tổng “vui lòng điền đầy đủ các trường bắt buộc” được ẩn đi.
• Văn bản đồng ý và liên kết — nội dung GDPR và pháp lý với kiểu chữ nhỏ hơn, dễ đọc.
• Nút — màu sắc, hiệu ứng khi rê chuột, bo góc, đệm và tùy chọn toàn chiều rộng.
• Thông báo cảm ơn — phần .submitted-message hiển thị sau khi gửi.

Tất cả quy tắc đều được giới hạn trong class container .hubspot-form, nên chúng không ảnh hưởng đến phần nào khác trên trang.

Quan trọng: form HTML thuần và form iframe

CSS trên trang của bạn chỉ tạo kiểu được cho form render trực tiếp trong trang. Form HubSpot nhúng bằng script hbspt.forms.create (v2) cổ điển sẽ render thành HTML khi form được đặt thành raw HTML form (tùy chọn form trong HubSpot; tính năng này tùy thuộc gói HubSpot của bạn). Form render trong iframe — kể cả form tạo bằng trình chỉnh sửa form mới của HubSpot — không thể tùy chỉnh từ bên ngoài; hãy chỉnh chúng trong phần cài đặt style của chính HubSpot. Cách kiểm tra nhanh: chuột phải vào một ô nhập trên trang thật và chọn Inspect — nếu bạn thấy class="hs-input" ngay trong trang, CSS này sẽ hoạt động.

Tùy chọn css: "" trong mã nhúng báo cho HubSpot không tải CSS mặc định của form, để style của bạn được áp dụng sạch sẽ. Bỏ chọn nếu bạn chỉ muốn ghi đè một vài chi tiết.

Thêm HubSpot form vào Webflow

1. Dán Code Embed từ công cụ này (hoặc thêm một Code Embed rồi dán toàn bộ mã nhúng).
2. Form chỉ xuất hiện trên website đã xuất bản — Designer hiển thị một khối embed trống.
3. Nếu có nhiều form trên cùng một trang, hãy đặt cho mỗi form một ID container khác nhau.
4. Theo dõi chuyển đổi bằng trường ẩn và tham số UTM, hoặc lắng nghe callback onFormSubmitted của HubSpot trong script footer.

Muốn khớp màu với hệ thống thiết kế của bạn? Chuyển đổi bằng Color Converter và kiểm tra độ tương phản chữ bằng Contrast Checker. Với các section Webflow gốc, xem HTML & CSS to Webflow.

Cũng được tìm dưới tên: css hubspot form, tùy chỉnh hubspot form, style hubspot form, hubspot form webflow, mã nhúng hubspot form, thiết kế hubspot form, hs-form css, hbspt.forms.create.

Các công cụ dùng kèm tốt với Chỉnh CSS HubSpot Form

• Chuyển định dạng ngày — Dán một định dạng ngày như DD.MM.YYYY HH:mm và nhận ngay cú pháp tương đương cho Make, Zapier, n8n, date-fns, Python và PHP, kèm xem trước trực tiếp và biểu thức sẵn sàng dán.
• Công cụ tìm JSON Path — Dán payload webhook hoặc phản hồi API, nhấn vào giá trị bạn cần và sao chép đúng đường dẫn — cho JavaScript, JSONPath, jq, Python, PHP, n8n và Make.
• HTML & CSS sang Webflow — Dán HTML và CSS, nhấn Copy to Webflow rồi dán vào Designer.
• Tạo UTM — Thêm utm_source, utm_medium, utm_campaign và các tham số khác vào bất kỳ liên kết nào, xem lượt truy cập sẽ rơi vào kênh GA4 nào, và gắn thẻ cả danh sách URL cùng lúc.