How to Make Phone Numbers a Link in Email Notifications

Introduction

Would you like to make the phone numbers collected in your form a link inside your email notifications? By default, the phone numbers that come through on the email notification cannot be clicked to call, however with a small PHP snippet you can easily change this. In this tutorial, we’ll walk you through setting up your form and notifications to make these numbers have the click-to-call capability.

Checking for the HTML Email Template settings

First, you’ll need to make sure the email template that is being used for your email notifications is set to HTML Template.

To do this, navigate to the WPForms Settings » Email tab from the WordPress menu on the left.

Be sure to check the HTML Template (if it’s not already checked) and click Save to save the changes.

Be sure to set the settings to HTML Template on the WPForms Email Settings tab

Creating your form

For the purpose of our tutorial, we’re going to create a form with a Name, Email, Phone and Paragraph Text form field.

If you need help in creating a form, please see this documentation.

create your form and add a phone number field to it

Next, we’re going to add the snippet of code that will turn your Phone field into a link when viewing the email notification.

For assistance in adding snippets to your site, please review this tutorial.

/**
 * Make phone numbers a link inside email notifications
 *
 * @link https://wpforms.com/developers/how-to-make-phone-numbers-a-link-in-email-notifications/
 *
 */

function wpf_dev_html_field_value( $value, $field, $form_data, $context = '' ) {

    // Limit this customization to telephone fields.
    if ( ! empty( $field['value'] ) && 'phone' === $field['type'] ) {
        $phone_number = sanitize_text_field( $field['value'] );

    // Make the phone number field a link in the notification
        if ( ! empty( $phone_number ) ) {
            return '<a href="tel:' . $phone_number . '" target="_blank">' . $phone_number . '</a>';
        }

    }

    return $value;

}
add_filter( 'wpforms_html_field_value', 'wpf_dev_html_field_value', 10, 4 );

Let’s review this snippet. The first part of the snippet will only look for the Phone form fields. This will limit the need for the snippet to run on every field.

The second part of the snippet will, once a Phone field is found, will take the number entered into the form and turn it into a clickable link inside the notification.

Now when your form is completed, the phone number will appear as a link in the email notification.

Now when your form is completed, the phone number will appear as a link in the email notification

Would you like to also have further validation on this particular field? Check out our tutorial on How to Provide Additional Phone Field Validation.

Filter Reference: wpforms_html_field_value