How to display Email Addresses and Phone Numbers as Links in a Form

This article describes how to display email addresses and phone numbers as clickable links inside a form, using the HTML mailto: and tel: link protocols.

By default, these fields show plain, non-interactive text. A small JavaScript snippet — added as a Form Load Action — automatically converts the field value into a proper HTML link at form load time. An optional Control Style lets you control how the link looks.

Table of Contents

• Result Preview
• How It Works
• Step 1: Add the Form Load Action
• Step 2: Style the Link (Optional)
• Additional Hints & Special Cases

Result Preview

The screenshot below shows how email addresses and phone numbers appear as interactive links once the script is applied:

How It Works

The solution consists of two components:

1. A JavaScript snippet added as a Form Load Action, which reads the field value and wraps it in an <a href="mailto:"> or <a href="tel:"> tag.
2. An optional Control Style on the field, which defines the visual appearance of the resulting link.

Step 1: Add the Form Load Action

Open your form in the designer and add a new Form Load Action. Select JavaScript as the action type, then paste the script below.

Script — copy and paste into the Form Load Action editor:

function makeFieldClickable(fieldName, type) {
    var span = document.querySelector('[data-fieldname="' + fieldName + '"] .sb-field-value span');
    if (!span || !span.textContent.trim()) return;

    var value = span.textContent.trim();
    var href = type === 'tel' ? 'tel:' + value.replace(/\s+/g, '') : 'mailto:' + value;

    var link = document.createElement('a');
    link.href = href;
    link.textContent = value;
    link.className = 'ms-Link';
    span.replaceWith(link);
}

makeFieldClickable('EmailAddress', 'mail');
makeFieldClickable('PhoneNr', 'tel');

IMPORTANT: Replace EmailAddress and PhoneNr with the actual internal field names used in your form. Add or remove makeFieldClickable() calls to match the number of fields you want to convert.

Step 2: Style the Link (Optional)

By default, the script applies the ms-Link class to the generated link, which uses the standard Microsoft Fluent UI link style. If you want to customize the appearance further, you can add a Control Style directly on the field.

The screenshot below shows where to add or import a custom style in the field properties:

Additional Hints & Special Cases

makeFieldClickable('MobilePhone', 'tel');
makeFieldClickable('WorkEmail', 'mail');