Gravity Forms Bootstrap 5 Kitchen Sink Demo

This form contains all fields available in the Gravity Forms plugin configured with different options. It is intended to be used for testing your custom CSS layout and styling. The default Gravity Forms styling has been replaced using Gravity Forms Bootstrap Hooks and Gravity Forms Bootstrap styling. This Gravity Forms Kitchensink is also available on Github.

Step 1 of 3 - General

Bootstrap columns.

Use Bootstrap column classes for layout.

Column 3/12

Column 4/12

Column 5/12

Column 7/12

Column 6/12

Column 7/12

Column 5/12

Column 8/12

Column 4/12

Column 9/12

Column 3/12

Bootstrap sizes.

Don't forget to set the input size to Medium! Gravity Forms field sizes are linked to Bootstrap input sizes. Change this value under the 'Appearance' settings.

Single Line Text

Single Line Text small

Single Line Text

Single Line Text standard

Single Line Text

Single Line Text large

Drop Down

Drop Down small

Drop Down

Drop Down standard

Drop Down

Drop Down large

Paragraph Text

Paragraph Text small

Paragraph Text

Paragraph Text medium

Paragraph Text

Paragraph Text large

Descriptions, Labels & Sub-labels.

This sections tests descriptions & (sub-)labels with their respective placement.

Single Line Text

Single Line Text with description.

Single Line Text

Single Line Text with description placement above fields.

Single Line Text

Single Line Text with placeholder.

Single Line Text with label visibility hidden and 20 Maximum Characters.

Name

First Last

Name Field with sub-labels below inputs.

Name

First Last

Name Field with sub-labels above inputs.

Name

Name Field with sub-labels & descriptions above inputs.

First Last

Name Field with placeholders & Labels & Sub-labels hidden.

jQuery Chosen & Datepicker

This sections tests the Datepicker and the jQuery Chosen display.

Drop Down

Drop Down with the 'Enhanced User Interface' enabled. This component uses jQuery Chosen CSS.

Multi Select

Multi Select with the 'Enhanced User Interface' enabled. This component uses jQuery Chosen CSS.

Date

This is a Date field with input type set to Date Picker. This component uses Date Picker CSS.

Standard Fields

This section features all Standard Fields.

Single Line Text

This is a Single Line Text field.

Paragraph Text

This is a Paragraph Text field

Paragraph Text

This is a Paragraph Text field using the Rich Text Editor.

Drop Down

This is a Drop Down field.

Number

This is a Number field

Checkboxes

First Choice

Second Choice

Third Choice

This is a Checkboxes field with 'Select all' option enabled.

Radio Buttons

First Choice

Second Choice

Third Choice

Other

This is a Radio Buttons field with 'Other' option enabled.

This is an HTML Field.

It can display any html. An alert box for example:

Hello world!

Advanced Fields

This section features all Advanced Fields.

Name Field

Name

First Last

This is a Name Field with Sub-fields above.

Name

This is a Name Field with placeholders & Sub-fields hidden.

Name

Prefix First Middle Last Suffix

This is a Name Field with all fields enabled.

Date Field

Date

Date Drop Down

Date

Month

Day

Year

Date Field

Date

Datepicker with icon

Time Field

Time

This is a Time field with 24 hour format.

Time

This is a Time field with 12 hour format and hidden sub-labels.

Phone Field

Phone

This is a small Phone Field using international formatting

Phone

This is a Phone Field using custom formatting

Address Field

Address

Street Address ZIP / Postal Code City

This is an Address Field with some fields enabled and sublabel above inputs.

Address

Same as previous

This is an Address Field with all fields enabled, placeholders and hidden subfields.

Website Field

Website

Field Size small

Website

Field Size standard

Website

Field Size large

Email Field

This is an Email field.

Enter Email Confirm Email

This is an Email field with Email Confirmation enabled.

File Upload Field

File Upload

Max. file size: 2 MB.

This is a File Upload field.

File Upload

Accepted file types: jpg, gif, png, pdf, Max. file size: 2 MB.

This is a File Upload field with 'Maximum File Size' and 'Allowed file extensions' enabled.

File Upload Multi-File

Drop files here or

Accepted file types: jpg, gif, png, pdf, Max. file size: 2 MB, Max. files: 4.

This is a File Upload field with 'Multi-File Upload' enabled and allowed extensions.

List Field

List

This is a list field.

Column 1

Column 2

This is a list field with multiple columns and hidden label.

List

This is a list field with multiple columns and description above.

Column 1

Column 2

Column 3

Multi Select Field

Multi Select

This is a small Multi Select field

Multi Select

This is a standard Multi Select field

Multi Select Enhanced

This is a Multi Select field with 'enhanced user interface' enabled.

Gravity Forms Bootstrap 5

Bootstrap columns.

Bootstrap sizes.

Descriptions, Labels & Sub-labels.

jQuery Chosen & Datepicker

Standard Fields

This is an HTML Field.

Advanced Fields

Name Field

Date Field

Time Field

Phone Field

Address Field

Website Field

Email Field

File Upload Field

List Field

Multi Select Field

Consent Field

Post Fields

Pricing Fields