Please Note: We are no longer using forums to facilitate standard support. 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.

Can GF use images to make form selections?

  1. dallen
    Member

    So what I am looking to do is have the user select the image that best meets their circumstance.

    Basically , which roof type best describes your home?
    Image of flat roof - Image of tile roof - Image of shingle roof

    etc?

    Does that make sense and is that something GF can do?

    Posted 2 years ago on Thursday January 26, 2012 | Permalink
  2. Yes, you can put HTML (image tag if you want) in a radio/checkbox label field. Clicking on the image (essentially the field label) should select that option for you.

    Posted 2 years ago on Thursday January 26, 2012 | Permalink
  3. Richard Vav
    Administrator

    @dallen as Kevin points out Gravity forms will do what you are looking for, if you want to see a live example you might want to look at the first page of the multi-page form on this site. I used css to hide the actual radio button and add a border when the image is selected.
    http://www.eandhbaxendale.com/online-enquiries/trussed-rafter-enquiry/truss-type-enquiry/

    And on this page I took it a step further by adding jquery ui and tranforming the standard radio fields into buttons http://www.eandhbaxendale.com/online-enquiries/trussed-rafter-enquiry/roof-shape-enquiry/

    Posted 2 years ago on Friday January 27, 2012 | Permalink
  4. dallen
    Member

    That is awesome and exactly what I am looking to do! Thanks so much! By any chance would you could you point me in the right direction so I can configure css to hide the button? Thanks Gents...purchasing GF now!

    Posted 2 years ago on Saturday January 28, 2012 | Permalink
  5. Richard Vav
    Administrator

    When adding your radio button fields to the form you should click on the advanced tab and in the 'CSS Class Name' box add a class called hideradio

    Then in your stylesheet you should add the following bit of code, when you embed your form on your page and preview it you should find the radio button you applied the hideradio class to are hidden leaving just your images.

    .hideradio input[type="radio"] {
    display:none;
    }
    Posted 2 years ago on Saturday January 28, 2012 | Permalink
  6. That is brilliant, you have just inspired a whole new way for me to think about how to use forms in client interaction with the website.

    Posted 2 years ago on Monday January 30, 2012 | Permalink
  7. This is perfect, is their a quick step by step tutorial on how to achieve this....NEWBIE here, it shouldn't take me long to work out, but any help, would be appreciated....i'm taking it, that i'm creating an html box and going from their right?

    Posted 2 years ago on Thursday February 16, 2012 | Permalink
  8. Richard Vav
    Administrator

    @nzfade you only need to add an html box if you want the radio buttons to be jquery ui enhanced, in that html box you would place the jquery script that will initialize the jquery ui enhancements see http://jqueryui.com/demos/button/#radio for more info on that.

    1. Add your radio button field to your form
    2. edit your new field giving it a label
    3. tick 'enable values'
    4. in the label column add your html image markup
    5. in the value column enter a name or value that will be recorded in the database and on email notifications so you know what image was selected
    6. switch to the advanced tab and in 'class name' enter the class 'hideradio'
    7. enter the following in your stylesheet
      .hideradio input[type="radio"] {
      display:none;
      }

    If you now view the page with your form embedded on it you should see that the radio button field is now displaying your images.

    Posted 2 years ago on Thursday February 16, 2012 | Permalink
  9. I'm using the jquery script to enhance the html boxes, but its not working.. is there a conflict somewhere? hover works, but things fall apart when clicked. (see photo)

    PHOTO:
    http://www.trendsettermedia.net/post/images/Screen%20shot%202012-03-12%20at%2011.43.39%20PM.png

    Link:
    http://www.musicvideosubmissions.com/roy-test/

    Posted 2 years ago on Tuesday March 13, 2012 | Permalink
  10. How did you get the images to display next to each other? I have it working with the hideradio, but would like the images to line up horizontally. The gf_list_4col works, but how do you do both?

    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  11. Nevermind. Figured that out. Now how did you add the border around the image once selected?

    Thanks in advance for your help.

    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  12. Try dropping this into your theme's stylesheet:

    .hideradio input[type="radio"]:checked + label span {
    border: solid black 1px;
    }
    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  13. That didn't work. It brought back the radio buttons.

    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  14. That's what richardvav's page had on his styling. Do you have a link to your form?

    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  15. http://dev.rockgear.com/shop/custom-ladies-tee-2/

    It's under development still. I'd like the selected swatch to have the box around it.

    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  16. Do I keep the display:none; in there, or is that a separate entry from the one earlier in the post?

    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  17. Alrighty, this should do the trick for you:

    .gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label img {
    border: 1px solid #000;
    }
    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  18. Lookey there... Perfect! Thank you!!!

    Posted 2 years ago on Thursday April 12, 2012 | Permalink
  19. No problem, glad to help out.

    Posted 2 years ago on Thursday April 12, 2012 | Permalink

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

Support Tickets

 Open A New Support Ticket

 Open A New Priority Support Ticket *

* Developer license holders only