Display field descriptions below the field

By default, RSForm!Pro displays field descriptions inside tooltips (except for when the Responsive layout is used). While there is no built-in option to automatically display descriptions below fields when using other layouts, this can be achieved either by editing the form layout manually or by using a custom PHP script.

The examples below are designed for the Bootstrap 5 layout.

Method 1 - Using a PHP script

You can automatically display field descriptions below the input by adding a PHP script in Form Properties > PHP Scripts > Pre-Processing > Script called before form is generated area. The required code depends on the selected layout flow.

Bootstrap 5 - Horizontal layout flow

Use this version when the layout is set to Bootstrap 5 and the Layout Flow option is set to Horizontal (label next to the field):

$regex = '/<label class="col-sm-3 col-form-label formControlLabel" data-bs-toggle="tooltip" title="{(.*?):descriptionhtml}" for=".*">.*<\/label>/';

if (preg_match_all($regex, $formLayout, $matches))
{
    foreach ($matches[0] as $index => $match)
    {
        $formLayout = str_replace(
            '{' . $matches[1][$index] . ':body}',
            '{' . $matches[1][$index] . ':body}' . '<div class="form-text">{' . $matches[1][$index] . ':descriptionhtml}</div>',
            $formLayout
        );
    }

    $formLayout = str_replace('data-bs-toggle="tooltip" title="', 'data-title="', $formLayout);
}

Bootstrap 5 - Vertical layout flow

Use this version when the layout is set to Bootstrap 5 and the Layout Flow option is set to Vertical (label above the field):

$regex = '/<label class="form-label formControlLabel" data-bs-toggle="tooltip" title="{(.*?):descriptionhtml}" for=".*">.*<\/label>/';

if (preg_match_all($regex, $formLayout, $matches))
{
    foreach ($matches[0] as $index => $match)
    {
        $formLayout = str_replace(
            '{' . $matches[1][$index] . ':body}',
            '{' . $matches[1][$index] . ':body}' . '<div class="form-text">{' . $matches[1][$index] . ':descriptionhtml}</div>',
            $formLayout
        );
    }

    $formLayout = str_replace('data-bs-toggle="tooltip" title="', 'data-title="', $formLayout);
}

Important!

The PHP script depends on the form layout, so if you use a different layout than Bootstrap 5, the regular expression will require adjustments.

Method 2 - Manually adjust the form layout (not recommended)

Go to Form Properties > Form Layout, disable the Layout Auto Generate option and locate the following code inside the label:

data-bs-toggle="tooltip" title="{Name:descriptionhtml}"

Remove the tooltip code and add the description below the field body:

{Name:body}
{Name:descriptionhtml}

Replace Name with the actual field name and repeat this for every field where the description should appear below the field.