Contact Form 7で写真付きのcheckboxes

Question

下の写真のようなcheckboxesを作りたいですが、
Contact Form 7だけで実現できますか？

![

どうぞよろしくお願いします。

Answer 1

入力フィールドにラベルは付けられるようなので、それにCSSで割り当てる事ができるかもしれません。

<style>
.image_fields label {
	background-repeat: no-repeat;
	display: inline-block;
	padding-top: 100px;
	width: 100px;
}
.image_fields label:nth-child(1) { background-image: url("A.jpg"); }
.image_fields label:nth-child(2) { background-image: url("B.jpg"); }
.image_fields label:nth-child(3) { background-image: url("C.jpg"); }
.image_fields label:nth-child(4) { background-image: url("D.jpg"); }
.image_fields label:nth-child(5) { background-image: url("E.jpg"); }
.image_fields label:nth-child(6) { background-image: url("F.jpg"); }
</style>

<div class="image_fields">
[checkbox your-img use_label_element "A" "B" "C" "D" "E" "F"]
</div>

【入力フィールドにラベルを付けられますか? | Contact Form 7 [Japanese]】
http://contactform7.com/ja/faq/can-i-add-text-labels-to-input-fields/

【Contact Form 7 ラジオボタンにラベル | フリーフードファイター兼SE社長活動日記|株式会社ジーティーアイ】
https://blog.gti.jp/post-5896/

Comments

[yclin_tagaya]

ありがとうございます！！
これで無事に解決できました！
いつもありがとうございます。