3 Replies Latest reply on Oct 10, 2018 6:51 PM by Sanford Whiteman

    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!



        • Re: Form Checkbox Formatting
          Sanford Whiteman

          Link, please.


          Always a link.

            • Re: Form Checkbox Formatting
              Justin King

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



                • Re: Form Checkbox Formatting
                  Sanford Whiteman

                  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:




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