Input Field Widget

We've a widget type to the Frontend Visual Designer, 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 top:

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 
 

Text Color – This field can be used to assign a color to the text entered by the user.

Placeholder – This field can be used to add placeholder text that guides the user on the type or format of information that should be entered.

Placeholder Color – This field can be used to assign a color to the Placeholder text.

Placeholder Size – This field allows you to customize the font size of the placeholder text displayed in the text input box.

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. 

States

Hover – Border Color – This field allows you to customize the border color of the text input box when a user hovers over it.

Hover – Background Color – This field allows you to customize the background color of the text input box when a user hovers over it.

Focus – Border Color – This field allows you to customize the border color of the text input box when the user clicks on or is actively interacting with the text field.

Focus – Background Color – This field allows you to customize the background color of the text input box when the user clicks on or is actively interacting with the text field.

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.