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
- How to set an input mask
- Field Settings
- Field Usage
- Field Frontend Display
- Examples
- Frequently Asked Questions
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 | Description |
|---|---|
| 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. Syntax: 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) Examples: 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. |
Usage
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 
Date: 99/99/9999
Zip Code: 99999-9999
Rated: 