Text Field

This field was designed to gather short text information like names, emails, titles, etc. It adds a single narrow text bar to the form. The Text Field could be filled with any symbols, numbers, and letters of every language.

Settings

Field Settings

Field Type. In this drop-down menu, there are the most common types of information gathered via the Text Field: Text, Email, URL, Phone number, and Password. The type you choose here defines the kind of information that will be considered “correct” for this field. For example, if the user places the letters into the Phone field, he/she will receive a notification saying that one of the fields was filled incorrectly.
Min/Max length (symbols). You can set the minimal and maximal number of symbols for the field.Set Input Mask. You should use the input mask if you want to restrict the users from inserting the wrong data into the field. When you turn this toggle on, you get access to the mask settings.

Mask Type. The Default and Datetime variants differ only with the rules of mask creation. The first one is for any alpha-numeric data and the second is for date and time only.

Input Mask. In this bar, you have to insert the mask formula. Its creation is simple. You have three definitions: 9 – marks the numeric value, a – means the alphabetic value, and * – means that you can use both numeric and alphabetic values here. For example, let’s set a mask for the phone number.

(999) 999-9999 – this mask defines that the first three symbols have to be numbers that are placed in brackets, then go another three numbers, a hyphen, and four more numbers. The user won’t be able to insert letters into that field, only the numbers and in the way prescribed by the mask.

You could set the mask in a different way. 

9-a{1,3}9{1,3} – this formula says that the first symbol has to be a number, then goes hyphen, letters from 1 to 3, and numbers from 1 to 3. You can set the range of symbols’ quantity in the braces. The first number will mean the minimal quantity of symbols and the second – the maximal quantity.

Mask Visibility. In this drop-down menu, you define when the mask will be visible to the users. Always means that it won’t be hidden, On Hover will show the mask only when the user hovers a pointer over the field, and On Focus means that the mask will become visible when the user clicks on the field.Mask Placeholder. Here you can choose the symbol that will show the user the structure of the mask. That symbol will display where the number or letter has to be inserted. Let’s change it to the “*” and see how it will look on the frontend:

Style Settings

If you have installed the JetStyleManager plugin, the Block Style button will appear in the top right corner of the editing window. Here are the styling settings you can meet there: