Use Image as Radio Button on Contact Form 7

Contact form 7 add image to every single radio input

Contact form 7 has unique id or class for every input field, you can target that class or ID to add stylings

I have done this sample to show the process, your code may be different than this

<input class="radio1" type="radio">

CSS:

input.radio1 {
    height: 50px;
    width: 50px;
    display: block; /* You Can remove display block, since your buttons are already stacked */
}
input.radio1:after {
    background-image: url('images/image.img');
    content: '';
    width: 50px;
    height: 50px;
    display: inline-block;
    background-size: cover;
    margin-left: 35px;
}

or simply you can apply the background image to that green box if you are already planning to make it look that way.

Wordpress contact form 7 image instead of radio button

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

Image as a checkbox option in Contact Form 7

it's a bit late but I've had this problem right now

in input name add []

       $datalist .= sprintf(
     '<label><input type="checkbox" name="%s[]" value="%s" class="hidecheckbox" /><img src="%s"></label>', $tag->name, $checkboxvalue, $imagepath 
    );

how to implement radio button in contact form 7 with different value and label

You can do this easely, putting pipe (|) on the input like this:

[select name_input "Visible Value|actual-form-value"]

where Visible Value = (Front-end Value) and actual-form-value = (Input Custom Value).

Your code will be like this:

[radio optradio "Option 1|1" "Option 2|2" "Option 3|3"]

Take a look at the documentation:

---

Related Topics