Change form input color

SOLVE
fupfac
Participant

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>
CSS
0 Upvotes
2 Accepted solutions

Accepted Solutions
mike-ward
Solution
Key Advisor

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

View solution in original post

fupfac
Solution
Participant

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

Tks anyway

View solution in original post

0 Upvotes
8 Replies 8
Huble_Connor
Key Advisor | Elite Partner

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. 

0 Upvotes
fupfac
Participant

Hello, 

 

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

0 Upvotes
mike-ward
Solution
Key Advisor

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

View solution in original post

fupfac
Solution
Participant

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

Tks anyway

View solution in original post

0 Upvotes
mike-ward
Key Advisor

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 Smiley Very Happy

 

0 Upvotes
MediaMstr
Participant

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.

neillebo
Member

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

0 Upvotes
PamCotton
Community Manager

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

 

Você sabia que a Comunidade está disponível em outros idiomas?
Participe de conversas regionais, alterando suas configurações de idioma !


Did you know that the Community is available in other languages?
Join regional conversations by changing your language settings !


0 Upvotes