CRM

GCarey1
Member

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?

0 Upvotes
1 Accepted solution
GCarey1
Solution
Member

Forms - Can I change color of Communication Consent Text?

SOLVE

I ended up putting text and checkboxes in manually so that I could change the colours of the fonts

View solution in original post

0 Upvotes
9 Replies 9
Anton
Thought Leader | Partner
Thought Leader | Partner

Forms - Can I change color of Communication Consent Text?

SOLVE

Hi @GCarey1

if you mean the consent text, that's added by selecting one of those options

Bildschirmfoto 2024-04-16 um 23.32.33.png

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

 

css: ""

 

to it so it looks like this

 

<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/embed/v2.js"></script>
<script>
  hbspt.forms.create({
    region: "na1",
    portalId: "XXXXX",
    formId: "XXXX-XXXX-XXXX-XXXX",
    css: ""
  });
</script>

 

 

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. 

 

 

best, 

Anton

 

Anton Bujanowski Signature
BMeyer05
Participant

Forms - Can I change color of Communication Consent Text?

SOLVE

What about simply changing this for hubspot landing pages and not wordpress CSS? 

0 Upvotes
Anton
Thought Leader | Partner
Thought Leader | Partner

Forms - Can I change color of Communication Consent Text?

SOLVE

Hey @BMeyer05

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;
}

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes
GCarey1
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!

GCarey1_1-1713335824263.png

 

 

0 Upvotes
Anton
Thought Leader | Partner
Thought Leader | Partner

Forms - Can I change color of Communication Consent Text?

SOLVE

Hi @GCarey1

it seems that you've forgotten the "," after the formId.

 

Also putting this code in the divi theme settings will add the code to all pages. 

I'd suggest you you to create a global footer in the Theme-builder function of Divi.


Also - I'd suggest to put the form embed code into a simple text-element. But switch it to the "text" view before pasting the code into it. 

Bildschirmfoto 2024-04-17 um 13.26.32.png

 

best, 

Anton

Anton Bujanowski Signature
0 Upvotes
GCarey1
Solution
Member

Forms - Can I change color of Communication Consent Text?

SOLVE

I ended up putting text and checkboxes in manually so that I could change the colours of the fonts

0 Upvotes
GCarey1
Member

Forms - Can I change color of Communication Consent Text?

SOLVE

Hi Anton, I forgot to update the screenshot, but I added in the missing comma. It didn't make any difference. 

 

Is there any issue with having this <head> code on all the pages? Where should I put it?


As per your suggestion, I already had this form set up in the Global Footer, using the embed code in a text field. 

 

This is the website I'm working on and as you can see in the global footer section, the consent text is in black but the other text is in white.


https://www.integrityiq.io/

0 Upvotes
PamCotton
Community Manager
Community Manager

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.

 

To our top experts @Anton, @HubSpot_Corey do you have any recommendations for @GCarey1 matter?

 

Thank you,

 

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 !




GCarey1
Member

Forms - Can I change color of Communication Consent Text?

SOLVE

I did this and identified "hs-richtext" as the class associated with the text, but nothing changed when I applied font css to it in my code.

0 Upvotes