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.

Checkboxes as images with highlight?

  1. New to Gravity Forms... LOVE it so far... this is an awesome plugin no wordpress site should be without. Thank YOU!

    What I am trying to do is create a custom order form where instead of checkboxes, I use images of my items, I would like the user to just click on the image, and that would highlight that item, in a sense, checking the box.
    I would like to be able to click on the item again to de-select it.
    Its for a custom order form where users can select multiple colors that will go into the item they are ordering.
    I then need to style all these images so they show up right next to each other in rows so it's easy to just click on the colors you want, then continue.
    I will be integrating this form into Cart66 to process orders.
    You can see what I have so far over here: http://rockitoutbb.com/tulle-colors/
    Any and all suggestion welcomed!
    Thanks!

    Posted 11 years ago on Monday May 16, 2011 | Permalink
  2. I would like to see an answer to this also

    Posted 11 years ago on Tuesday May 17, 2011 | Permalink
  3. Sorry... I renamed the page... it is now at: http://rockitoutbb.com/custom-tutu/

    Posted 11 years ago on Tuesday May 17, 2011 | Permalink
  4. Hi guys,

    If you're using the current version of Gravity Forms then you can add images to the product option labels via HTML:

    <img src="/path/to/your/image.jpg" />

    To update the image, you'll probably want to use some jQuery. Here is some sample jQuery code that adds a 'selected' class to the containing
    li. This could be used to style the selected differently to indicate that it has been selected. You can use this code as a base if you'd like to change the URL of the image.
    http://pastie.org/1916756

    Posted 11 years ago on Tuesday May 17, 2011 | Permalink
  5. Cool...
    3 Easy questions for you:

    I just need a "selected" css class for my items that does something to them?
    Where would I put that code?
    Do I need to install jQuery or is it part of wordpress?
    Thanks!

    Posted 11 years ago on Tuesday May 17, 2011 | Permalink
  6. Hi Yourguide,

    1) It really depends on what you want to do. Adding the selected class is just one concept of a way that would allow you to style selected items differently than unselected items. Here is another concept where the items are faded out until selected: http://dl.dropbox.com/u/689144/gfsupport/checkboxes-as-images-with-highlight.htm

    2) This is javascript/jquery code. This documentation will be helpful in determining where to place this code: http://www.gravityhelp.com/documentation/page/Where_Do_I_Put_This_Code%3F

    3) jQuery is available as part of WP and enqueued by Gravity Forms. You should not need to load it separately.

    Posted 11 years ago on Wednesday May 18, 2011 | Permalink