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.

True "Multiple" Choice

  1. Cheryl
    Member

    I have a client who is requesting, as part of a request form, a list within a scrolling box. Within that box, the person submitting the request needs to be able to select multiple items by holding down their Ctrl key while making selections. I purchased Gravity Forms today because I saw the "Multiple Choice" as a default field, but does not have the functionality I was hoping for. And I cannot do checkboxes as the list of items numbers over 100. Here is an example of a form that has what I am looking for... http://georgino.com/literature.html
    Is this doable in Gravity Forms? If so, how? And if not, how do I go about getting a refund?

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  2. Multiple Choice are radio buttons. The term Multiple Choices comes from the testing world where a Multiple Choice Test or Quiz consists of multiple answers with only one correct answer and you pick the one that is correct.

    What you are referring to is called a multiple-select field and it is a variation of the Select field that has multi-select enabled.

    Gravity Forms does not support a multi-select Select field because of the fact the average internet user does not understand they can select multiple items holding down the control button while making multiple selections and the fact that it is poor UI because if they have select multiple and then click on another without holding down CTRL it clears our all their other choices. It's a terrible UI for a field and is why we have chosen not to introduce it.

    However, there is no reason why you can't use a checkbox field. There are a few different things you could do as far as your checkbox field goes to make it more user friendly if you have a large number of checkbox items.

    Using CSS you can make the checkbox items display horizontally instead of vertically, saving some space. You can also use CSS and make the container the checkboxes are in act as a scrollable div... which in effect will make it similar to the multi-select field you described only much more user friendly as it would use checkboxes rather than CTRL-click actions.

    The link you provided didn't work, returned a page could not be found error.

    But what you want to do can be done using the checkbox field and some minor custom CSS to make it more user friendly with that many checkboxes.

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  3. Cheryl
    Member

    Thanks for your quick reply! And I agree that the multi-select box is not the best option, but it IS what the client requested. So I am going to build the list using checkboxes as you suggest and see how the client reacts.

    Ok, so here is where I am currently... using checkboxes and gf_2col CSS class to make it a 2-column list. Is there a class already built within the CSS that will give me a scrollable container? If so, I cannot find it. If not, I will have to do some research as I am not adept at writing CSS... that is why I bought your software!! :)

    Posted 13 years ago on Thursday February 24, 2011 | Permalink
  4. The Ready Classes that are helper CSS classes are only available in Gravity Forms v1.5 which is currently a development release so be sure that you are running that development release before using them. The development release is available on the Downloads page.

    The Ready Class documentation can be found here:

    http://www.gravityhelp.com/documentation/css-ready-classes/

    There is a ready class for scrolling text called gf_scroll_text but it was designed primarily for section breaks for displaying text content and isn't going to work in this situation so it will require a little bit of custom CSS.

    Here is a quick example to get you started.

    Add this CSS to your themes stylesheet:

    .field_scroll .ginput_container {width: 500px!important;; height: 200px!important;; overflow: auto!important;}

    Then apply this custom class to your checkbox field by editing your checkbox field and going to the Advanced tab and entering this in the Custom Class name:

    field_scroll

    If you want to apply this AND a Ready Class such as the 4 column list Ready Class you would enter both of them in the Custom Class field like so:

    gf_list_4col field_scroll

    With a space between them. Like so:

    http://grab.by/98P4

    Doing this correctly will product the following results:

    http://grab.by/98P7

    You can adjust the width and height of the scrolling div to suit the site design, this example has them set to 500px wide and 200px tall.

    That should be enough to get you started.

    Posted 13 years ago on Thursday February 24, 2011 | Permalink