Well, here’s what your shortcode would look like in the form intself:
[checkbox select-catalog "|reporting-data1" "|reporting-data2" "|reporting-data3"]
Then you’d just replace the “reporting-data#” with what you want the tag to display in your email/database with you use the [select-catalog] tag.
And here’s the CSS you need to add to get images:
/* First item in checkbox for CF7 shortcode [checkbox select-catalog ... ] */
span.select-catalog>span.wpcf7-checkbox>span.first>span.wpcf7-list-item-label {
display: inline-block;
height: 32px;
width: 32px;
background-image: url("../compatible_ie.gif");
background-size: 32px 32px;
background-repeat: no-repeat;
}
/* Last/3rd item in checkbox for CF7 shortcode [checkbox select-catalog ... ] */
span.select-catalog>span.wpcf7-checkbox>span.last>span.wpcf7-list-item-label {
display: inline-block;
height: 32px;
width: 32px;
background-image: url("../compatible_firefox.gif");
background-size: 32px 32px;
background-repeat: no-repeat;
}
/* Middle/2nd item in checkbox for CF7 shortcode [checkbox select-catalog ... ] */
span.select-catalog>span.wpcf7-checkbox>span>span.wpcf7-list-item-label {
display: inline-block;
height: 32px;
width: 32px;
background-image: url("../compatible_chrome.gif");
background-size: 32px 32px;
background-repeat: no-repeat;
}
I only see a way to include 3 images, so if you need more, you’ll have to edit some coding because I don’t think you can place image tags in the shortcode itself. For the CSS, you just need to adjust the height/width/url data to match your solution. This CSS will only affect the checkbox series with the tag “select-catalog”; it won’t affect others with other names (like “select-catalog-2”). If you want to format a different one, just adjust that “class” in this CSS (from “.select-catalog” to “.new-name”). If you want to change a radio series instead of a checkbox series, then you should replace that class (from “.wpc7-checkbox” to “.wpc7-radio”).
Though limited, it gives you some options for the 3 image possibility you were referencing in your post.
