Targeting a form field with a CSS declaration

[JEG]

As part of looming GDPR, we have to record the Consent Statement the visitors have given consent to. I want to pre-populate a form field with the statement and record the field within the contact property list.
However, the statement is not pleasing to the eye 🙂

So I want to be able to change just GDPR Statement field CSS styling with {height: 80px; background: #ff42ce;}.
Apparently, I can target the selector, ".hbspt-forms-0.0:$8.$gdpr_statement.$gdpr_statement" and then apply a CSS declaration, but I can't get it to work!

What would be the exact CSS declaration and where would I put it?
In the 'Page Settings - Edit Head HTML', 'Template - Custom Inline Styling', or the 'style.css'?

Can anyone help please?

Form details:
Label=GDPR Statement1
name="gdpr_statement"
data-reactid=".hbspt-forms-1.0:$8.$gdpr_statement.0"

[TRooInbound · Accepted solution]

Hi @JEG,

As per I understand about your query, you looking for CSS Style targets for a label, input field, and other things.

CSS targets for form fields,

1) Label: 

.hs_firstname > label  {height: 80px; background: #ff42ce;}

you have to replace your GDPR Statement field class with 'hs_firstname' or you are unable to find this from inspecting element of the browser share page URL and I will give you direct CSS code.

2)  Target with a name attribute,

[name = "gdpr_statement"] { 
    height: 80px; background: #ff42ce; 
}

for putting CSS,

we prefer to add this in style.css but you can add this to your flexibility  

Adding CSS to Edit Head HTML you have to write CSS in <style> tag.

<style>
[name = "gdpr_statement"] { 
    height: 80px; background: #ff42ce; 
}
</style>

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

Team TRooInbound

[JEG]

Thank you

[Jenr]

Hi @JEG is there any chance you could share the end result of adding the GDPR css?

Thanks