Wordpress 联系表格 7 图像而不是单选按钮

Question

正如标题所示，我想使用图像而不是单选按钮，以便用户可以 select 图片。 我知道这里有一个修改 php 代码的解决方案，但这似乎已经过时了。 我还看到了这个https://jsfiddle.net/La8wQ/10/解决方案，如果插件能够以与示例中相同的方式生成 html，该解决方案将非常有用。

相反，它在我的页面上看起来像这样：

<span class="wpcf7-list-item first">
<span class="wpcf7-list-item-label">::before Type 1 ::after</span>
<input type="radio" name="type-of-website" value="Type 1" checked="checked">
</span>

这适用于我添加的每种类型。 我知道我可以在 label 中扭曲它，但我看不出它在这种情况下会有什么帮助。 我想坚持展示示例，因为它使用纯 css。

我想我的问题到底是，我怎样才能让它在我的情况下工作？

Answer 1

欢迎来到堆栈溢出！

为此，您需要做一些事情。 制作单选按钮， <label></label>直接在它们的下方/之后。 这不是默认的 WPCF7 label。 单选按钮需要有一个id=""与上面的 label 的for=""部分相同。

<label>需要添加一个 class （例如visa ），其图像在 CSS 中定义，如下所示： .visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);} 。

<label>也需要这个 class： drinkcard-cc 。

每个单选按钮都需要添加 class wpcf7-special-radio 。

对于 2 个单选按钮，示例如下所示：

HTML

<form>
    <div>
      <span class="wpcf7-list-item first">
      <input id="special_radio_1" type="radio" class="wpcf7-special-radio" name="type-of-website" value="Type 1"/>
      <label for="special_radio_1" class="drinkcard-cc visa"></label>
      <input id="special_radio_2" type="radio" class="wpcf7-special-radio" name="type-of-website" value="Type 2"/>
      <label for="special_radio_2" class="drinkcard-cc mastercard"></label>
      </span>
    </div>
</form>

CSS

.wpcf7-special-radio {
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.wpcf7-special-radio:active +.drinkcard-cc{opacity: .9;}
.wpcf7-special-radio:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

这是一个工作小提琴https://jsfiddle.net/Snuwerd/9r1dz0uk/

更新

更正，label 需要在输入之后/下方，如示例代码中所示。

更新

没有 JS 是不可能的，因为在 WPCF7 中不能为单选元素分配单独的 ID，所以这里是 JS 解决方案：

使用这个 CSS：

.wpcf7-special-radio-container .wpcf7-list-item-label {
 display: none;
}
.wpcf7-special-radio {
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}
.special_radio_card_0 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_1 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_2 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_3 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_4 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_5 { background-image:url(http://i.imgur.com/SJbRQF7.png); }

.wpcf7-special-radio:active +.drinkcard-cc{opacity: .9;}
.wpcf7-special-radio:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

确保不要在<script></script>标记内添加任何白（空）行，否则它将中断，因为 WPCF7 将在代码中放置段落（ <p> ）。 将此粘贴到您的表单中：

<div class="row">
    <div class="col-md-6"> <label> Your Name * [text* your-name] </label> </div>
    <div class="col-md-6"> <label> Your Email * [email* your-email] </label> </div>
</div>
<label> Subject [text your-subject] </label> <label> Your Message [textarea your-message] </label>

[radio type-of-website class:wpcf7-special-radio-container default:1 "Type 1" "Type 2"]
[submit "Send"]

<script>
jQuery(document).ready(function($) {    
    $('.wpcf7-special-radio-container input').addClass('wpcf7-special-radio');
    $('.wpcf7-special-radio').each(function (index, el) {
        var label = $('<label>').attr('for', 'special_radio_'+index).addClass('drinkcard-cc').addClass('special_radio_card_'+index);
        $(this).attr('id', 'special_radio_'+index);
        $(this).after(label);
    }); 
});
</script>

您可以像这样在收音机中添加新选项

2 个选项： [radio type-of-website class:wpcf7-special-radio-container default:1 "Type 1" "Type 2"]

4 个选项： [radio type-of-website class:wpcf7-special-radio-container default:1 "Type 1" "Type 2" "Type 3" "Type 4"]

并且它们将与在这些行的 CSS 代码中选择的图像按顺序映射：

.special_radio_card_0 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_1 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_2 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_3 { background-image:url(http://i.imgur.com/SJbRQF7.png); }
.special_radio_card_4 { background-image:url(http://i.imgur.com/lXzJ1eB.png); }
.special_radio_card_5 { background-image:url(http://i.imgur.com/SJbRQF7.png); }