CMS Development

AJCourt
メンバー

Using custom CSS

解決

Hi all,

 

New to HubSpot and I'm trying to style my first form with CSS local to my site.  I have 2 simple field forms - email address and submit button.

 

How do I find these using JQuery and change classes to style them?

I'm using bootstrap 5 on my web site.

Thanks

Andrew

 

0 いいね!
1件の承認済みベストアンサー
alyssamwilie
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Using custom CSS

解決

You don't need to use jQuery. In the form editor go to the "Style & preview" tab and toggle on "Set as raw HTML form". This will remove any HubSpot styling and allow you to style them purely with CSS in your stylesheet. Here's an example stylesheet for styling HubSpot forms so you can see some of the classes used - https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css

 

Also, HubSpot uses just regular ol form elements so once set to raw HTML it'll take on any styling you already have set for form elements (as long as you're styling the elements themselves and not using custom classes instead).

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.

元の投稿で解決策を見る

1件の返信
alyssamwilie
解決策
名誉エキスパート | Elite Partner
名誉エキスパート | Elite Partner

Using custom CSS

解決

You don't need to use jQuery. In the form editor go to the "Style & preview" tab and toggle on "Set as raw HTML form". This will remove any HubSpot styling and allow you to style them purely with CSS in your stylesheet. Here's an example stylesheet for styling HubSpot forms so you can see some of the classes used - https://github.com/HubSpot/cms-theme-boilerplate/blob/main/src/css/elements/_forms.css

 

Also, HubSpot uses just regular ol form elements so once set to raw HTML it'll take on any styling you already have set for form elements (as long as you're styling the elements themselves and not using custom classes instead).

If this answer solved your question, please mark it as the solution.

Alyssa Wilie Profile Image

Alyssa Wilie

Web Developerat Lynton

Learn HubL | Get Marketing Insights

HubSpot Elite Solutions Partner
Lynton's HubSpot theme Rubric now available. Click to download.