Forms: Available Controls

Includes single, standalone controls as well as field collections.

There was an error with this form.

Compellingly scale enterprise-wide internal or organic sources with client-centered alignments. Interactively grow team building content whereas cross-platform convergence. Objectively productize market-driven applications after client-based technologies.

The Field Label Goes Here field is required.
The Field Label Goes Here field must be a valid e-mail address.

Form Title Goes Here

Text Field Has A Really, Really, Really Long Label That Keeps On Going

Text Field (Compact)

Text Field (Disabled)

Text Field

This is some additional text.

Text Field w/ Errors

This is the error message.

This is the text that was there before.

Password Field

Another Form Title Goes Here

Select Menu

Select Menu (Auto-Width)

Select Menu (Disabled)

Textarea

Radio Buttons

Option 1
Option 2
Option 3

This is the error message.

Radio Buttons (Inline)

Option 1
Option 2
Option 3

Radio Buttons (Grid)

Option 1
Option 2
Option 3

Checkboxes

Option 1
Option 2
Option 3

Checkboxes (Inline)

Option 1
Option 2
Option 3

Checkboxes (Grid)

Option 1
Option 2
Option 3

Search fields are wrapped, by JavaScript, within a div with the class of "form-control--search" to help with styling. Default styling uses Font Awesome to add search icon.

Search Field

File Field

Display Image Field

Delete this image

URL Field

Email Field (Single Input)

Email Field (Select)

Email Field (Radio Buttons)

John Smith
Mary Jones
Susan Johnson

Telephone/Fax Field

Telephone/Fax Field w/ Country Code

+ Country Code

Phone Number

Telephone/Fax Field w/ Extension

Phone Number

ext Extension

Telephone/Fax Field w/ Country Code & Extension

+ Country Code

Phone Number

ext Extension

Number Field

Payment Amount Field (Radio Buttons)

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00

Payment Amount Field (Radio Buttons) w/ Custom Amount

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00
Custom Amount

Custom Amount

Payment Amount Field (Radio Buttons) w/ Hidden Amount

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00

This is the message that should be entered if a hidden amount field has been added.

Payment Amount Field (Checkboxes)

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00

Payment Amount Field (Checkboxes) w/ Custom Amount

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00
Custom Amount

Custom Amount

Payment Amount Field (Checkboxes) w/ Hidden Amount

Option 1 - $1.00
Option 2 - $5.00
Option 3 - $10.00

This is the message that should be entered if a hidden amount field has been added.

Payment Amount Field (Select Menu)

Payment Amount Field (Select Menu) w/ Custom Amount

Custom Amount

Payment Amount Field (Select Menu) w/ Hidden Amount

This is the message that should be entered if a hidden amount field has been added.

Payment Amount Field (Custom Value)

Payment Amount Field (Custom Value) w/ Hidden Amount

This is the message that should be entered if a hidden amount field has been added.

Payment Amount Field (Hidden Field Only)

This is the message that should be entered if a hidden amount field has been added. If only a hidden amount field has been added, then this text should be displayed at regular size.

Email Opt-in

Sign me up!

Date & Time Fields

Date Field (Picker)

Date Field (Dropdowns)

/

/

Date Range (Picker)

–

Date Range (Dropdowns)

/

/

–

/

/

Time Field (Picker)

Time Field (Dropdowns)

:

Time Range (Picker)

–

Time Range (Dropdowns)

:

–

:

Date/Time Fields (Picker)

Date & Time Field (Dropdowns)

/

/

:

Date & Time Range (Picker)

-

Date & Time Range (Dropdowns)

/

/

:

–

/

/

:

Name Fields

Name field collections can contain any combination of the following fields: Prefix, First Name, Middle Initial, Last Name, Suffix.

Name Field Collection (First/Last)

First Name

Last Name

Name Field Collection (Prefix/First/Last)

Prefix

First Name

Last Name

Name Field Collection (Prefix/First/Last/Suffix)

Prefix

First Name

Last Name

Suffix

Name Field Collection (Prefix/First/Middle Initial/Last/Suffix)

Prefix

First Name

Middle Initial/Name

Last Name

Suffix

This is the error message.

Name Field Collection (First/Middle Initial/Last)

First Name

Middle Initial/Name

Last Name

Address Fields

Address

Country

Address Line 1

Address Line 2

Address Line 3

City

State

Postal Code

Payment field collections use jQuery.payment to validate form input and provide useful feedback to users.

Payment Fields

Select a Payment Method

Credit Card
Bank Account

Cardholder Name

Credit Card #

Visa MasterCard American Express Discover Diners Club

Expiration Date (MM / YY)

Security Code

Name on Account

First Name

Last Name

Account Type

Checking
Savings

Account Number

Routing Number

Make this a monthly payment?

Yes, bill my card today and on the 29th of every following month.
(If the month doesn't have 29 days, your card will be billed on the last day of the month.)

Make this a monthly payment?

Cover the fee associated with this online transaction?

Yes, I will pay an additional $X.XX to cover the cost of this transaction.

Cover the fee associated with this online transaction?

Surcharge

An additional $X.XX will be added to cover the cost of this transaction.

Drag & Drop File Uploads

Your Files

file1.pdf

file2hasareallylongnamethatkeepsongoingandgoingandgoingandgoingandgoing.zip

file3.jpg

file4.txt

file5.doc

file6.ppt

file7.xls

file8.gif

Clear All Files

Click or drag here to add files