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 an image as a checkbox or radio button?

  1. tm
    Member

    I have 2 choices in a section of my form and would like to be able to use an image rather than a radio button to have one of them selected. Can I do this?

    Posted 12 years ago on Thursday January 19, 2012 | Permalink
  2. Richard Vav
    Administrator

    Sure you can use an image as the label for a radio button, to do this you will need to check the 'enable values' option on the properties tab of the radio button field. You can then add your html code that will display the image to the label not forgetting to write a meaningful name in the value box so you know what image they choose when you get the email notification.

    If you don't want the actual radio button to display as well as the image you can add some css to do that but you may want to add a border or something to identify which image they have selected. You will need to add the class 'hideradio' to the css class name on the radio buttons advanced tab

    .hideradio input[type="radio"]{display:none;}
    body .gform_wrapper ul.gfield_radio li input[type="radio"]:checked+label img{border:solid #000 1px;}
    Posted 12 years ago on Thursday January 19, 2012 | Permalink
  3. tm
    Member

    Edit: Thanks for the help!!

    Posted 12 years ago on Thursday January 19, 2012 | Permalink
  4. Richard Vav
    Administrator

    Could you post a link to the page with your form on it, that second style should add a border to the image when it is selected. Even though you can't currently see a visible sign that one of the images has been selected can you check the forms entry in the admin section to see if it has recorded the selection anyway.

    Posted 12 years ago on Thursday January 19, 2012 | Permalink
  5. tm
    Member

    No you were right it worked. I just messed the image up by making it a link on accident. Thanks!

    Posted 12 years ago on Friday January 20, 2012 | Permalink
  6. tm
    Member

    Another quick question. Can I assign classes to each radio button (image) so I can have them side by side instead of one on top of another?

    Posted 12 years ago on Friday January 20, 2012 | Permalink
  7. You should be able to use our ready classes for the inline/column display of the radio buttons:

    http://www.gravityhelp.com/documentation/page/CSS_Ready_Classes

    Posted 12 years ago on Friday January 20, 2012 | Permalink
  8. tm
    Member

    Cool. Thanks!

    Posted 12 years ago on Friday January 20, 2012 | Permalink