使用图像作为联系表 7 上的单选按钮答案

【问题标题】：Use image as radio button on Contact Form 7使用图像作为联系表 7 上的单选按钮
【发布时间】：2018-01-26 04:40:57
【问题描述】：

我正在尝试创建一个选项，供人们选择 WP CF7 表单中的图像。由于他们只能选择一个选项，因此在我看来，使用单选按钮功能是最好的选择。我在https://wpquestions.com/Need_Image_as_a_Radio_Button_in_Contact_Form_7/19618#answer_16362 上找到了一个代码示例，但添加代码确实 a) 不在管理部分创建标签，并且 b) 仅返回页面上的完整短代码，而不是返回所需的图像。

我确实在这个论坛上找到了这个How to make custom form-tag in contact form 7 required。我尝试添加

add_action( 'wpcf7_init', 'wpcf7_add_form_tag_imageradio' );

但是它返回了以下错误：

警告：call_user_func_array() 期望参数 1 是有效的回调，函数 'wpcf7_add_form_tag_imageradio' 未找到或 /home2/clay/public_html/wp-includes/class-wp-hook.php 第 298 行中的函数名称无效

关于如何解决这个问题的任何想法？使用的主题是 OnePage Express

【问题讨论】：

标签： php wordpress css contact-form-7

【解决方案1】：

尝试添加

add_action( 'wpcf7_init', 'add_shortcode_imageradio' );

【讨论】：

【解决方案2】：

您需要同时输入两个参数：

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

别忘了 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;
}

并使用在 contactform7 的 FORM 选项卡中声明的新短代码：

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

在示例 Need Image as... 中，他们错过了包含“add_action”的全部内容

您也可以查看CF7 doc

希望有所帮助！

【讨论】：