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:

&lt;script&gt;
$(document).ready(function() {

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

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

});
&lt;/script&gt;

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!

Leave a Reply

Your email address will not be published.