topic Re: Forms - checbox and text showing on different lines in Lead Capture Tools

Forms - checbox and text showing on different lines

PKirova — Thu, 01 Dec 2022 14:26:45 GMT

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".

Re: Forms - checbox and text showing on different lines

NeerajTrikha — Thu, 01 Dec 2022 09:40:40 GMT

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

Re: Forms - checbox and text showing on different lines

PKirova — Thu, 01 Dec 2022 10:07:32 GMT

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.

Re: Forms - checbox and text showing on different lines

NeerajTrikha — Thu, 01 Dec 2022 10:53:56 GMT

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

Re: Forms - checbox and text showing on different lines

PKirova — Thu, 01 Dec 2022 11:01:09 GMT

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".

Re: Forms - checbox and text showing on different lines

Jasbir_Kaur — Thu, 01 Dec 2022 11:02:53 GMT

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

Re: Forms - checbox and text showing on different lines

NeerajTrikha — Thu, 01 Dec 2022 11:54:50 GMT

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

Re: Forms - checbox and text showing on different lines

PKirova — Thu, 01 Dec 2022 12:18:50 GMT

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.

Re: Forms - checbox and text showing on different lines

PKirova — Fri, 02 Dec 2022 11:37:14 GMT

@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.

Re: Forms - checbox and text showing on different lines

Jasbir_Kaur — Mon, 05 Dec 2022 06:31:56 GMT

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