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?
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.
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/
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;
}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?
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.
.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.
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
Try dropping this into your theme's stylesheet:
[css]
.hideradio input[type="radio"]:checked + label span {
border: solid black 1px;
}That's what richardvav's page had on his styling. Do you have a link to your form?
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.
Alrighty, this should do the trick for you:
[css]
.gform_wrapper ul.gfield_radio li input[type="radio"]:checked + label img {
border: 1px solid #000;
}No problem, glad to help out.