Tassos Marinos Developer of Joomla Extensions

The Telephone Field

Updated 08 Apr, 2024

The Telephone custom field gives you the ability to add a telephone number to your article with input masking capabilities. Plus, our innovative Country Code Selector empowers users to enter their details effortlessly.

How to add a Telephone Custom Field to Joomla! Articles

The Telephone field provides you the way to display phone numbers in your Joomla! Articles. Let's see each step required to add such a field.

Step 1: Create an ACF - Telephone custom field


Step 2: Display Country Code Selector (Optional)

Enabling the Display Country Code Selector provides an overall better user experience, by allowing you to select your desired country and displaying the calling code of the selected country.


Step 3: Input Mask (Optional)

Furthermore, it allows you to enter an input mask so the telephone number you enter will be based of a specific format. Example: + (999) 999 9999. Below, we analyze the input mask syntax.


Your Telephone field is now ready!

Field Settings

Let's see what each option does.

Name The name will be used to identify the field. Leave this blank and Joomla will fill in a default value from the title.
Label The label of the field to display.
Description A description of the field that will be displayed in the label tooltip.
Required Is this a mandatory field?
Default Value Set the default value.
Display Country Code Selector Enable to display a country code selector where users can select their country and display its calling code.
Default Country Code Select whether the default country code will be automatically detected by the visitor's location or a custom country will be used.
Telephone Mask Set the telephone mask.

Help user with the input by ensuring a predefined format.

9: Numeric (0-9)
a: Alphabetical (a-z or A-Z)
A: Uppercase alphabetical (A-Z)
*: Alphanumeric (0-9, a-z, or A-Z)
&: Uppercase alphanumeric (0-9 or A-Z)

Phone: +1 (999)-9999
Date: 99/99/9999
Zip Code: 99999?-9999
Click-To-Call Link Enable to create a clickable telephone link for your users.


Once you are in your Article's Edit screen, choose the "Fields" Tab to see the Telephone custom field as you can see in the screenshot below.


In the input field, you can enter the telephone number you desire with the help of the input mask which guide you to enter a defined format.

Frontend Display

Take a look at the screenshot below to see how it could be displayed in your frontend.


Frequently Asked Questions

How to set an input mask?

Input masks allows you to set a pre-defined format for users to enter their Telephone Number. This helps you provide a more strict set of values that your users can give. The syntax for the input masks is as follows:
9: Numeric (0-9)
a: Alphabetical (a-z or A-Z)
A: Uppercase alphabetical (A-Z)
*: Alphanumeric (0-9, a-z, or A-Z)
&: Uppercase alphanumeric (0-9 or A-Z)

Input Masking Examples

Phone: +30 (999) / 9999999 acf-telephone-input-masking
Date: 99/99/9999
Zip Code: 99999-9999

How can I override the layout of "ACF - Telephone" custom field?

To override the "ACF - Telephone" custom field, read here: How to override the "ACF - Telephone" custom field.