Forms - checbox and text showing on different lines

[PKirova]

Hi,

I have created a Hubspot form with consent checkbox, it is in a popup CTA. However, for some reason, the checkbox and the consent text show one below the other. How can I make them on the same line?

This is the page: https://hs.scaleflex.com/nrf2023-raffle

The form opens when you click "Join the Raffle".

[PKirova]

@Jasbir_Kaur - I added it to the page css but it looks like the form doesn't recognize it. I can't figure out how to edit the popup CTA css (it was created in Hubspot) and add your suggestion.

[Jasbir_Kaur]

Hi @PKirova,

I am not able to see the suggested CSS on the page, basically you have to target the label of this checkbox and use display- inline-flex css there and it will be working fine.

For any other suggestion our experts at Grazitti can help and you can DM me or reach out us at Contact Us for Complete IT Solution | Grazitti Interactive

[Jasbir_Kaur]

Hi @PKirova 

Please use this CSS - 

span.hs-form__field__checkbox__label-span {
margin-left: 10px !important;
}
label#LEGAL_CONSENT\.subscription_type_143579687-label-1 {
display: inline-flex;
width: 100%;
}

Hope this works for you.

Thanks!

Jasbir

[NeerajTrikha]

Is this how it is also showing in Preview window on left? or shows gap of a line?

[PKirova]

It doesn't show a gap line. In preview of the form, it is showing correctly. But on the live page - not. The form is within a "Pop-up CTA". 

[NeerajTrikha]

In that case, Could you check this Form on another test page? It looks like field is incorrectly set. Try setting new field. 

[PKirova]

Already tried with a new checkbox field, same issue. I need to use it on this page within the popup CTA as the current setup. 

[NeerajTrikha]

Hi @PKirova ,

It seems there an extra Row inserted which is why they are showing in different rows. Try if removing it and check if this helps.

Regards,

Neeraj Trikha

[PKirova]

This is the consent checkbox. It doesn't show in the form to have an extra row, and there is no option to remove it. See below screenshot.