GDPR texts are quite long and annoying, so how can I have an arrow/button/something which toggles the gdpr text, but so that the checkboxes and their ‘titles’ remain? e.g. there would be a short line of text ‘Click here to show the GDPR text’ with a small arrow in the end, which transforms into the gdpr textbox when clicked on.
I found in another post how to target these textboxes with css, but I guess this requires a little js as well.
@tette_engage - link us to a preview of your form please
Here:
One form is after the pricing, another is in a popup (very functioning and very cool, wonder where I got it from.. 
) form way down in the black subscribe box.
I noticed another peculiar thing. When I add the popup form’s custom html to this ‘home’ page, it makes my header or footer behave weirdly. If I drag it before the Hero Banner module, my footer gets upset and jumps on top of everything. If I drag it one step upwards, so its right beneath the header, then my header disappears (but footer acts normally). I’ll include a screenshot for clarification (this lay-out disturbs my footer):
@tette_engage - oh man, that popup looks sweet 
okay, so this was a fun challenge. Here’s a plunkr showing the functionality
basically add an onFormSubmit callback to the form and then drop the css into your page.
<script>
hbspt.forms.create({
target: ".Belch-86JoF0tRiAFjTpzyqu47",
portalId: "4590271",
formId: "efd2ec61-5a5e-4075-9ed1-421445261989",
onFormReady: function($form){
$form.find('.legal-consent-container .hs-richtext').each(function(){
$(this).addClass('collapse').attr('tabindex', '1')
});
}
});
</script>
<style>
.collapse{
position:relative;
box-sizing:border-box;
font-size:16px;
line-height:1.4;
height:1.4em;
max-height:1.4em;
transition:max-height 1s ease-in-out;
overflow:hidden;
}
.collapse:before{
content:'Click to Expand';
position:relative;
display:inline-block;
box-sizing:border-box;
font-size:calc(1em - 2px);
padding:0 10px;
border:1px solid #000;
margin-left:10px;
float: right;
}
.collapse:focus{
height:auto;
max-height:400px;
}
.collapse:focus:before{
display:none;
}
</style>
Can you please create a new question for that second question you asked? Just trying to keep the forums a little more concise.
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.
Could you elaborate a little? I can handle the css, but i can’t figure out the onFormSubmit / js 
and sure, i’ll make another ticket with problem #2
sure, this one is a little tricky. in your embed code, insert the code below after the css:“” - see screenshot (the preceeding comma in the code below, be sure to copy that too, it looks like a mistake, but it’s not :D)
,onFormReady: function($form){$form.find('.legal-consent-container .hs-richtext').each(function(){$(this).addClass('collapse').attr('tabindex', '1')});}
That did the trick! Now where would I put the code in a regular form-module?
