I need to insert HTML markup (spans, classes, h2 tags). However, webform appears to be filtering out all markup from labels. Has anybody succeeded in inserting html markup in labels, and how did you do that?
5
-
2Just a note - an h2 can't go inside a label, it's invalid HTML– Clive ♦Feb 21, 2014 at 12:36
-
See this question: How to theme a webform– Felix EveFeb 21, 2014 at 12:37
-
Hey Felix, using templates or preprocesses is of course an option. Though, I would really like to know how come the html is preserved in my client's webform labels, but not in mine. I pulled the code base thru git, and imported the db. Something really differs.– Alexei RayuFeb 21, 2014 at 13:05
-
Does it need to be in the label, or could you just use a Markup webform component?– LarynOct 19, 2014 at 5:00
-
Yes I ended up doing it as #markup.– Alexei RayuOct 21, 2014 at 9:29
Add a comment
|
4 Answers
You won't be able to use HTML markup within the label inputs within the Webform module itself, as it most likely cleans out all HTML markup before displaying to the user to prevent XSS attacks etc.
Most likely you'll need to write a small custom module which implements hook_form_alter, which will allow you to change the markup used for the labels.
I'm not actually sure if Drupal will allow markup within the #title attribute of your form elements, so you might need to use the #prefix property instead to add your custom HTML replacement labels.
If this is all Greek to you then you'll probably need to checkout these tutorials:
-
My client has the same code base, that I pulled though git. And in his stage environment, the html in labels works. (Though xss javascripts are filtered). We share the same codebase. This is surrealistic. Feb 21, 2014 at 12:44
-
-
I am setting labels via webform GUI. And html in labels works and shows in his dev environment but not in mine. We run the same code base, and we run the same php version. Feb 21, 2014 at 12:58
-
hmmm that's very strange. I can't think of any reason off hand for the different results. This method seems a bit hacky to me, I'd personally rather implement my method above so that your specials labels can be commited to your git repo too. Feb 21, 2014 at 13:06
-
Yes, this this very strange. I will keep diggind and post findings if I succeed. If not - then I will just use templates and preprocesses. Feb 21, 2014 at 13:08
I added the following to the bottom of my settings.php page. I read it somewhere... works like a charm. :)
$conf['webform_allowed_tags'] = array('a', 'em', 'strong', 'code', 'img', 'ul', 'li', 'u', 'span style="font-style:italic', 'span' , 'a', 'i', 'italic');
-
Thank you! Now I need to remember this intuitive way to allow the tags I need to display! Nov 11, 2021 at 8:19
the "Options with Markup" module allows HTML formatting of labels for radio button/checkbox.https://www.drupal.org/project/webform_optionsmarkup
In D8+, you can do this via copying the twig template that generated the label markup.
Copy core/modules/system/templates/form-element-label.html.twig to your theme and change as needed. Just ensure the markup you add is valid HTML.
In my case, I had to add a span if the field was required:
{%
set classes = [
title_display == 'after' ? 'option',
title_display == 'invisible' ? 'visually-hidden',
required ? 'js-form-required',
required ? 'form-required',
]
%}
{% if title is not empty or required -%}
{% if required %}
<label{{ attributes.addClass(classes) }}>{{ title }}<span class="sr-only"> required</label>
{% else %}
<label{{ attributes.addClass(classes) }}>{{ title }}</label>
{% endif %}
{%- endif %}
I originally tried modifying the label via hook_form_alter(), but webforms seem not to spit out the same elements to alter i.e. $form['FIELD_NAME']['widget'][0]['value']['#title'].
