Follow

Form Custom Input Types in Form Builder

The Form UI has builtin form elements such as Drop-Downs, Text fields, etc. but by using the Advanced field option custom-type, you can extend your form to include several new types of automatically validated and formatted inputs.

 

Color

Syntax Example:

custom-type=color;custom-type=color;

Description:

This input can be used to create a field bound by these additional Advanced field options. Users can choose a new color by clicking on the colored square to the right of the input.

Name Description Example
color-picker-color

Set the starting color for the input.

The default is black.

color-picker-color=#338833;

 

Here is an example with the color picker dialog:

 

Date & Date Range

While this is an advanced feature, you can also use the Date/Time Picker from the basic Form Elements panel. A single date picker or two date pickers paired into a date range can be created using these custom types. Additionally the following advanced option(s) may be used in conjunction with these custom types:

Name Description Example
datepicker-start-date

Defines the offset from today for the date picker to start enabling date choices.

By default the start date is 0d or today.

custom-type=daterange;datepicker-start-date=+5d;

 

In this example, the custom-type is date with no additional Advanced options.


 

In this example, a custom-type of date range is specified.

 

Attribute Name:

date

Syntax Example:

custom-type=date;

Description:

This creates an input with a date picker. While this is an advanced feature, you can also use the Date/Time Picker from the basic Form Elements panel.

 

Attribute Name:

daterange

Syntax Example:

custom-type=daterange;

Description:

Use this custom type create two date input fields for a start and stop date. While this is an advanced feature, you can also use the Date/Time Picker from the basic Form Elements panel.

 

Email Address

Syntax Example:

custom-type=email;

Description:

This input can be used to create a field for users to enter email addresses.

Here is an example.

 

Telephone and Fax Numbers

An input styled for a telephone or fax number can be created using tel or fax custom-types.

In this example, the custom-type is fax.

 

In this example, a custom-type of tel is specified.

 

Attribute Name:

tel

Syntax Example:

custom-type=tel;

Description:

Use this custom type to create an input suitable for a telephone number.

 

Attribute Name:

fax

Syntax Example:

custom-type=fax;

 

Description:

Use this custom type to create an input suitable for a fax number.

 

 

Ignore

Syntax Example:

custom-type=ignore;

Description:

This input can be used to pass explicit HTML into the form verbatim. The form will include any HTML specified in the 'Default' input field verbatim. This field is useful for including paragraphs, social icons, images, etc. The advanced field parameters add-class and clearfix-after can be used in tandem to control how the HTML interacts with the rest of the form HTML.

Here is a simple example.


Example from form element panel in the CMS.

 

Example form element.

 

Number

Syntax Example:

custom-type=number;

Description:

This input can be used to create a field bound by these additional Advanced field options:

Name Description Example
max Set the maximum number allowed for the input.
max=10;
min Set the minimum number allowed for the input.
min=1;
step Set the step size for the HMTL5 up/down arrows in the input.
step=0.5

 

Here is a simple number example.

 

Time

Syntax Example:

custom-type=time;

Description:

Use this custom type to provide users with a time-of-day chooser. This input can be used to create a field bound by these additional Advanced field options:

Name Description Example
timepicker-scroll-default

Specify whether or not to scroll the chooser to the user's current time.

The default value for this is true.

timepicker-scroll-default=false;

 

Here is a simple example.

 

URL

Syntax Example:

custom-type=url;

Description:

This creates an input styled for a URL.

Here is an example.

 
 

 

Zipcode

Syntax Example:

custom-type=zipcodeUS;

Description:

This input can be used to create a field for users to enter United States zipcodes.

Here is a simple example.

 
Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request