Gentelella | Form | Website Design Demo

Form Elements

Form Design different form elements

- Settings 1
- Settings 2

First Name *

Last Name *

Middle Name / Initial

Gender

Male Female

Date Of Birth *

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Form Design different form elements

- Settings 1
- Settings 2

Default Input

Disabled Input

Read-Only Input

Date Of Birth *

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Star Rating

- Settings 1
- Settings 2

Star Ratings Hover and click on a star

You gave a rating of 0 star(s)

Also you can give a default rating by adding attribute data-rating

You gave a rating of 4 star(s)

Registration Form Click to validate

- Settings 1
- Settings 2

Full Name * : Email * : Gender *:

M: F:

Hobbies (2 minimum):

Skiing
Running
Eating
Sleeping

Heard us by *: Message (20 chars min, 100 max) :
Validate form

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Form Basic Elements different form elements

- Settings 1
- Settings 2

Default Input

Disabled Input

Read-Only Input

Date Of Birth *

Password

AutoComplete

Select

Select Custom

Select Grouped

Select Multiple

Input Tags

Checkboxes and radios
Normal Bootstrap elements

Option one. select more than one options

Option two. select more than one options

Option one. only select one option

Option two. only select one option

Checkboxes and radios
Normal Bootstrap elements

Checked

Unchecked

Disabled

Disabled & checked

Checked

Unchecked

Disabled

Disabled & Checked

Switch

Checked

Unchecked

Disabled

Disabled Checked

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Form Buttons Sessions

- Settings 1
- Settings 2

Button addons

Action
Another action
Something else here
Separated link

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Text areasSessions

- Settings 1
- Settings 2

Huge
Normal
Small

Resizable Text area

Form Input Grid form input

- Settings 1
- Settings 2

Form Design different form elements

- Settings 1
- Settings 2

Horizontal labels

Using the grid system you can control the position of the labels. The form example below has the col-md-10 which sets the width to 10/12 and center-margin which centers it.

First Name *

Last Name *

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Vertical labels

For making labels vertical you have two options, either use the apropiate grid .col- class or wrap the form in the form-vertical class.

Email address

Password

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Inline Form

Add .form-inline to your form (which doesn't have to be a

) for left-aligned and inline-block controls.

Email address

Remember me

This form is a visual demo. No booking, payment or personal data is submitted. Contact Guizero Technology for website development.

Demo only. No data submitted. Use Contact in the bottom-right corner.

Gentelella website demo

John Doe

Form Elements

Form Design different form elements

Form Design different form elements

Star Rating

Star Ratings Hover and click on a star

Registration Form Click to validate

Form Basic Elements different form elements

Form Buttons Sessions

Text areasSessions

Form Input Grid form input

Form Design different form elements

Horizontal labels

Vertical labels

Inline Form

Gentelella website demo

John Doe

General

Live On

Form Elements

Form Design different form elements

Form Design different form elements

Star Rating

Star Ratings Hover and click on a star

Registration Form Click to validate

Form Basic Elements different form elements

Form Buttons Sessions

Text areasSessions

Form Input Grid form input

Form Design different form elements

Horizontal labels

Vertical labels

Inline Form