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?
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?
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;}
Edit: Thanks for the help!!
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.
No you were right it worked. I just messed the image up by making it a link on accident. Thanks!
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?
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
Cool. Thanks!