CMS Development

BossTek
Participant

Change background color of input fields on HubSpot Forms

Hello,

 

I am trying to change the background color of the input fields within my form. They are currently white, but I cannot seem to find specfically where I go within HubSpot to make changes to the styling/CSS. Has anyone been able to do accomplish this?

 

Any help/advice is greatly appreciated! Thanks!

0 Upvotes
6 Replies 6
Ntbrown
Contributor

Change background color of input fields on HubSpot Forms

@MediaMstr Your form is being rendered in an iframe. Entirely different scope. Your site stylesheets won't apply to content inside iframes. Adjust your forms to be rendered inline and apply whatever thematic changes are necessary.

MediaMstr
Participant

Change background color of input fields on HubSpot Forms

That didn't work.

0 Upvotes
ashleyidesign
Top Contributor | Partner
Top Contributor | Partner

Change background color of input fields on HubSpot Forms

Hey, if you can add a link to the page you're working on, I'll take a look.

0 Upvotes
BossTek
Participant

Change background color of input fields on HubSpot Forms

Hi Ashley,

 

Thank you for your response! After doing some digging, the css for the background-color of the input field is located within the class "hs-input" - however, I can't seem to located this on any of the stylesheets within my HubSpot account. 

 

Do you know where this is located? If I can find that, I can change the default background-color, which should update all forms I have created, correct?

 

The form I am currently using as an example can be found here: https://bosstek.com/become-a-dealer - it is the top of the two forms. The form below it was created using Formidable in WordPress.

 

Thanks!

0 Upvotes
ashleyidesign
Top Contributor | Partner
Top Contributor | Partner

Change background color of input fields on HubSpot Forms

Hey,

 

HubSpot forms have default styling, so in this case there isn't any CSS to change, but rather you need to add it to your stylesheet.

 

.hs-form-field input[type="text"], .hs-form-field input[type="email"], .hs-form-field input[type="phone"], .hs-form-field input[type="number"], .hs-form-field input[type="tel"], .hs-form-field input[type="date"], .hs-form-field textarea {
    color: #F4D1C9;
    background-color: #D95E42;
    border-color: #D34727;
    border-width: 1px;
    border-style: solid;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    border-radius: 2px;
    width: 100%;
    max-width: 100%;
    font-size: 14px;
    padding: 6px 10px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    font-weight: normal;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset;
}
JSeavey
Participant

Change background color of input fields on HubSpot Forms

The above css worked for me on the input boxes. Can you add the css to change the submit button?

0 Upvotes