lundi, juillet 23, 2018
[stack_hero image= »38″]

Form Elements

These modular elements can be readily used and customized across pages and in different blocks.


Explore all of Stack’s modular elements
at the Element Index Page →

[/stack_hero]
[vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Standard Inputs

Common inputs such as text, email, telephone, password, address etc. Add the class .validate-required if the input is required in the form.

Alternatively use the <label> tag before an input for greater user assistance.

[/stack_boxed_content]
[contact-form-7 id= »20″ title= »Contact form 1″]
[/vc_section][vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Checkbox Inputs

Wrap checkbox inputs in the input-checkbox element for a more stylish option. Alternatively, place a span directly after to group the two for visual usability

[/stack_boxed_content]
[contact-form-7 id= »117″ title= »Checkbox Inputs »]
[/vc_section][vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Radio Inputs

Wrap radio inputs in the input-radio element for a more stylish option. Use in conjunction with the <label> tag.

[/stack_boxed_content]
[contact-form-7 id= »120″ title= »Radio Inputs »]
[/vc_section][vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Select Inputs

Wrap radio inputs in the input-select element for a more theme-consistent stylish option.

[/stack_boxed_content]
[contact-form-7 id= »123″ title= »Select Inputs »]
[/vc_section][vc_section]
[stack_boxed_content padding= »boxed–lg » background= »bg–secondary »]

Formatting Forms

Using the Bootstrap column classes, you can easily control the widths of the inputs in your form.

The below code would render a form with two equally sized (six columns) inputs in two adjacent columns.

[/stack_boxed_content]
[contact-form-7 id= »126″ title= »Full Form »]
[/vc_section]

Looking for styled form sections?

or try the admin demo ↗