使用图片作为联系表格7上的单选按钮 [英] Use image as radio button on Contact Form 7

问题描述

我正在尝试创建一个选项，使人们可以选择WP CF7表单中的图像.因为他们只能选择一个选项，所以在我看来，使用单选按钮功能是最好的方法.我在 https://wpquestions.com/Need_Image_as_a_a_Radio_Button_in_Contact_Form_7/19618_中找到了一个代码示例>，但是添加代码并不会:a)不在admin部分中创建标签，b)仅返回页面上的完整短代码，而不返回所需的图片.

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 function is the best way to go. I found an example of a code on https://wpquestions.com/Need_Image_as_a_Radio_Button_in_Contact_Form_7/19618#answer_16362 but adding the code does a) not create a tag in the admin section, and b) only returns the full shortcode on the page, instead of returning the desired images.

我确实找到了这个如何制作在此论坛上，需要联系表格7中的自定义表格标签.我尝试添加

I did find this How to make custom form-tag in contact form 7 required here on this forum. I tried adding the

add_action( 'wpcf7_init', 'wpcf7_add_form_tag_imageradio' );

但是它返回了以下错误:

But it returned the following error:

警告:call_user_func_array()期望参数1为有效回调，函数'wpcf7_add_form_tag_imageradio'找不到，或者/home2/clay/public_html/wp-includes/class-wp-hook.php在第298行上无效的函数名称

Warning: call_user_func_array() expects parameter 1 to be a valid callback, function 'wpcf7_add_form_tag_imageradio' not found or invalid function name in /home2/clay/public_html/wp-includes/class-wp-hook.php on line 298

关于如何解决此问题的任何想法? 使用的主题是OnePage Express

Any ideas on how to solve this? Theme used is OnePage Express

推荐答案

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

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

不要忘记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标签中声明的新短代码:

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

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

在示例需要图像为... 时，他们错过了"add_action"全部

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

您还可以查看 CF7文档

希望有帮助！

这篇关于使用图片作为联系表格7上的单选按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！