by

HTML in Zendesk field descriptions

Sometimes you want more than plaintext in your field descriptions. Here’s a JS snippet that allows HTML (and multiple lines!) in your field descriptions.

I have three gripes with Zendesk’s field descriptions:

  1. They’re written in a textarea but output in one paragraph, meaning any newlines get stripped
  2. HTML gets escaped, so you’re very limited in what guidance you can provide to users
  3. It’s a plaintext textarea that outputs into a single <p>...</p>, rather than a WYSIWYG

Just drop this snippet into your theme’s code to allow HTML tags and allow newlines:

<script>
$(document).ready(function() {

    // Allow HTML in field descriptions
    $('.form-field p').each(function (i, v) {
        $(v).html($(v).html().replace(/>/g, ">").replace(/</g, "<"));
    });

    // Allow the use of <br> tags in field descriptions
    var descriptions = $(".form-field p");
    descriptions.each(function (index, value) {
        $(this).html($(this).html().replace(/([^>\r\n]?)(\r\n|\n\r|\r|\n)/g, "<br>"));
    });

});
</script>

The former works by unescaping escaped brackets and the latter works by replacing \n or \r (or OS-specific combinations of the two) with <br>.

Simple!

Add Comment

Comment