CMS Development

seth4logicbay
Member

Need help formatting GDPR text at bottom of forms

SOLVE

Any ideas on how to make my font size smaller and/or making other stylistic changes to the GDPR language used in forms? Here is an example page view:

https://www.logicbay.com/the-roi-of-partner-relationship-management-0?hs_preview=QWsjScgn-5957151985

 

Thanks!

Seth

0 Upvotes
1 Accepted solution
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Need help formatting GDPR text at bottom of forms

SOLVE

@seth4logicbay - 

You could add the CSS rules to your css file. 

for the main text in the GDPR section, you would add styles to this block

.legal-consent-container p {
    font-size:25px;
    /* more styles go here */
}

and to adjust the checkbox labels, you could use the following CSS block

.legal-consent-container label {
    font-size:25px;
    /* more styles go here */
}

If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

View solution in original post

10 Replies 10
dreweastmead
Participant

Need help formatting GDPR text at bottom of forms

SOLVE

Doesn't work:

 

.legal-consent-container {
    line-height: 10px !important;
}

.hs-richtext {
    line-height: 10px !important;
}

 

 

 

Tried the above and about 20 different combinations of everything suggested on these 3 Hubspot threads:

... and nothing works. I just want to reduce the line height. Anyone have any new ideas? I feel like customization of forms has been a challenge for years. Even simple stuff like this. 🙄

0 Upvotes
tjoyce
Solution
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Need help formatting GDPR text at bottom of forms

SOLVE

@seth4logicbay - 

You could add the CSS rules to your css file. 

for the main text in the GDPR section, you would add styles to this block

.legal-consent-container p {
    font-size:25px;
    /* more styles go here */
}

and to adjust the checkbox labels, you could use the following CSS block

.legal-consent-container label {
    font-size:25px;
    /* more styles go here */
}

If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

kleblanc
Participant

Need help formatting GDPR text at bottom of forms

SOLVE

So I got the container P to change text size but I can't get the label to change size. I used the code you gave but it doesn't work? Any thoughts?

Brandsensations
Contributor | Platinum Partner
Contributor | Platinum Partner

Need help formatting GDPR text at bottom of forms

SOLVE

@kleblanc 

Here's how I solved it for our forms:

https://www.brandsensations.com/ist-meine-website-geeignet-fuer-inbound-marketing

Hope it helps.

 

.legal-consent-container p {
    font-size:13px;
}
.legal-consent-container {
    font-size:13px;
}
.legal-consent-container ul {
    line-height: 13px;
}
.legal-consent-container .hs_cos_wrapper_type_form ul.inputs-list li label {
    font-size:13px!important;
}
.legal-consent-container .hs-form-booleancheckbox-display {
  font-size:13px!important;
}
evelliQM
Participant

Need help formatting GDPR text at bottom of forms

SOLVE

Hi, 

 

I added the legal-consent-container styling from Brandsensations as a stylesheet to all my landing pages, and it worked for the process consent text, but not the consent to communicate checkbox label or the privacy text. 

 

I'm not very familiar with CSS, but are there other classes I can use to style the checkbox label and privacy text? 

 

Here is the page I'm testing it on:

 

https://go.quantummetric.com/fullstory-0?hs_preview=tGFBEgsk-18072011301

 

Thanks!

 

EDIT: It looks like this is only an issue with this landing page template, because it works for another one I'm testing on: https://go.quantummetric.com/blackfriday-ebook-1?hs_preview=SRXBNLpD-18073298858

 

I assume this means there is something else overriding it within the first landing page?

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Need help formatting GDPR text at bottom of forms

SOLVE

@evelliQM - Can you change the order of the CSS files?

Put the Legal_Consent_Formatting.css last in the list... right now it's first

0 Upvotes
evelliQM
Participant

Need help formatting GDPR text at bottom of forms

SOLVE

Hey @tjoyce unfortunately that didn't fix it, but thank you for the suggestion. I think it's something else within one of the other stylesheets, or perhaps a setting within the LP template? 

 

Screen Shot 2019-10-14 at 1.24.48 PM.png

0 Upvotes
tjoyce
Recognized Expert | Elite Partner
Recognized Expert | Elite Partner

Need help formatting GDPR text at bottom of forms

SOLVE

To anyone else that finds themselves trying to style GDPR toggles in their forms, I created a module that will convert them to switches. 

https://designers.hubspot.com/code-gallery/entry/founders/tim-belch-material-gdpr-switches?hsLang=en

DEMO: https://offers.belch.io/gdpr-material-switches-hubspot-cms-code-gallery

 

All you have to do is create a custom module and place the necessary code from the code gallery and it will find any form in the template / page and convert the checkboxes to toggles. The module itself does not contain the form, which keeps it dynamic and just an embeddable module that can exist in the template and just wait for a form to be added. It will ignore pages that don't have forms as well.

 

You can checkout other modules related to forms like better checkboxes, radio buttons and inputs

https://designers.hubspot.com/code-gallery/contributor/founders/tim-belch?hsLang=en

 


If this answer helped, please, mark as solved 😄


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

tette_engage
Top Contributor

Need help formatting GDPR text at bottom of forms

SOLVE

@tjoyce I have a minor problem with these GDPR texts, especially in our pop-up forms. I've tried the codes above, as well as .legal-consent-container .hs-richtext and some other tests, but the texts behave differently. Right now, my Process Consent Text (which is the 2nd text) for some reason has a different styling than the communications consent before, and the privacy text after.

 

Bonus question: if I would like to style every text and label separately, how would I do that? Is it possible at all? I tried :nth-child(2) etc but that didn't seem to do anything

 

The contact us pop-up form I'm working on can be found in the footer of any page at www.prometheusone.io

0 Upvotes
tette_engage
Top Contributor

Need help formatting GDPR text at bottom of forms

SOLVE

Okay, I got the Consent text to behave by going to edit the form itself, and there clearing the formating of consent text. Don't know why that worked, since there are no options to format the text there (other than Bold, Italic etc) at all.

 

But still, is there a way to target individual texts and labels?

0 Upvotes