Change form input color

[fupfac]

Hello

I would like to change the color inside the form field.  When someone types inside the fields the input should be in white. 

easyweddinggeorgia.com

1. I added a class dark_form on the hubspot form
2. I added the color in my custom.css file on my website

What is missing to change the input values in white (so people can see, but only on this form)

I tried to do it, following this article https://designers.hubspot.com/docs/cms/hubspot-form-markup

custom.css code (inside webiste)

.hbspt-form .form_dark input {
	color:white
}

Form code

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "XXX",
	formId: "XXX",
    cssClass: "form_dark" 
});
</script>

[mike-ward · Accepted solution]

Hi @fupfac 

The problem is that your class (form-dark) is not being added onto the form itself. If you inspect the element on your page in Chrome (right-click on the form, Inspect) and find the <form ...> element. You'll see a list of classes there and form-dark is not included.

Your form is being embedded as an iframe which means you can't add custom CSS to your site that can reach inside that iframe to target it, as such the JS is just ignoring your added classes. You either have to:

a) Style it within the Form options within HubSpot, and if that doesn't give you enough flexibility (which it sounds like it doesn't in your use case) then,

b) Click the Set as Raw HTML Form checkbox, which will stop the form rendering inside an iframe and let you style the whole thing with your on-site CSS.

Option b) might not be available to you however; refer to the Form Embed docs -- it's only available on Professional and above (or some legacy basic accounts, which I guess you don't have).

What tier of HubSpot Marketing do you have? What kind of customization options do you have within the form within HubSpot?

Thanks,

Mike

[neillebo]

 I have the same issue. How did you get it to white?

[PamCotton]

Hello @neillebo  it is not currently possible to change the form input color within HubSpot.

I was able to find this idea here: Form Input Text Color. However, you can add custom code to your CSS of the page that the form is setting on to implement a color change.

Or change the color options for the buttons within the forms page.

I hope this information helps.

Pam

[MediaMstr]

You would think that setting something as simple as the background color of your form fields would be on the styles tab, but nooo!

Hubspot's design tools leave a LOT to be desired.

[ConnorSlivensky]

So this is an embeded HubSpot form that you added css to? You shouldn't have to mess with the provided embed code. (but if you do it's JS not HTML) In the form creator tool there is a style tab (Style and Preview and then second tab on left side) that can control things such as text feild display and font color. I would try to set your options there and then replace your embed code with the new one and see if that does it. 

[fupfac]

Hello, 

yes the one you mention does not control this specific field I'm mentioning. I need the solution using css

[mike-ward · Accepted solution]

Hi @fupfac 

The problem is that your class (form-dark) is not being added onto the form itself. If you inspect the element on your page in Chrome (right-click on the form, Inspect) and find the <form ...> element. You'll see a list of classes there and form-dark is not included.

Your form is being embedded as an iframe which means you can't add custom CSS to your site that can reach inside that iframe to target it, as such the JS is just ignoring your added classes. You either have to:

a) Style it within the Form options within HubSpot, and if that doesn't give you enough flexibility (which it sounds like it doesn't in your use case) then,

b) Click the Set as Raw HTML Form checkbox, which will stop the form rendering inside an iframe and let you style the whole thing with your on-site CSS.

Option b) might not be available to you however; refer to the Form Embed docs -- it's only available on Professional and above (or some legacy basic accounts, which I guess you don't have).

What tier of HubSpot Marketing do you have? What kind of customization options do you have within the form within HubSpot?

Thanks,

Mike

[fupfac · Accepted solution]

Ok it is not exactly what i need. For now I change the buttons styles so people can see the form properly. 

Tks anyway

[mike-ward]

Yep, as you've done is the easiest - styling the form fields with a white background. It still looks good on your site I think