CMS Development

petras
Colaborador(a)

Edit the color of the error messages of a form

resolver

Hello, I hope somebody can give me some advice. Can anybody tell me how I can edit the color of the error message of a form. Now hardly it can be detinguished from the general text. Can I do this by editing the CSS of the form only? Thanks so much. Best regards, Petra

1 Solução aceita
petras
Solução
Colaborador(a)

Edit the color of the error messages of a form

resolver

Thanks so much for your response. All the commands work except the color. I don´t know if I have some superior stylesheet which limits this. The code I have included in the CSS sheet. Thank you a lot and best regards,
Petraform2.PNGcode.PNG

Exibir solução no post original

0 Avaliação positiva
14 Respostas 14
Lasse-Eggen
Participante

Edit the color of the error messages of a form

resolver

When we embed a form into another website, the default HubSpot color for errors is a red-ish color, #f2545b.

 

This color on a white/light background is not conforming to the WCAG color-contrast guidelines.

Our customers' and our own view, and hopefully your view, is that it's in HubSpot's interest to conform to WCAG guidelines for the most likely background color.

 

It's the following global CSS that sets the color (as mentioned previously in this thread).

 

.hs-error-msgs label {
    color: #f2545b;
}

 

We are not interested in using HTML forms for embedding, just normal HubSpot forms from the form builder.

0 Avaliação positiva
deeanna
Participante

Edit the color of the error messages of a form

resolver

I also have this problem but maybe in a different situation. I use the HubSpot forms not with the HS CMS but with WordPress. My forms sit on a dark orange WordPress theme and no one can see the error messages because they are red. I am on Marketing Hub Starter and my understanding is that changing the stylesheet works only from Professional+

The theme is, of course, complicated and I have no idea how to change the style of the theme. I need a solution for styling the form itself so error message text is black.

0 Avaliação positiva
pr_designteam
Membro

Edit the color of the error messages of a form

resolver

I'm having this issue as well and none of the above solutions work. I really want to avoid custom coding a form because the rest of my team cannot code.

0 Avaliação positiva
Sellmx
Membro

Edit the color of the error messages of a form

resolver

Hi Petras,

 

Unless the theme has some custom classes overriding the error messages, it should be pretty easy to customize the color of the texts.

 

All you have to do is add some custom styles to the page header. Something like this should do the trick –

 

<style>
  .hs-form-field .hs-error-msgs { color: red; }
</style>

Here's a quick GIF of how to do that.

 

c8rMkc.gif

 

Hope this helps. If you have any more troubles fixing the styles, feel free to reach out to me at hi@sellmx.com and I can help you out, no charge!

0 Avaliação positiva
cyberlobe
Membro

Edit the color of the error messages of a form

resolver

Hello Friends, 

 

I tried above code and it's not working for me, can anyone help pls?

 

https://wardpeter.com/SD_New/contact-us

0 Avaliação positiva
TRooInbound
Conselheiro(a) de destaque

Edit the color of the error messages of a form

resolver

Hi @cyberlobe 

I show on your page,

try this code

.hs-error-msgs label {
    color: #f2545b !important;
}
MLiu8
Participante

Edit the color of the error messages of a form

resolver

i was looking for this answer for soo long. Thank you!!!

cyberlobe
Membro

Edit the color of the error messages of a form

resolver

I tried that its not working

0 Avaliação positiva
TRooInbound
Conselheiro(a) de destaque

Edit the color of the error messages of a form

resolver

Hi @petras

 

need to just add below CSS to some error list target class like,

ul.hs-error-msgs > li > label {
    font-size:12px;
    line-height:normal;
    display:block;
    color:red;
}

add this CSS Syntax in your CSS stylesheet.

 

Did my post help answer your query? Help the Community by marking it as a solution.

 

Team TRooInbound

0 Avaliação positiva
petras
Solução
Colaborador(a)

Edit the color of the error messages of a form

resolver

Thanks so much for your response. All the commands work except the color. I don´t know if I have some superior stylesheet which limits this. The code I have included in the CSS sheet. Thank you a lot and best regards,
Petraform2.PNGcode.PNG

0 Avaliação positiva
TRooInbound
Conselheiro(a) de destaque

Edit the color of the error messages of a form

resolver
ul.hs-error-msgs > li > label {
font-size:12px;
line-height:normal;
display:block;
color:red !important;
}

@petras
Replace code with above code

Did my post help answer your query? Help the Community by marking it as a solution.

Team TRooInbound

petras
Colaborador(a)

Edit the color of the error messages of a form

resolver

Thanks so much, your post did just exactly what it should do. Everything fine now. Have a nice day ahead. Petra

0 Avaliação positiva
TRooInbound
Conselheiro(a) de destaque

Edit the color of the error messages of a form

resolver

Hey @petras,

 

That's Cool! Cheers! 

 

Did my post help answer your query? Help the Community by marking it as a solution

 

Team TRooInbound

 

0 Avaliação positiva
Sellmx
Membro

Edit the color of the error messages of a form

resolver

You can try adding an "!important" tag to the property in case something is overriding it.

 

color: red !important;
0 Avaliação positiva