Form Checkbox Formatting

Highlighted
Level 1

Form Checkbox Formatting

I think that title is appropriate?  Please let me know if I need to redirect this topic.

Since implementing GDPR, like everyone we've been having issues with our forms.  We have one particular issue that is not going away:

pastedImage_0.pngpastedImage_1.png

For some reason, we can't seem to get the first line to stretch across both columns of the form.  I'm not a CSS guy but know some HTML.

I know it's some ridiculously easy setting or variable, isn't it?  Any and all help is appreciated!!!

Thank you!

Justin

3 REPLIES 3
Highlighted
Level 10 - Community Moderator

Re: Form Checkbox Formatting

Link, please.

Always a link.

Highlighted
Level 1

Re: Form Checkbox Formatting

lol...sorry Sanford, I'll definitely remember next time. 

https://landing.quantum.com/VMWorldEurope2018.html

Highlighted
Level 10 - Community Moderator

Re: Form Checkbox Formatting

Whoever styled this form was waaay too specific.

When you see a rule like this, it's a bad sign:

.short-form .mktoForm .mktoFormRow:nth-child(6) .mktoFormCol[style],

.long-form .mktoForm .mktoFormRow:nth-child(7) .mktoFormCol[style],

.long-form .mktoForm .mktoFormRow:nth-child(8) .mktoFormCol[style],

.long-form .mktoForm .mktoFormRow:nth-child(9) .mktoFormCol[style] {

    width: 100%;

}

It's these rules that allow one of the rows to span (because it's the 7th child of its parent) while the other one keeps the width of 48%.

But that isn't the way this should be done.

Instead include the form wrappers script in the page:

https://cdpn-dl.figureone.com/figureone/pen/370e63a9c4ed57188eea8e9e330d8e04.js

(download the file from there and re-host it on your server, don't try to hotlink to it)

Then you can target the rows in a sane, self-explanatory way:

.mktoFormRow[data-wrapper-for="privacyPolicy"] > .mktoFormCol,

.mktoFormRow[data-wrapper-for="GDPR_Consent_v2__c"] > .mktoFormCol {

    width: 100%;

}