Targeting a form field with a CSS declaration

SOLVE
JEG
Member

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"

0 Upvotes
1 Accepted solution

Accepted Solutions
TRooInbound
Solution
Key Advisor

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

safasf.PNG

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

View solution in original post

0 Upvotes
3 Replies 3
TRooInbound
Solution
Key Advisor

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

safasf.PNG

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

View solution in original post

0 Upvotes
JEG
Member

Thank you

Jenr
Participant

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

 

Thanks

0 Upvotes