---
title: "Input Masking - Convert Forms"
description: "Guide users to enter correctly formatted phone numbers, currency, credit card, or custom masks for better validation and experience."
url: "https://www.tassos.gr/docs/convert-forms/features/input-masks"
date: "2026-04-07T06:40:33+00:00"
language: "en-GB"
---

[ Home ](https://www.tassos.gr/index.php?option=com_content&view=category&layout=blog&id=24&Itemid=1088) / [ Convert Forms ](https://www.tassos.gr/index.php?option=com_content&view=category&id=43) / [ Advanced Features ](https://www.tassos.gr/index.php?option=com_content&view=category&id=75)

#  Input Masking

##  Guide users to enter correctly formatted phone numbers, currency, credit card, or custom masks for better validation and experience.

 ![Input Masking](https://www.tassos.gr/media/template/products/convert_forms/input_masking.svg)

If you were ever in the need to display a field to your users, so they can provide information in the right format that you specified, then Input Masks are here to help you achieve it. Input masks are a set of rules that make the fields you assign them to, to take values based on these set of rules. They are visual guides that help your users fill in fields.

## [How to add an Input Mask](#how_to_add_an_input_mask)

Input Masks can be added to specific Convert Forms fields. The supported fields are the following:

- Text Field
- Phone Field

In this tutorial we'll show you how to add an Input Mask to the supported fields. Before we can start, you should head over to [Create a form](https://www.tassos.gr/joomla-extensions/convert-forms/docs/creating-your-first-form) or edit an existing form.

Once you are in your form, click on the Field you want to add an Input Mask and locate the *Input Mask* field.

![convert forms new input mask](https://www.tassos.gr/images/cf-input-mask-new.png)

## [Basic Masks](#basic_masks)

To create an Input Mask rule, you will need to use our specific set of symbols.

- *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)
- All other characters are literal values and will appear as is.

For example, if you require your field to be filled with a 6-digit number, you will need to enter six 9's in the Input Mask field. Format: *999999*.

The Input Mask field on the back-end of your form:

![convert forms input mask example field](https://www.tassos.gr/images/cf-input-mask-example-field.png)

On the front-end, the Input Mask field will appear as blank and once a user clicks on it, underscores will appear indicating the amount of characters the user needs to enter to fill in the field. Since we used the 9 symbol, then the Input Mask will allow only numbers to be entered (no letters or any other characters).

![convert forms input mask example field input](https://www.tassos.gr/images/cf-input-mask-example-field-input.gif)

You could also add hyphens (-) or parentheses in your Input Mask in order to create your ideal format. In the following example, let's say you require 3 characters followed by 4 numbers. Format: *aaa-9999*.

The Input Mask field on the back-end of your form:

![convert forms input mask example 2 field](https://www.tassos.gr/images/cf-input-mask-example2-field.png)

On the front end, you can enter any alphabetic character, lowercase or uppercase, as you enter the third character, you will see the hyphen appearing which then lets you enter the four numbers.

![convert forms input mask example 2 field input](https://www.tassos.gr/images/cf-input-mask-example2-field-input.gif)

**Note**: A user will see underscores in place of the input mask characters when they enter a field and fill it with information. The underscores define the amount of characters the field expects before it can be submitted successfully. It would be best to provide additional visual text using either a Field Description or a Field Placeholder.

![convert forms input mask additional visual text](https://www.tassos.gr/images/cf-input-mask-visual-text.png)

## [Common Masks](#common_masks)

In this section we will provide some common masks that are frequently used in forms.

### [Phone Field](#phone-field)

Require a phone number in the following format: *+(999)999-9999*.

The Input Mask field on the back-end of your form:

![convert forms input mask telephone field](https://www.tassos.gr/images/cf-input-mask-telephone-field.png)

Front-end of your form:

![convert forms input mask telephone field input](https://www.tassos.gr/images/cf-input-mask-telephone-field-input.gif)

### [1-800 Number Field](#1-800-number-field)

To use an Input Mask for 1-800 numbers and associate it with a phone number, you will need to use the following format: *1-(899)-999-9999*.

The Input Mask field on the back-end of your form:

![convert forms input mask 1-800 phone field](https://www.tassos.gr/images/cf-input-mask-1-800-phone-field.png)

Front-end of your form:

![convert forms input mask 1-800 phone field input](https://www.tassos.gr/images/cf-input-mask-1-800-phone-field-input.gif)

### [Credit Card Field](#credit-card-field)

To use an Input Mask for a credit card, you will need to use the following format: *9999-9999-9999-9999*.

The Input Mask field on the back-end of your form:

![convert forms input mask credit card field](https://www.tassos.gr/images/cf-input-mask-credit-card-field.png)

Front-end of your form:

![convert forms input mask credit card field input](https://www.tassos.gr/images/cf-input-mask-credit-card-field-input.gif)

### [Email Field](#email-field)

To create an Input Mask that accepts email addresses, you could use the following format: *\*\[\*{0,50}\]@\*\[\*{0,50}\].\*\[\*{0,5}\]*. This allows your users to enter 1 to 51 characters for the username, 1 to 51 characters for the domain and 1 to 5 characters for the top level domain (.com, .gr, etc...).

![convert forms input mask email field](https://www.tassos.gr/images/cf-input-mask-email-field.png)

Front-end of your form:

![convert forms input mask email field input](https://www.tassos.gr/images/cf-input-mask-email-field-input.gif)

### [Escaping special mask characters](#escaping_special_mask_characters)

If you want to include the the characters 9, a, A in your Input Masks you will need to escape them in order to not use them in the Input Mask as a symbol, but as a character. In order to do so, you will need to escape them by adding one backslash(\\) in front of the respective character.

Let's say you want to create an Input Mask that allows your users to enter their Instagram page. The URL you want to use is the following: *https://instagram.com/aaaaaaaaaaa*

Now, if you enter the above format in an Input Mask, you will get the following result on the front end of your form:

![convert forms input mask instagram field input wrong](https://www.tassos.gr/images/cf-input-mask-instagram-field-input-wrong.png)

The entered format, appears to be correct on first sight but uses the 'a' characters in the Input Mask, instead of rendering them as plain text. After escaping the Input Mask format, our new format will look like this: *https://inst\\agr\\am.com/aaaaaaaaaaa*.

The Input Mask field on the back-end of your form:

![convert forms input mask instagram field](https://www.tassos.gr/images/cf-input-mask-instagram-field.png)

Front-end of your form:

![convert forms input mask instagram field input](https://www.tassos.gr/images/cf-input-mask-instagram-field-input.gif)

### [Optional Masks](#optional_masks)

With optional masks, you can create a flexible format that allows your users to enter more characters than the minimum amount you have set. An example would be a phone number. In may countries this differs and since we do not want to create different fields with different input masks, we can create one flexible mask that can accept them all.

Such an input mask could be: *(99) 999-9999999\[999\]*.

Now, users can enter up to 15 characters with the first 2 being their country code. Any of the following would be accepted: **(30) 123-4567890** or **(30) 123-4567890123**.

#### [ZIP Code Field](#zip-code)

A simple ZIP Code is 5 numbers which can be represented in the following format: *99999*. You can allow your users to enter 5 digits and add an extra of 4 digits at the end using the following format: *99999\[-9999\]*. Example input: **37842** or **23754-3826**.

The Input Mask field on the back-end of your form:

![convert forms input mask zip code field](https://www.tassos.gr/images/cf-input-mask-zip-code-field.png)

Front-end of your form:

![convert forms input mask zip code field input](https://www.tassos.gr/images/cf-input-mask-zip-code-field-input.gif)

#### [SKU Field](#sku-field)

You could set your SKU to have 2 numbers at start followed by 3 numbers or letters and have an optional of 2 characters at the end. The mask format would be: *99-&&&\[&&\]*. This would allow your users to enter the following inputs: *65-8EC*, *24-A3CQQ* or *74-C2A7N*

The Input Mask field on the back-end of your form:

![convert forms input mask sku field](https://www.tassos.gr/images/cf-input-mask-sku-field.png)

Front-end of your form:

![convert forms input mask sku field input](https://www.tassos.gr/images/cf-input-mask-sku-field-input.gif)

#### [Username Field](#username-field)

If you desire to have a username field in your form and allow your users to enter a name between 5 and 7 letters with the first being Uppercase, you would need the following mask format: *Aaaaa\[aa\]*. Example input: **Theme**, **Johnny**, **Joomlaa**.

The Input Mask field on the back-end of your form:

![convert forms input mask username field](https://www.tassos.gr/images/cf-input-mask-username-field.png)

Front-end of your form:

![convert forms input mask username field input](https://www.tassos.gr/images/cf-input-mask-username-field-input.gif)

#### [Twitter Username Field](#twitter-username-field)

You can add a Twitter username field that can accept between 4 and 15 characters, which is the limit of Twitter usernames. To do so you will need the following mask format: *@\*\*\*\*\[\*\*\*\*\*\*\*\*\*\*\*\]*. This mask will accept up to 15 characters. Example input: **@john**, **@tassos**

The Input Mask field on the back-end of your form:

![convert forms input mask twitter username field](https://www.tassos.gr/images/cf-input-mask-twitter-username-field.png)

Front-end of your form:

![convert forms input mask twitter username field input](https://www.tassos.gr/images/cf-input-mask-twitter-username-field-input.gif)

### [Alternator Masks](#alternator_masks)

An alternator mask allows your users to enter 2 different syntax based on a predefined format you specify. An example would be to use the symbols a or 9. The format we would use would be *(aaa|999)* and users could enter the following inputs: **jed** or **123**. So what this means is you can either enter 3 characters(uppercase or lowercase) or 3 numbers... not both. You could also use 3 choices such as *(aaa|999|9AA)* which lets your users enter either 3 characters, 3 numbers or the a number followed by 2 uppercase characters.

The Input Mask field on the back-end of your form:

![convert forms input mask alternator field](https://www.tassos.gr/images/cf-input-mask-alternator-field.png)

Front-end of your form:

![convert forms input mask alternator field input](https://www.tassos.gr/images/cf-input-mask-alternator-field-input.gif)

### [Advanced Masks](#advanced_masks)

With advanced masking you can have even more control over your input masks. The combinations you can use are the following:

- **{n}** Repeat any symbol *n* times
- **{n,m}** Repeat any symbol between *n* and *m* times

In front of the curly braces, you can enter any symbol such as *9{5}* which will allow your users to enter 5 numbers in the input field. Another example would be \*{15}, this will let your users enter up to 15 different alphanumberic characters.

#### [Facebook URL Field](#facebook-url-field)

If want to let your users enter their Facebook URL into your form, you could use a format of: *https://f\\acebook.com/\*{1,22}*. This will allow your users to enter their Facebook username which can contain between 1 and 22 characters.

The Input Mask field on the back-end of your form:

![convert forms input mask facebook url field](https://www.tassos.gr/images/cf-input-mask-facebook-url-field.png)

Front-end of your form:

![convert forms input mask facebook url field input](https://www.tassos.gr/images/cf-input-mask-facebook-url-field-input.gif)

#### [Phone Number Field](#phone-number-field)

To allow your users to enter a phone number between 8 and 15 digits, you can use the following format: *9{8}\[9{0,6}\]*. Example inputs: **12345678** or **12345678912**.

The Input Mask field on the back-end of your form:

![convert forms input mask advanced phone number field](https://www.tassos.gr/images/cf-input-mask-adv-phone-number-field.png)

Front-end of your form:

![convert forms input mask advanced phone number field input](https://www.tassos.gr/images/cf-input-mask-adv-phone-number-field-input.gif)

#### [Email for specific domain Field](#email-for-specific-domain-field)

It may be the case you want your users to enter a specific username so you can use it to create an email address on your domain. The format you would is: *\*\[\*{0,50}\]@mysite.com*. This will allow your users to enter between 1 and 51 characters with the suffix @mysite.com.

The Input Mask field on the back-end of your form:

![convert forms input mask advanced email specific domain field](https://www.tassos.gr/images/cf-input-mask-adv-email-specific-domain-field.png)

Front-end of your form:

![convert forms input mask advanced email specific domain field input](https://www.tassos.gr/images/cf-input-mask-adv-email-specific-domain-field-input.gif)

#### [Product SKU Field](#product-sku-field)

This SKU Field is a bit more complex than the previous one as this gives more flexibility over the characters it allows you to enter. So if we needed an SKU between 8 and 12 characters (letters or numbers). We could use the following format: *&{4}-&{4}\[&{0,4}\]*.

The Input Mask field on the back-end of your form:

![convert forms input mask product sku field](https://www.tassos.gr/images/cf-input-mask-product-sku-field.png)

Front-end of your form:

![convert forms input mask product sku field input](https://www.tassos.gr/images/cf-input-mask-product-sku-field-input.gif)

#### [Coordinates Field](#coordinates-field)

This Coordinates Field allows you enter latitude and longitude seperated by a space. It also supports entering negative numbers for latitude and longitude. We could use the following format:

*-{0}\[-{0,1}\]9{1}\[9{0,1}\].9{6}\[9{0,5}\] -{0}\[-{0,1}\]9{1}\[9{0,1}\].9{6}\[9{0,5}\]*.

The Input Mask field on the back-end of your form:

![convert forms input mask coordinates field](https://www.tassos.gr/images/cf-input-mask-coordinates-field.png)

Front-end of your form:

![convert forms input mask coordinates field input](https://www.tassos.gr/images/cf-input-mask-coordinates-field-input.gif)

Now you can create custom masks to add to your fields so you can get the specific format you want in your form fields.

 Last updated on Sep 25th 2025 08:09

## Schema

```json
{
    "@context": "https://schema.org",
    "@type": "BreadcrumbList",
    "itemListElement": [
        {
            "@type": "ListItem",
            "position": 1,
            "name": "Home",
            "item": "https://www.tassos.gr"
        },
        {
            "@type": "ListItem",
            "position": 2,
            "name": "Home",
            "item": "https://www.tassos.gr/docs"
        },
        {
            "@type": "ListItem",
            "position": 3,
            "name": "Convert Forms",
            "item": "https://www.tassos.gr/docs/convert-forms"
        },
        {
            "@type": "ListItem",
            "position": 4,
            "name": "Advanced Features",
            "item": "https://www.tassos.gr/docs/convert-forms/features"
        },
        {
            "@type": "ListItem",
            "position": 5,
            "name": "Input Masking",
            "item": "https://www.tassos.gr/docs/convert-forms/features/input-masks"
        }
    ]
}
```

```json
{
    "@context": "https://schema.org",
    "@type": "Article",
    "mainEntityOfPage": {
        "@type": "WebPage",
        "@id": "https://www.tassos.gr/docs/convert-forms/features/input-masks"
    },
    "headline": "Input Masking",
    "image": {
        "@type": "ImageObject",
        "url": "https://www.tassos.gr/"
    },
    "publisher": {
        "@type": "Organization",
        "name": "Tassos",
        "logo": {
            "@type": "ImageObject",
            "url": "https://www.tassos.gr/https://www.tassos.gr/media/brand/logo-text.png"
        }
    },
    "author": {
        "@type": "Person",
        "name": "Stergos Zamagias",
        "url": "https://www.tassos.gr/docs/convert-forms/features/input-masks"
    },
    "datePublished": "2019-11-16T11:37:53+02:00",
    "dateCreated": "2019-11-16T11:37:53+02:00",
    "dateModified": "2025-09-25T08:17:48+03:00"
}
```