Forms - Can I change color of Communication Consent Text?
SOLVE
I'm trying to find out where I can change the color of the Communicaiton Consent text that Hubspot provides in my Form. I'm able to change the main text to white (as it's appearing on a dark background within my Wordpress site), but the consent text is appearing in default black. Is it possible to change this to white like the rest of the text in my form?
if you mean the consent text, that's added by selecting one of those options
you should be able to change it with following CSS classes(put them into your WordPress styles.css file)
form .legal-consent-container .hs-richtext p,
form .legal-consent-container .input li.hs-form-booleancheckbox span{
color: #ff0000 /* Put the font color here */;
}
A few tipps:
If you're just copy-pasting the embed code from HubSpot to WordPress and you don't have enabled the "Set as raw HTML" option in the styles tab of the form HubSpot will provide the default styling which might overwrite your WordPress form styles. In order to exclude all form stylings from HubSpot you'll need to slightly modify the embed code by adding
This should disable the default HubSpot form styling beeing pushed to WordPress and overwriting some WordPress form styling.
Important: This might lead to the fact that you might need to add the HubSpot form classes to your existing WordPress styling. So test it on a non-public page first
You can try the "sledgehammer" method by putting !important to the WordPress CSS if nothing else works. Definetely not a best practise but sometimes it can do magic.
If you want to add it, the CSS should look like this:
form .legal-consent-container .hs-richtext p,
form .legal-consent-container .input li.hs-form-booleancheckbox span{
color: #ff0000 !important /* Put the font color here and delete this comment afterwards */ ;
}
Also - if you encounter problems a preview-link would be extremly benefitial.
depends on your theme setup, but it should be possible with a few lines of CSS.
Here's the default styling classes:
form .legal-consent-container,
form .legal-consent-container .hs-richtext{
font-size:1rem; {# 1rem equals 16px by default #}
color:#ff0000; {# Just a simple red color to indicate what's changed by those classes #}
}
form .legal-consent-container li.hs-form-booleancheckbox span{
{# this is used for the text next to the checkbox #}
font-size:1rem;
color:#00ff00;
}
Apr 17, 20242:22 AM - edited Apr 17, 20242:37 AM
Member
Forms - Can I change color of Communication Consent Text?
SOLVE
Thanks Anton. I tried the CSS methods in addtional css and the styles.css, but nothing changed. I even tried the "important" tag.
For the method to modify the embed code, how do I do this? I currently have a global footer which is pulling in the hubspot form (embed code) on all pages. But I'm not sure how to edit this?
I did find on my divi theme options to add in this code under the <head> section. I saved this and tried the css changes you recommended, but nothing changed!
Forms - Can I change color of Communication Consent Text?
SOLVE
Hey @GCarey1, thank you for posting in our Community!
You'll need to find the CSS class associated with the Communication Consent text. You can do this by inspecting the element using your web browser's developer tools. Right-click on the consent text, and select "Inspect" or "Inspect Element" depending on your browser. Look for a class or ID attribute that's unique to the consent text.