This component is used when you want to provide general and short data. You will find many options to set up this component how you desire.
- Label: You can place the title or name in this component.
- Label Position: In this setting you can adjust the position of the component name and label.
- Label Width: In this setting you can adjust the width of the component name and label.
- Label Margin: In this setting you can adjust the margins of the component name and label.
- Placeholder: In this setting you can place text which will appear in the field when it's empty.
- Description: In the description field you can enter text which will appear under the Input field.
- Tooltip: Entering data here will create a tooltip icon on the field.
- Prefix: In this setting you can enter a predefined text to show before a field.
- Suffix: In this setting you can enter a predefined text to show after a field.
- Widget: This setting is the display UI, which is used to place the value in the field.
- Input Mark: In this setting a user can predefine a format which is required in the field. For example, a phone number input mark would be (999) 999-9999, and the system will only allow numbers to be entered in this field. There are 3 input masks available. For Numeric insert (9), for Alphabetical insert (a), for Alphanumerical insert (*).
- Custom CSS Class: In this setting you can add a CSS class. Multiple classes can be added and they class names can be separated by only a space.
- Tab Index: The setting Tab Index indicates which element in a form can be focused and which can be unfocused. It works as a global attribute. It gives 3 different types of results depending on the integer. Negative Integer (-1) indicates that the elements are unfocused and they are unreachable by sequential navigation. Zero Integer (0) indicates that the elements are focused and they can be reached with a sequential navigation. Positive Integer (1) it works as the zero integer but in the positive integer you can set up an order depending on the number.
- Hidden: Enabling this setting will hide your field from viewing when the form is extracted.
- Hide Label: In this component you can hide the label or name. Sometimes you only need the component field and not the label, hide label is used for that purpose.
- Show Word Counter: You can enable this field if you want to have a live count of the number of words.
- Show Character Counter: You can enable this field if you want to have a live count of the number of characters.
- Hide Input: Enabling this setting will hide the data entered when you view the form the front-end browser.
- Initial Focus: Enabling this setting can make the field initially focused. Please note that only one field or component can be the initial focus in a form.
- Allow Spellcheck: Enabling this setting will allow the field to mark the words spelled wrong.
- Disabled: Enabling this setting will disable the component from the form.
- Table View: When this setting is enabled the data on this component will only show up in the Submission list of the table view.
- Multiple Values: If you enable this setting, you can add multiple values in the field. By clicking on "Add Another" button you can add more values and they will form an array.
- Default Values: The default value (if given) will be the value in the text field unless the user enter it manually. If you use default value you can no longer use place holder settings.
- Persistent: If you enable this setting, your data will not emerge in the properties.
- Input Format: With this setting you can obtain output from this field into 3 different formats. Plain, HTML and Raw(insecure). You can select your desired format.
- Protected: If you do not want to show the input value in properties when queried by API, you can enable this setting.
- Database Index: If you select this setting this will create an index within the database which will help to make the performance better when queries are submitted.
- Text Case: You can set the text case of the field to mixed, uppercase and lowercase as default.
- Encrypted: Encrypt this field on the server. It is a two-way encryption and it is not appropriate for passwords. This setting is only available on the ‘Enterprise’ project plan.
- Redraw On: With this option you can link or connect another component, you can redraw a component if the other component is updated.
- Clear Value When Hidden: As the name suggest the value of this field will be cleared if the hidden option is selected.
- Calculate Value on Server: As the name suggest, if you select this setting, it will run the calculations on your server.
- Allow Manual Override of Calculated Value: As the name suggest, if you select this setting, it will allow you to override the calculated values.
- Validate On: Selecting this setting will determine when to allow the front-end validation of the component. It provides two options to choose i.e., Change and Blur.
- Required: Enabling this setting will make this component a mandatory and the user can not submit the form without filling this component.
- Unique: Enabling this setting will help the user understand that this information is not provided before while submitting the form.
- Minimum Length: In this setting you can define the minimum limit required in this field.
- Maximum Length: In this setting you can define the maximum limit required in this field.
- Minimum Word Length: In this setting you can define the minimum limit of words required in this field.
- Maximum Word Length: In this setting you can define the maximum limit of words required in this field.
- Regular Expression Pattern: This setting will check the value in the field before the user can submit the form.
- Error Label: With this setting you can enter text which will be displayed when the field displays an error message.
- Custom Error Message: In this setting you can enter the error message which will be displayed to the user if any error occurred while filling the form.
- This component should Display: In this setting you can choose "True and False" if this component should display.
- When the form component: In this setting you can choose if you want the component to be displayed after the it is submitted.
- Has the value: In this setting you can choose the value of the component when it will be hidden or displayed.
- Advanced Logic:
- HTML Attributes: In this setting you can enter HTML attributes map for components input.
Let's create a new Text field component. Click on the Text field button and drag it on the Form Creation screen. It will open text field settings window.
1. In the picture below we created a simple text field with main elements. We enter the name of the Label in the first field.
2. We set the position of the Label in the second field. You have 6 different options to set the position of the label. By default, label is at the top.
3. In the label width and margin we set the size of the label. You can increase or decrease the size and position by adjusting the percentages.
4. Placeholder element allows you to can put text which will appear in the field when it's empty. It will guide the user with what to write in the field.
5. Click on Save to create the text field.
This is how the text field component will appear on the form.