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.

Using images for multiple choice

  1. mmeisner
    Member

    I'm trying to re-design a form to include images as selections which would make it much more usable and intuitive.

    After reading this post: http://www.gravityhelp.com/forums/topic/insert-images-as-multiple-choice-field-options
    it seems like people have been able to replace a multiple choice radio buttons with images. I would like to do this, but am not sure where to begin.

    I see that Kevin recommends using the
    < li> element to add a background image via CSS. While I understand how this works in CSS, I don't know how to properly integrate the CSS with the multiple choice section on the gravity form.

    Any help would be greatly appreciated.

    Posted 13 years ago on Saturday April 9, 2011 | Permalink
  2. mmeisner
    Member

    Actually I see what to do after dusting off Firebug. Target the CSS for the gforms by using the "gchoice" element. Simple enough!

    Posted 13 years ago on Sunday April 10, 2011 | Permalink
  3. mmeisner
    Member

    Ok check it - How do I remove the little multiple choice circles, and let the user simply click on the shape they want?

    Posted 13 years ago on Sunday April 10, 2011 | Permalink
  4. Something like this should work:

    [css]
    #field_28_14 .gfield_radio input { position: absolute; visibility: hidden; }

    Update #field_28_14 to the ID of your field.

    Posted 13 years ago on Monday April 11, 2011 | Permalink
  5. mmeisner
    Member

    I tried the code above, and it works to remove the input button, but doesn't allow me to click the image. How would I modify the form to work?

    You can see it in action here : http://www.hottubcoverdepot.com/our-hot-tub-covers/deluxe-hot-tub-cover/

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  6. Hi Mmeisner,

    Sorry I just realized that the thread you originally linked to was instructing you to use background images to accomplish this. With Gravity Forms 1.5, you can actually add any HTML (including images) directly in the label in the Gravity Forms admin ( http://grab.by/9VG0 ).

    With the image actually inside of the label, clicking the image will also select the hidden checkbox.

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  7. mmeisner
    Member

    Oh wow...that's awesome. And super easy. Thanks David.

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  8. mmeisner
    Member

    Ok, I've done that, and created a bit of a mess. I can probably re-size the images and fix it BUT how to I make it so the image, once clicked, remains selected so the user knows it's been chosen? If the radio button is gone, there's nothing to indicate to them...

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  9. 1 - Simple solution would be to just leave the radio buttons.
    2 - More advanced solution would be to use CSS or Javascript to update the selected image with a "selected" version of the image (ie different color, border, or some visual indicator).

    Posted 13 years ago on Wednesday April 20, 2011 | Permalink
  10. dpetsolt
    Member

    I've added images w/rollover css to the radio button labels, and even though the user can simply click on the image in IE, Chrome, and Safari to select their choice, in Firefox the only way it'll make the selection is when you click on the checkbox. Is there any way I can add some css to get Firefox to be able to make the image selection also? Here's the form:

    http://dish2u.com/14-second-quote/

    Posted 13 years ago on Tuesday May 3, 2011 | Permalink
  11. Hi Dpetsolt, did you already get this resolved? I just checked in Firefox and I was able to select the images to select the radio button.

    Posted 13 years ago on Wednesday May 4, 2011 | Permalink
  12. jbdurand
    Member

    David said :
    "With Gravity Forms 1.5, you can actually add any HTML (including images) directly in the label in the Gravity Forms admin ( http://grab.by/9VG0 ).
    With the image actually inside of the label, clicking the image will also select the hidden checkbox."
    I used that technique and the check boxes appeared replaced by the images I wanted.
    But for some unknown reason, when I try to use conditionnal logic on these labels, the labels appears blank in the menu and cannot be selected for conditionnal logic usage. Any idea?
    I must add that I also try to insert value to these labels but that did not change anything, the labels are blank.
    The only way I found to made the label reappear in the conditional logic list was to insert a number before the instruction ( 1<img src=... )
    Thanks by advance for you answer.

    Posted 13 years ago on Tuesday May 24, 2011 | Permalink
  13. They appear blank because HTML isn't rendered in certain places in the Admin. Conditional Logic uses the Labels, and because HTML is stripped out you are left with what appears to be a blank value. That is why adding content outside of the HTML makes it appear, only the HTML is stripped out. Try selecting one of the blank values and see which one works. We can look into how to better handle this.

    Posted 13 years ago on Tuesday May 24, 2011 | Permalink
  14. Same case in my form creating process. (1) Multiple choice by image HTML, (2) assigned value to each option, (3) on the next page, display only the chosen image, by create HTML block with conditional logic. The logical condition is: (Hide) when "admin label A" is NOT "value X"

    The value list is a long blank list. I can still move up and down the list and see the location by highlighted blue color.

    yes, as I select one of the blank values, the form is working. Just been very confused with it. I have a long list with 15+ or more choices. Can you suggest any solution.

    Posted 13 years ago on Tuesday June 21, 2011 | Permalink
  15. I don't have a solution right now, other than guessing which one it is.

    The ability to enter HTML into checkboxes and radio buttons was just added, so problems associated with doing so were bound to crop up which is one of the reasons why we had not added the ability before because we knew it would cause problems in the Admin.

    We will have to take a look and see how we can handle this in areas such as Conditional Logic, etc. So we are going to have to look at it and see what we can change so that it is more user friendly.

    Posted 13 years ago on Tuesday June 21, 2011 | Permalink
  16. Samantha
    Member

    Hello,

    Any solution for this yet?

    Posted 12 years ago on Wednesday January 11, 2012 | Permalink
  17. mmeisner
    Member

    Bump - any ideas on how to resolve this? It's been almost eight months...anyone offering any solutions on how to work around this possibly?

    Posted 12 years ago on Monday February 6, 2012 | Permalink