topic Re: Change form input color in Lead Capture Tools

Change form input color

fupfac — Tue, 10 Mar 2020 05:39:27 GMT

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

I added a class dark_form on the hubspot form
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>

Re: Change form input color

ConnorSlivensky — Tue, 10 Mar 2020 13:45:46 GMT

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.

Re: Change form input color

fupfac — Tue, 10 Mar 2020 15:03:34 GMT

Hello,

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

Re: Change form input color

mike-ward — Tue, 10 Mar 2020 18:02:25 GMT

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

Re: Change form input color

fupfac — Wed, 11 Mar 2020 13:08:40 GMT

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

Tks anyway

Re: Change form input color

mike-ward — Thu, 12 Mar 2020 19:52:53 GMT

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

Re: Change form input color

MediaMstr — Wed, 03 Mar 2021 20:46:31 GMT

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.

Re: Change form input color

neillebo — Fri, 05 Mar 2021 06:48:04 GMT

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

Re: Change form input color

PamCotton — Fri, 05 Mar 2021 19:29:35 GMT

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