Form Checkbox Formatting | Community
Skip to main content
Justin_King
Justin_King
Level 2
October 10, 2018
Question

Form Checkbox Formatting

  • October 10, 2018
  • 1 reply
  • 3020 views

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

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

1 reply

SanfordWhiteman
SanfordWhiteman
Level 10
October 11, 2018

Link, please.

Always a link.

    Justin_King
    Justin_KingAuthor
    Level 2
    October 11, 2018

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

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

    SanfordWhiteman
    SanfordWhiteman
    Level 10
    October 11, 2018

    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%;
    }
    Terms & ConditionsAccessibility statement

    Loading footer...