Skip to main content
Tom_Kerlin2
Level 7
May 19, 2017 1:49 PM UTC
Solved

Visibility Rules limitations when using Checkboxes field type

Hello,

We have a registration form that contains a field with 'Checkboxes' field type listing 30+ product categories (screenshot is below). However, each product category contains 4+ specific product modules that the user might choose from. It would be nice if a subset of checkboxes appeared underneath each product category checkbox when checked off, but I'm not sure if this is possible without using custom code? Another option would be to add visibility rules to field underneath and define the logic, but with 30+ product categories and multiple checkboxes to select from, I'm finding that visibility rules was not designed to handle this level of complexity.

If you have any suggestions on how to build or any feedback please share.

Thanks,

Tom

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    SanfordWhiteman
    SanfordWhitemanAccepted solution
    User Group Leader
    May 21, 2017 6:00 AM UTC

    Tom, that's gotta be the most redacted screenshot I've ever seen!  Did it come via a FOIA request?

    Anyway, what you seem to be talking about is a "checkbox tree," "checkbox subgroup" or some other kind of combo widget, which in fairness isn't a standard HTML input type. You can get amazingly close to the behavior with just CSS, though, then add a little JS to fill in the gaps, like so: MktoForms2 :: Boxgroups

    Prepare the form like this:

    View in thread

    5 replies

    SanfordWhiteman
    User Group Leader
    SanfordWhitemanUser Group LeaderAccepted solution
    User Group Leader
    May 21, 2017 6:00 AM UTC

    Tom, that's gotta be the most redacted screenshot I've ever seen!  Did it come via a FOIA request?

    Anyway, what you seem to be talking about is a "checkbox tree," "checkbox subgroup" or some other kind of combo widget, which in fairness isn't a standard HTML input type. You can get amazingly close to the behavior with just CSS, though, then add a little JS to fill in the gaps, like so: MktoForms2 :: Boxgroups

    Prepare the form like this:

    Translate
      Tom_Kerlin2Author
      Level 7
      May 22, 2017 5:14 PM UTC

      This is great - Thanks Sanford! (I was trying to be discreet with this form since I already requested help on it in another thread. )

      Below is a summary of steps I took, can you review and let me know if I missed something?

      I added all CSS (starting with .mktoForm INPUT...) and created a snippet for the JS (swapping out the instanceURL, munchkinId and formId values), and then I dropped the snippet onto the landing page.

      Also, I was using the following code (screenshot below) to break this long list of checkboxes into (3) columns, but when I added the subgroups and tested I noticed that the subgroups were each being pushed to the next column (to the right) instead of directly underneath product category in same column. Is there a quick way to fix without losing additional columns?

      Translate
      Tom Kerlin
      SanfordWhiteman
      User Group Leader
      SanfordWhitemanUser Group Leader
      User Group Leader
      May 22, 2017 6:57 PM UTC

      I'd need to see your full CSS to see how to integrate the two. It surely is float-related.

      Also, that way of column-izing seems kind of fragile. I would tend toward something like nth-of-type(3n+1).

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...