Contact Form 7 add ID to radio buttons [closed]

by

Need some assistance to dynamically generate IDs for a group of radio buttons in Contact Form 7.

Example:

<span class="wpcf7-list-item">
<label id="test01">
<input type="radio" name="test" value="Test">&nbsp;
<span class="wpcf7-list-item-label">Test</span>
</label>
</span>
<span class="wpcf7-list-item">
<label id="test02">
<input type="radio" name="test2" value="Test2">&nbsp;
<span class="wpcf7-list-item-label">Test</span>
</label>
</span>

Thanks!

1 Answer
1

This is not tested, but should work.

There is a + CSS selector that you can use in conjunction with HTML elements and CSS classes and ID’s. I’d suggest you do something similar to this to avoid all the hassle of figuring out a way to inject an ID into each radio button:

/* selects the first label element related to the first radio button,
 * the '+' part selects only the element that comes IMMEDIATELY after
 * the previously stated selector. The ':before' pseudo-class will allow
 * you to inject an image before the content.
 */
#test01+input:before {
    /* something similar to this */
    content: url('image.jpg');
}

I would check out this article, which should be a more detailed walkthrough of everything you need for this. Alternatively – you could use jQuery, which should work something like this:

$('#test01+input').attr('id', 'your-id-value');

Again, this is untested, but this should allow you to dynamically add an ID attribute to any of those elements, which you can then manipulate with CSS. I don’t know if this will solve your problem or not, but hopefully it gets the wheels turning 🙂

Leave a Comment