Add and configure Single Line Input Element in WPEForm

Single line input or simply a text input is the input[type="text"] element with advanced features. It lets you collect text input from your users with a bunch of validation. This is also the same element used for

• First Name.
• Last Name.
• Email Address.
• Phone Number.

For the above element the validation is preset to accept only respective values.

CHANGING PLACEHOLDER AND ICON

From INTERFACE tab, you can change the text input placeholder and icon.

NOTE: If you have set Layout to INLINE from APPEARANCE then the element title will be used as placeholder instead.

PREFIL AND DEFAULTS

From ATTRIBUTES you can set default values and URL/META based prefils. Here is an example of URL parameter based prefil.

With the above settings, you can navigate to the URL with ?input=Coming+from+frontpage then "Coming from frontpage" will be set as default value. If the parameter is not present, the the value "unknown referer" will be set instead.

The logic is same with Meta based prefil.

SCORE

Single line input allows for automated scoring. Based on some condition, score can be added to any of the outcomes. All comparisons are case insensitive.

1. EQUAL TO - Works for string and numeric value, if user input and given value are equal.
2. CONTAINING - Works for string value only. If user input contains the given value.
3. STARTING WITH - Works for string value only. If user input is starting with the given value.
4. ENDING WITH - Works for string value only. If user input is ending with the given value.
5. GREATER THAN - Works for numeric value only, if user input is greater than the given value.
6. LESS THAN - Works for numeric value only, if user input is less than the given value.

NUMERIC VALUE

Will try to parse the user input for a numeric value (in float). If it is invalid then 0 will be used instead.

CONDITIONAL EVENT

VALUE BASED

Value based comparison is same as score condition.

1. EQUAL TO - Works for string and numeric value, if user input and given value are equal.
2. CONTAINING - Works for string value only. If user input contains the given value.
3. STARTING WITH - Works for string value only. If user input is starting with the given value.
4. ENDING WITH - Works for string value only. If user input is ending with the given value.
5. GREATER THAN - Works for numeric value only, if user input is greater than the given value.
6. LESS THAN - Works for numeric value only, if user input is less than the given value.

LENGTH BASED

The length of the characters of the user input is compared against the given value.

1. EQUAL TO - If input character length is equal to the given value.
2. GREATER THAN - If input character length is greater than the given value.
3. LESS THAN - If input character length is less than the given value.

VALIDATION

Single line input has a very advanced validation system. You can access it from VALIDATION tab.

MASK

We use imask.js under the hood and we have given some common masks. Here's how to set the input mask.

• Set the Mask type to your preferred value. More on individual values below.
• Set mask placeholder.
• If Always show mask is enabled, mask placeholder is always shown, else it is shown on focus only.

Here are different types of mask.

Choose from presets

We have included an ever increasing preset of complex masks. If your requirement is one of them, simply choose it and you are done. If you cannot figure out something do let us know and we will try our best to provide a mask for it.

String mask

In string mask, the following characters are special:

• 0 - any digit.
• a - any letter.
• * - any char.
• [] - make input optional.
• {} - include fixed part in unmasked value.
• ``` - prevent symbols shift back.
• other characters which are not in custom definitions are supposed to be fixed.

If definition character should be treated as fixed it should be escaped by \ (E.g. \0, \a etc).

So a value of 00-aaaa[aa] would accept 56-abcd as well as 56-abcdxy.

A more realistic example would be to formulate the Driver's License of New York. According to the documentation it is in the following format.

11Alpha+7Numeric or 1Alpha+18Numeric or 8Numeric or 9Numeric or 16 Numeric or
28Alpha

So the String mask would be [aaaaaaaa][000000000000000000].

Similarly the format of California is

11Alpha+7Numeric

So the String mask would be a0000000.

TYPE

Input type based validation is available when Mask type is set to None. The following options are available.

• Type - Choose from a preset value of type to filter with.
• Minimum length - When type is set to string type inputs, you can specify the minimum length required.
• Maximum length - When type is set to string type inputs, you can specify the maximum length required.
• Minimum value - When type is set to number type inputs, you can specify the minimum value required.
• Maximum value - When type is set to number type inputs, you can specify the maximum value required.