Need Image as a Radio Button in Contact Form 7 WordPress

Arnav Joy answers:

see this, it will help you .
http://codepen.io/DavidBradbury/pen/HuCqx

---

Hai Bui answers:

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

---

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 */
cursor:pointer;
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!http://wpquestions.com/uploads/blondishnet_phpAypIEK.jpg" "Value2!http://wpquestions.com/uploads/blondishnet_phpAypIEK.jpg"]

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.