Wordpress contact form 7 image instead of radio button

Question

As the title suggest, I would like to use images instead of radio buttons so the user could select the picture. I know that there is a solution on here with modifying the php code but that seems to be outdated. I also saw this https://jsfiddle.net/La8wQ/10/ solution which would work great if the plugin would generate the html the same way as in the example.

Instead it looks like this on my page:

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

This is for each type I have added. I know I can warp it in a label but I don't see how it would help in this situation. I would like to stick to showed example because that uses pure css.

I guess my question is in the end, how could I make it work in my situation?

Answer 1

Welcome to Stack Overflow!

For this to work you need to do a few things. Make radiobuttons, with <label></label> directly below/after them. This is not a default WPCF7 label. The radiobuttons need to have an id="" that is same as the for="" part of the label above it.

A <label> needs a class added (for example visa) which has its image defined in the CSS like so: .visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}.

A <label> needs this class as well: drinkcard-cc.

Each radiobutton needs class wpcf7-special-radio added to it.

For 2 radiobuttons an example looks like this:

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

And here is a working fiddle https://jsfiddle.net/Snuwerd/9r1dz0uk/

Update

Correction, the label needs to be after/below the input, like in the example code.

Update

It is not possible without JS, because you can't assign seperate IDs to radio elements in WPCF7, so here is the JS solution:

Use this 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);
}

Be sure not to add any white (empty) lines inside the <script></script> tag, or else it will break, because WPCF7 will place paragraphs (<p>) in the code. Paste this in your form:

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

You can add new options in the radio like so

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

4 options: [radio type-of-website class:wpcf7-special-radio-container default:1 "Type 1" "Type 2" "Type 3" "Type 4"]

And they will be mapped in order with the images that are chosen in the CSS code on these lines:

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