Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Need Image as a Radio Button in Contact Form 7 WordPress


I can't seen to get the attached image to be used in place of a radio button with Contact Form 7.

Can someone help. I can grant access. I'm pretty sure CSS can be used for this, but I've not done this with Contact Form 7.

Answers (4)


Shoeb mirza answers:

Can you please message me..


Arnav Joy answers:

see this, it will help you .

Nile Flores comments:

With Contact form 7? This doesn't really help.


Hai Bui answers:

Yes, it can be done with CSS. Please grant me access, I will help you do it.

Nile Flores comments:

I've allowed Shoeb mirza access for now. They are looking into it. If they cannot, I'll be happy to have you take a look. Thanks!


Bob answers:

First add this code to your theme's functions.php file

function add_shortcode_imageradio() {
wpcf7_add_shortcode( 'imageradio', 'imageradio_handler', true );
function imageradio_handler( $tag ){
$tag = new WPCF7_FormTag( $tag );

$atts = array(
'type' => 'radio',
'name' => $tag->name,
'list' => $tag->name . '-options' );

$input = sprintf(
'<input %s />',
wpcf7_format_atts( $atts ) );
$datalist = '';
$datalist .= '<div class="imgradio">';
foreach ( $tag->values as $val ) {
list($radiovalue,$imagepath) = explode("!", $val);

$datalist .= sprintf( '<label><input type="radio" name="%s" value="%s" class="hideradio" /><img src="%s"></label>', $tag->name, $radiovalue, $imagepath );

$datalist .= '</div>';

return $datalist;

Then add css to your theme's style.css file

input.hideradio{ /* HIDE RADIO */
visibility: hidden; /* Makes input not-clickable */
position: absolute; /* Remove input from document flow */
.imgradio label > input + img{ /* IMAGE STYLES */
border:2px solid transparent;
.imgradio label > input:checked + img{ /* (RADIO CHECKED) IMAGE STYLES */
border:2px solid #f00;

Then in contact form 7 editor add tag for your image radio button.

[imageradio radio-312 "Value1!" "Value2!"]

in above code watch values part carefully.
You need to write first radio button value then exclamation mark then path of your image.
"RadioValue + ! + Image path"

Let me know if it helps.