APIs & Integrations

jacjanowski
Member

Hubspot form styling not working?

SOLVE

I have randomly ran into an issue where the styling to my forms are not being applied. I have used 'Embedded Forms' on my pages and it's not styling the way I want it to. I did notice, however, that whenever I take out the required line {{standard_footer_includes}}, the sytling I created is applied, but I cannot publish changes when that required text is removed. I have tried using CSS to style, but it's not working in my favor. The form styles default to less wide form fields, as well as the original orange color for the button. Here are some screenshots to show what I mean.
 

WRONG STYLE:

jacjanowski_1-1669652551023.png

 

 

CORRECT STYLE:

jacjanowski_2-1669652575248.png

 

SCRIPT CODE for Form:

jacjanowski_0-1669652794153.png

 

0 Upvotes
1 Accepted solution
BarryGrennan
Solution
Top Contributor

Hubspot form styling not working?

SOLVE

The way you're including your form (via javascript) inserts the form via iframe if memory serves. To bypass this on the individual form itself, under Style and Preview, you need to toggle Set as Raw HTML on.

 

Alternatively if the page is built on hubspot, use the form module and form event listeners for the styling you're doing on form submit.

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

View solution in original post

0 Upvotes
1 Reply 1
BarryGrennan
Solution
Top Contributor

Hubspot form styling not working?

SOLVE

The way you're including your form (via javascript) inserts the form via iframe if memory serves. To bypass this on the individual form itself, under Style and Preview, you need to toggle Set as Raw HTML on.

 

Alternatively if the page is built on hubspot, use the form module and form event listeners for the styling you're doing on form submit.

 


profile2022aBarry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

 

 

0 Upvotes