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

Question

正如标题所暗示的，我想使用图像而不是单选按钮，以便用户可以选择图片。我知道这里有一个修改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>

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

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

Answer 1

欢迎来到 Stack Overflow！

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

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

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

每个单选按钮都需要添加 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/

更新

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

更新

没有 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); }