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!