Form Checkbox Formatting

[Justin_King]

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:

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

[SanfordWhiteman]

Link, please.

Always a link.

[Justin_King]

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

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

[SanfordWhiteman]

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