PLEASE NOTE: These forums are no longer utilized and are provided as an archive for informational purposes only. All support issues will be handled via email using our support ticket system. For more detailed information on this change, please see this blog post.

Two Column Forms with Conditional Logic

  1. How can I have a two column form with conditional logic?

    I tried setting up a form using the gf_right/left_half CSS ready class but when I hit a option on the pickup general location dropdown menu, new options appear (conditional logic) but the right half of the form seems to move down with the new options.

    There are some extra styles due to my theme stylesheet but even without them, the same thing seems to be happening. (Tested with FireBug)

    Here is the link to my form:
    http://throughwayconsulting.com/clients/woodhaven/?page_id=701

    Any help is greatly appreciated.

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink
  2. This isn't a bug, but more of a limitation of what you can do with the Ready Styles. The styles are simply that, just helper CSS rules and there's no special logic applied based on whether the preceding or following fields are visible or not. When you're using conditional logic to show/hide fields, you may run into spacing or alignment issues depending on what's being shown or hidden at the moment.

    Stepping back for a second, your first problem is the left padding on the list items in the form structure. That's coming from your theme. You should be able to add this to your theme stylesheet to override it.

    [css]
    #intro .gform_wrapper ul li,
    #content .gform_wrapper ul li,
    #footer .gform_wrapper ul li,
    #features .gform_wrapper ul li,
    #homerightcolumn .gform_wrapper ul li,
    .sidebarwidget .gform_wrapper ul li {
        background: none!important;
        padding-left: 0!important;
    }

    As far as the 2 column structure with the conditional logic, I would suggest using some strategically placed HTML blocks to introduce some new markup/divs into the form as column container elements and then floating the new "columns" into place. With these as containers, you can drop the ready classes on those fields and they'll align normally within the new column.

    You can find out more about what I'm talking about along with some examples on this previous thread. The member was trying to create a 5 column form, but the concept would still be the same for your application.

    http://www.gravityhelp.com/forums/topic/how-can-i-get-the-form-fieldsboxes-side-by-side#post-29423

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink
  3. Thanks, worked great.

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink
  4. Wonderful. That's what I like to hear. Thanks for the update.

    Posted 12 years ago on Wednesday August 17, 2011 | Permalink

This topic has been resolved and has been closed to new replies.