How to make multiple selection in Contact Form 7 with images? - wordpress

Question

I need to do the same as here:
http://deinehelfer24.de/renovierungen/
As I understand it, this is done on contact form 7, but how are the images and multiple selections implemented?

Answer 1

I feel generous today, simpe example ho you can style labels
https://jsfiddle.net/Beneris/65mdtpo3/28/
HTML
<form>
<div class="input-group">
<div class="input-wrap">
<input type="radio" name="group1" id="group1-1" value="1">
<label for="group1-1">
<figure><img src="http://placekitten.com/g/100/100"><h3>Radio 1</h3></figure>
</label>
</div>
<div class="input-wrap">
<input type="radio" name="group1" id="group1-2" value="2">
<label for="group1-2">
<figure><img src="http://placekitten.com/g/100/100"><h3>Radio 2</h3></figure>
</label>
</div>
<div class="input-wrap">
<input type="radio" name="group1" id="group1-3" value="3">
<label for="group1-3">
<figure><img src="http://placekitten.com/g/100/100"><h3>Radio 3</h3></figure>
</label>
</div>
</div>
<div class="input-group">
<div class="input-wrap to-toggle 1 3">
<input type="checkbox" name="group2" id="group2-1" value="1">
<label for="group2-1">
<figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 1</h3></figure>
</label>
</div>
<div class="input-wrap to-toggle 1 2">
<input type="checkbox" name="group2" id="group2-2" value="2">
<label for="group2-2">
<figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 2</h3></figure>
</label>
</div>
<div class="input-wrap to-toggle 1 2 3">
<input type="checkbox" name="group2" id="group2-3" value="3">
<label for="group2-3">
<figure><img src="http://placekitten.com/g/100/100"><h3>checkbox 3</h3></figure>
</label>
</div>
</div>
</form>
CSS
.radio-group {
display:block;
}
.input-group .input-wrap{
display:inline-block;
vertical-align: top;
padding: 10px;
}
label figure {
background-color: #ccc;
padding: 5px 10px;
border-radius: 0 0 5px 5px;
cursor: pointer;
}
figure h3 {
text-align: center;
}
.input-group input:checked ~ label figure {
background-color: red;
}
.input-wrap input {
display:none;
}
JS
$('.to-toggle').hide();
$('input[name=group1]').on('change', function(){
var val = $(this).val();
$('.to-toggle').hide();
$('.to-toggle input').prop('checked', false);
$('.to-toggle.' + val).show();
//alert(val);
});