Use image as radio button on Contact Form 7

Question

I\'m trying to create an option for people to select an image in a WP CF7 form. As they will only be able to select one option, it seems to me that using a radio button func

Answer 1

try adding instead

add_action( 'wpcf7_init', 'add_shortcode_imageradio' );

Answer 2

You need to put both arguments:

function add_shortcode_imageradio() {
    wpcf7_add_shortcode( 'imageradio', 'imageradio_handler', true );
}
add_action( 'wpcf7_init', 'add_shortcode_imageradio' );

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;
}

Dont forget CSS:

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;
}

And use the new shortcode declared inside FORM tab in contactform7:

[imageradio radio-312 
"Value1!http://[YourImgUrl]" 
"Value2!http://[YourImgUrl]"
]

In the example Need Image as... they missed to inclcue "add_action" that's all

You can check CF7 doc also

Hope Helps!