How to make radio buttons into images?

Hello @lewisp91

Thank you very much for using our plugin. Please, follow the steps below:

  1. Enter images tag (or images tags and texts) into the choices’ text boxes (Ex. <img src="">)
  2. Enter the following style definitions block through the “Customize Form Design” attribute in the “Form Settings” tab (
#fbuilder .cff-radiobutton-field img{width:40px;opacity:.6;}
#fbuilder .cff-radiobutton-field input{display: none !important;}
#fbuilder .cff-radiobutton-field input:checked+span img{opacity:1;}

Please, watch the following video:

Note that I used the opacity CSS rule to identify the selected choices, but you can use the effects you prefer.

Best regards.


This site will teach you how to build a WordPress website for beginners. We will cover everything from installing WordPress to adding pages, posts, and images to your site. You will learn how to customize your site with themes and plugins, as well as how to market your site online.

Buy WordPress Transfer