We've released a new widget type to the Experience Canvas, the Input Field Widget. This widget can be used to create an input field where end users can enter information. For example, this could be used to allow a user to submit their email, share their telephone number, or select a date that works best for them. This article is going to go over the different input types available, and some of the customization that is available.
IMPORTANT NOTE - In order to collect and use this data, it will require a conversation with one of our solutions engineers. They will need to create an integration in your account that collects and submits the data when a button is clicked. Therefore you should contact your account manager or support@getfastr.com to get a call scheduled.
To use this new widget, you can select the following icon from the widget list on the left hand side:
Input Field Types
There are several different Input Field Types available from the first dropdown menu. Some of these input fields have different formatting options that can be selected. Additionally, it can be useful to select the correct form option so that it is correctly recognized by your browser. The available options are shown in the following screenshot:
Text - This is a field for any text input, such as having the user enter their name:
Text Area - This is another field for any text input. However, this is typically used for when a longer piece of text needs to be submitted. This field will wrap to a new line as text is entered, allowing paragraphs to be submitted:
Password - This is another field used for inputting text. However, when the user types the text into a password field, it will be automatically hidden as shown here:
Date - This can be used to allow the user to select a specific date, as shown here:
DateTime - This functions in a similar fashion to the Date option. However, the time can also be selected in addition to the date, as shown here:
Hidden - This is a slightly more complicated field input. This can typically be used to hide a field that you want submitted with the users data. For example, there might be an auto generated token that should be attached when the "Submit" button is selected.
Number - This is another field for any text input, but it will be limited to only allowing numbers.
Phone Number - This is another field for any text input, but should primarily be used for a Phone Number input.
Time -This can be used to allow the user to select a specific time, as shown here:
URL - This is another field for any text input, but should primarily be used for a URL input.
Form Customization Options
In addition to several Input Field Types, there are additional customization options that can be utilized depending on the form. These fields are optional, but can be used to change the visual appearance and The following screenshot shows the fields that are available for the "Text" input:
Placeholder - This field can be used to display a short hint or example for what the user should, as shown here:
Default Value - This field can be used to display a default value for the form. If this is not modified by the end user, the default value will be submitted.
Validation Pattern - This field can be used to insert a REGEX expression that validates the end users input. For example, the following REGEX could be used to make sure that a phone number is being submitted:
(?:\(\d{3}\)|\d{3})[- ]?\d{3}[- ]?\d{4}
If you have any questions about how to create certain REGEX for this validation, please reach out to support@getfastr.com
Minimum Length/Value - This field can be used to determine the minimum length or minimum number that must be used by the end user when submitting data.
Maximum Length/Value - This field can be used to determine the maximum length or maximum number that must be used by the end user when submitting data.
Form ID - This field can be used to assign a unique ID to the form. This essentially is used to help label the data when it is submitted.
Required Form Field? - This checkbox can be selected to require the user to fill out the field before they can hit submit.
TextArea Size (TextArea must be selected) - This field can be used to determine how the TextArea input can be expanded. This icon in the bottom right corner can be clicked by the end user to expand the field:
The options are as follows:
- None: If selected, the field will remain locked in size
- Vertical: If selected, the field can be expanded vertically by clicking and dragging the corner
- Horiztonal: If selected, the field can be expanded horizontally by clicking and dragging the corner
- Both: If selected, the field can be expanded both vertically and horizontally by clicking and dragging the corner.
Date/Time Options (Date, DateTime, or Time must be selected) - These three options can be used to select the default Date/Time, as well as a selectable range for the Date/Time:
The options are as follows:
- First Input field: If selected, this can be used to show the default value for the Date/Time
- Second Input field: If selected, this can be used to select the minimum range value for the Date/Time. In the screenshot above, users would not be able to select a Date/Time before June 6th, 2024 at 9:00am
- Third Input field: If selected, this can be used to select the maximum range value for the Date/Time. In the screenshot above, users would not be able to select a Date/Time after July 31st, 2024 at 9:00am
As mentioned, many of these fields are optional, and mainly are available to provide additional customization. Please reach out to support@getfastr.com if you have any questions here.
Comments
0 comments
Please sign in to leave a comment.