How to insert <span> element in radio field choice label? [RESOLVED]

I can add HTML with img, strong or div elements in radio field choice label / price option field label. It works perfectly.

But span elements and inner content seem to be sanitized on page load :disappointed:.
How can I avoid this ?

Hi @yann.simeau
Sorry for the trouble. I just tested it on my local server, and it’s worked. Could you please share the HTML code so I can review it? Also, don’t forget to deactivate your security plugin (if you have one) and recheck the output. Then let me know how that goes.

Here are what I’ve tried:

<span>Span Tag</span>
<!-- another one -->
<span class="spanclass">Span with class</span>

Here is the screenshot:

1 Like

Hi @faisalahammad , when I wrote my first post, I mentioned a little bit too fast “radio field choice label / price option field label” because both look very similar.

I initially found the issue with the price option field, using radio buttons - see my first screenshot.

After inquiry, same as you, radio field works well but not price option field. Strange… :thinking:

Interesting : I get the issue the same way with preview and with final page.
I checked twice : I don’t use any security plugin.

Hi @yann.simeau
Sorry for the confusion. The first option is “Label” and the second option is “Value.” By default, the GF doesn’t sanitize your HTML tags from value. Here is the preview of the source code.

How would you like to handle the value in the front or backend? Could you please make it straightforward so I could further investigate?

Good evening @faisalahammad, I finally found a quick and dirty solution using simple radio button field followed by a hidden price product field / using calculation type and copying the value of the radio field value.
As seen before, the radio button field supports html labels without sanitization.
That’s it. Thank you very much for your help. Regards :blush:

1 Like