Asterisk Color in Form

Marketing & Content Hub Lead Capture Tools
1

Hello HS Community,

How can I change the asterisk red color to another color in HubSpot Forms, please?

My website is blue and having that * in red is not great for our branding.

Appreciate your help.

Thank you,

Bruna.

2

Are you embedding the form as RAW HTML so you have control via the CSS on your site? If not, I would recommend using that option and then using CSS on your page to change the * color.

3

Hi,

Thank you for your message!
How can I get the HTML of my form?
I tried but I couldn’t find a way.

4

When you edit a form, select the style & preview tab. Then choose set as Raw HTML. When you embed your form, the form will no longer get styling from Hubspot and you will be able to set CSS via your webpage.

5

Is there any other way around this? I want the styling from HubSpot but need to change the astrix colour…

6

Hi @Charlottenlb and a big warm welcome from the HubSpot Community! :orange_heart:
Great question, thanks for asking!
I’d like to share these resources that might help you:
- Understand the source of a page’s styling
- Create, edit, and attach CSS files to style your site
Now, let’s consult our Top Experts: Hi @Ben_M, @Anton and @Mike_Eastwood do you have other suggestions to help @Charlottenlb, please?
Thanks so much and have a wonderful day! :sun_with_face:
Bérangère

7

Hey @brunabg,

if you’re using a child-theme of a default or marketplace theme, or even a custom theme, you should be able to modify the CSS files.

In this case, open the theme in the Design-Manager, look for something like the theme-overrides.css and put following code at the bottom of it

{# custom required color #}
form .hs-form-required{
 color: #ff0000; {# replace this HEX code with your desired one #}
}

If you’re using a default or marketplace theme without a child-theme, go to Content/Pages in the HubSpot settings and put it into the Site Header HTML area.

If this shouldn’t work right away, try the sledgehammer method like this

{# custom required color #}
form .hs-form-required{
 color: #ff0000 !important; {# replace this HEX code with your desired one #}
}

best,

Anton

8

Thanks Bérangère. I tried @Anton’s instructions but it didn’t work… see below screenshots. Thanks!

Charlottenlb_0-1774267463330.png
Charlottenlb_0-1774267463330.png1307×616 106 KB

Charlottenlb_1-1774267473756.png
Charlottenlb_1-1774267473756.png635×620 18.9 KB

9

Hi @Charlottenlb and thanks for getting back to us!
Hi @Anton, @SteveHTM and @zach_threadint do you have other suggestions to help @Charlottenlb, please?
Have a lovely day and thanks so much for your help!
Bérangère

10

Hey @Charlottenlb,

thanks for the screenshots.

The code doesn’t work as there’s a few mistakes in the code.

Try this one:

{# custom required color #}
form .hs-form-required{
 color: #75cccd; {# replace this HEX code with your desired one #}
}

Explenation:

{# Lorem ipsum #}

are HubL comments. If they’re not written in this specific way, HubSpot will interpret everything as a comment and not apply the code.

Example of a not working comment:

Spoiler

{#this is a wrong #comment}.this-wont-work{color:#ff0000}{# still a comment #}

HubSpot will render: nothing → code won’t be applied

If you want to have a fail-safe way, just remove all the clients and just use:

form .hs-form-required{
 color: #75cccd;
}

best,

Anton