Adding the description to a field is easily done within the metadata – however, sometimes you need to add in a link. Unfortunately, this cannot be done within the metadata settings.
The solution? We can add in a div class into the web page content page, and then call it in the JS. Lets break that down into a few easy to digest portions.
Step 1 – Create a div class with the content
First of all we will be creating the div class for the label.
1. In Portal Management, navigate to the Content Page of the web page that the form is attached to.
2. On the General tab, scroll down until you see the Copy (HTML) section and select the HTML tab.
3. Create the div and be sure to give it a comment to keep the code neat and readable (example below)
<!-- Description for the field -->
<div class="sample description">
<p> This text will be displayed with this
<a href="https://google.com" target="_blank">hyperlink</a>
</p>
</div>
Step 2 – Add the description to the form
Great! Now that the div is configured, we will need to apply it to the specific field.
1. Navigate to Basic Forms and select the form
2. Select the Additional Settings tab
3. Scroll down to the Custom JavaScript section
4. Since we want this to be applied when the form is loaded, we will need to add the script in the OnLoad function (see example below)
orby.forms.OnLoad(function () {
$(".sample.description").insertAfter("#orby_field_label");
});
5. As you can see above, when we added in the description, we made sure to add it in AFTER the label. This will put it nicely above the field.