How to make URLs clickable in PloneFormGen field help text

Recently I wanted to include a URL in a PloneFormGen (PFG) form field's help text, and I wanted that URL to be clickable. 

Normally, that isn't possible because help text (as with Plone description fields generally) are not rich text (HTML); they are plain text.

The key to doing this is to write or find some JavaScript that searches a text string for a URL expression and replaces that expression with the normal <a href="SOMEURL">SOMETEXT</a> tag.

Here is some JavaScript code that does this (it may not cover all cases, but it's not bad). Sorry, I don't recall where I found this on the web! Thank you to author(s) unknown...

    // linkify the YouTube URL in the description of this field
    function linkify(inputText) {
        var replacedText, replacePattern1, replacePattern2, replacePattern3;

        //URLs starting with http://, https://, or ftp://
        replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
        replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
        replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
        replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

        //Change email addresses to mailto:: links.
        replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
        replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

        return replacedText;
    }
    

You'll want to invoke that JavaScript on your PFG form so it looks for and converts any plain text URLs into clickable ones.

It's easiest to save this JavaScript where you'll most easily be able to invoke it from your PFG form: inside the form! (Another place you could save the JavaScript on the site is the portal_skins/custom folder).

To save this JavaScript inside the PFG form, you must view the PFG form folder using the Zope Management Interface (ZMI): if your PFG form folder URL is

http://mysite.com/submissions

you'll want to go to:

http://mysite.com/submissions/manage_main

Then add a new File object using the drop down list at the top right of the page: select File and press the Add button.

In the ID field enter:

my_form_javascript

then press the Add button.

In the body of the new File object, you want to paste the above JavaScript function, but wrapped with a bit more to tell Plone that this is JavaScript:

<script type="text/javascript">

You also want the JavaScript to be loaded and run once the page (PFG form folder in this case) has finished loading (ie. it is ready), so you include this:

$(document).ready(function(){

All together this is what you paste into the body of the File object:

<script type="text/javascript">

$(document).ready(function(){

    // linkify the YouTube URL in the description of this field
    function linkify(inputText) {
        var replacedText, replacePattern1, replacePattern2, replacePattern3;

        //URLs starting with http://, https://, or ftp://
        replacePattern1 = /(\b(https?|ftp):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/gim;
        replacedText = inputText.replace(replacePattern1, '<a href="$1" target="_blank">$1</a>');

        //URLs starting with "www." (without // before it, or it'd re-link the ones done above).
        replacePattern2 = /(^|[^\/])(www\.[\S]+(\b|$))/gim;
        replacedText = replacedText.replace(replacePattern2, '$1<a href="http://$2" target="_blank">$2</a>');

        //Change email addresses to mailto:: links.
        replacePattern3 = /(([a-zA-Z0-9\-\_\.])+@[a-zA-Z\_]+?(\.[a-zA-Z]{2,6})+)/gim;
        replacedText = replacedText.replace(replacePattern3, '<a href="mailto:$1">$1</a>');

        return replacedText;
    }
    
    $('.formHelp').each(function(index) {
        $(this).html(linkify($(this).text()));
    });

});

</script>

You'll also note that we threw in

    $('.formHelp').each(function(index) {
        $(this).html(linkify($(this).text()));
    });

which invokes the linkify() function on every PFG form field's help text. (You don't have to invoke it on every field help text; you could invoke it on only specific fields' help text if you specified the CSS ID of a particular field's help text, but this is easier).

Now that you've saved the JavaScript, you must invoke it from your PFG form. PFG lets you inject JavaScript (and CSS) into any form very easily. You edit the PFG form folder and go to the Overrides tab and in the Header Injection field you enter an expression like

here/my_form_javascript

The press the Save button.

Now when you view the PFG form, any URLs in the PFG form's help text will be clickable (including "mailto:" links).