Using Image Choices to list radio buttons vertically using Image Choices to list radio buttons vertically with descriptions. We recently had one of our fantastic customers reach out and ask if it was possible to use image choices to vertically list the radio options and have text description next to them. We’ve never tried this before and figured it could be a neat idea if it worked! So here’s how we did it!
We wanted to see if we could achieve this effect with nothing more than the Image Choices Gravity Forms addon, no extra JS or fancy code, just some custom CSS. We started with one of our base CSS styled examples from our support page. Then went onto further customising the CSS to get the layout and look we were after.
Live demo
Verticlal radio list with descriptions demo
Please note that this is an example of what you can do with custom CSS, more than a copy & paste solution. Feel free to use the styles but they will most likely require further customisation to suit your website and needs. Read our support article for more info
How to do it
Create a new radio or checkbox field, and add some images as normal. Then add in all your description text into the label field like the example screenshot below. 
Please note, it’s not really a great idea to be adding so much text to the label field, make’s it really hard to edit text and impossible to add any custom HTML to it also. Non the less this technique will work if you’re not too worried about having to edit the text later.
Note I also added in some <h2> tags before the description to give each radio a nice heading. You can use whatever HTML tags you like here tho.
Applying the Custom CSS
Head over to the forms setting tabs and click on the Image Choices option. Paste in your custom CSS into the text editor and turn ON the ignore global CSS option. In some cases, you may have to leave this unchecked, however.
You can grab the custom CSS used in the example above from the below Gist.
Custom CSS
Hit save and preview your form! Check out the same form but with more visual styling around each option. Also an option to support and style <li> items within the description.
Notes & things to consider
Now whilst this example might get you 70% of what you’re after, you’ll probably need to further customise the CSS to get it looking how you want it. We’ve added in mobile responsive styles to make sure the layout looks good on mobile devices but WordPress themes differ dramatically, so more often than not, you’ll need to tweak the example custom CSS provided further. You’ll also need a valid version of Gravity Forms.
