Introduction
Text fields can be used to add text. text area and password fields. They are generally the most common type of field used when designing a form.
Adding a Text Field
To add a text field use the Text icon on the form designer screen.
This will give you the ability to go back and 3 field options;
- Text fields enable the input of a single line of text, for example a name or a line of an address. (There is no default limit for these field, but you can set using validation tab)
- Text Area fields enable the input of longer text across several lines, for example comments or descriptive fields.
Using tokens and carriage returns in Textarea fields
(When wanting to use carriage returns in the default value of Textarea fields in New Forms, simply press the enter key on your keyboard and the carriage return will work.
However, if you want to use the carriage return when using tokens, we advise using concat({flat}, '\n', {house}, '\n') etc and this will then work when using the form in Fill mode.)
(There is no default limit for these field, but you can set using validation tab) - Password obscures data the form filler is entering AND obscures the data in view data with a '*'. This field is primarily for use with integrations that push the information straight into a secure location.
Basic Field Properties
All of the basic field properties apply to these fields.
Standard
There are no additional field properties beyond the basic properties for these field types.
Validation
- Mandatory is the default setting for a field. Making a field mandatory requires the Form Filler to enter a value. If a field is mandatory the mandatory icon* is shown. Removing the tick from the box stops it from being mandatory.
- Mandatory Message is what will display if a field is mandatory and left empty.
- Minimum Length & Maximum Length are validation conditions for the number of characters in the field value. If the field doesn't match either criteria it will display the appropriate message.
Note: We recommend no more than 2000 characters typed into a single text field. Problems can be caused if this number is surpassed. - Validation Masks are a way of ‘pattern matching’ the input of a form filler; this is useful where a field has a known set of input formats, for example an email address which will always have ‘@’ in, and an extension of .com, co.uk, .eu etc. You can either select one of the masks or use your own regex code by selecting custom regex.
- Validation Mask Message will display if the validation mask conditions are not met.
Advanced
- Outer class is related to the CSS of the field in question. It is the class applied to the outside of the whole field (usually a div that wraps around the filled label and the input box). This is useful if a form designer wishes to highlight a whole field, perhaps by changing the background colour and making it larger. A specific class name can be added in here that will override the default one.
- Label class - This allows a specific class name to be added to the field label (the text part of the field)
- Input class - This allows a specific class name to be added to the input area (the bit the form filler fills in)
- Currency Prefix allows you to enter an unalterable start for any field such as £ or $.
- Width (EMs) - An integer value (i.e. 1, 2, 3 etc.) can be placed in here to set the specific width of a field.
- Input Mask - sets format of the input eg 99-99-99 would only allow numbers to be written in this format, so 6 numbers separated by 2 dashes. An example of when this might be used would be a sort code field. Note: you must use the number 9 when setting the input mask, this represents any number. You can also replace dashes with other characters. The doesn't work with letters. Only 9 for numbers and special characters.
- Input Mask (Placeholder) - the character entered as the placeholder will replace every character until the user overrides it with their own data. So if the input mask is 99-99-99, setting the place holder as X will mean that when the user hovers over the field with the cursor, it will show XX-XX-XX rather than just --. If you want to just use one character, then you can just type X into the Placeholder field. Alternatively, you could set it as XX-YY-XX, if you wished to use more than one character.
- Length Count when selected will display a box to the right of a field with number counting the amount of inputted characters.
If you wish to have a count down instead of counting the number of chars input - this can be achieved as follows:
Create a hidden field which counts the length of the text area box and takes it away from the maximum value (again this can be tokenized) - e.g. 100 - length({textarea1})
This will calculate the number of letters remaining that you can enter.
You can use the token calculation within the text box label to clearly show how many characters are available. (attached please find an example form you can import to try)
Display Condition
Field display conditions allow fields to be displayed only if certain criteria have been met on a previous section. The field in question will only be displayed if the condition is met.
Other Conditions
- Mandatory Condition - allows a field to be made mandatory based on a defined condition
- Readonly Condition - allows a field to be made read only based on a defined condition
Passing Formatted Text from a Text Area Field into a Static Text Field
It is possible to pull through text, which is formatted using HTML, from a text area field into a static text field. The HTML, however, has to be included in the text area field. In order for the token in the static text field to recognise the HTML entered into the text area field, you have to add a # symbol to the beginning of the token.
Further useful reading:
top of page
- When editing escaped HTML in the default value of a text area, the HTML is always stripped out. We advise copying the text to a text editor to paste back as required - or use calculations to display appropriate HTML format fields.
-
When editing static text on a form and switching between HTML and text interfaces, the text input may sometimes disappear. This is an intermittent issue which is not currently scheduled for development. However, we appreciate that it is frustrating and hope to reconsider it for development in the future. In the meantime, we recommend copying the text before submitting your static text fields in case the issue happens, or using the raw HTML fields instead.
