Elements – Form Elements

[vc_row full_width=»stretch_row»][vc_column][stack_hero image=»38″][vc_column_text]

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 →[/vc_column_text][/stack_hero][/vc_column][/vc_row][vc_section][vc_row css=».vc_custom_1485825445121{margin-bottom: 30px !important;}»][vc_column width=»1/2″][stack_boxed_content padding=»boxed–lg» background=»bg–secondary»][vc_column_text]

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.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»1/2″][contact-form-7 id=»20″ title=»Contact form 1″][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=».vc_custom_1485825445121{margin-bottom: 30px !important;}»][vc_column width=»1/2″][stack_boxed_content padding=»boxed–lg» background=»bg–secondary»][vc_column_text]

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[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»1/2″][contact-form-7 id=»117″ title=»Checkbox Inputs»][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=».vc_custom_1485825445121{margin-bottom: 30px !important;}»][vc_column width=»1/2″][stack_boxed_content padding=»boxed–lg» background=»bg–secondary»][vc_column_text]

Radio Inputs

Wrap radio inputs in the input-radio element for a more stylish option. Use in conjunction with the <label> tag.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»1/2″][contact-form-7 id=»120″ title=»Radio Inputs»][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=».vc_custom_1485825445121{margin-bottom: 30px !important;}»][vc_column width=»1/2″][stack_boxed_content padding=»boxed–lg» background=»bg–secondary»][vc_column_text]

Select Inputs

Wrap radio inputs in the input-select element for a more theme-consistent stylish option.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»1/2″][contact-form-7 id=»123″ title=»Select Inputs»][/vc_column][/vc_row][/vc_section][vc_section][vc_row css=».vc_custom_1485825445121{margin-bottom: 30px !important;}»][vc_column width=»1/2″][stack_boxed_content padding=»boxed–lg» background=»bg–secondary»][vc_column_text]

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.[/vc_column_text][/stack_boxed_content][/vc_column][vc_column width=»1/2″][contact-form-7 id=»126″ title=»Full Form»][/vc_column][/vc_row][/vc_section][vc_row][vc_column][vc_column_text el_class=»text-center»]

Looking for styled form sections?

or try the admin demo ↗

[/vc_column_text][/vc_column][/vc_row]