Form Layouts

Putting all the form elements together. Alternative layouts and backgrounds.

Jump to section: All Together, Form Design Options, Form Design Options, Multi-column Grid Layouts, and Single-line Flex Layouts.

All Together

<form class="form form_layout-grid form_color-default form_border">
	<div class="field-group">	
		<label class="label">Name</label>
		<input type="text" class="input" placeholder="Type Text">
	</div>
	<div class="field-group">	
		<label class="label">Email</label>
		<input type="email" class="input" placeholder="Type Text">
	</div>
	<div class="button-group">	
		<button type="submit" class="button button_color-theme">Click Me</button>
		<button type="button" class="button button_color-default">Cancel</button>
	</div>	
</form>

Form Design Options

A few default style choices include: a 1px solid border, drop shandow, and rounded corners. These classes can be used on a form tag or on a div within the form. Colors determined by a separate color class, .form_color-default provides a basic gray color scheme. The block class .form at this stage just provides padding (useful for layouts with borders and shadows), and provides context for the other classes, but is not required on all form elements.

<form class="form form_color-default form_border">
	<!-- form content -->
</form>

<form class="form form_color-default form_shadow form_rounded">
	<!-- form content -->
</form>

Form Text Options

Section headings available with .form__heading, useful for labeling groups of form fields.

For label qualifiers (like optional, required) use .label__helper.

For additional information, use .field-group__description.

<form class="form form_color-default form_border">
	<div class="form__heading">Fieldset Name</div>
	
	<div class="field-group">
		<label class="label">
			Name
			<span class="label__helper">(optional)</span>
		</label>
		<input type="text" class="input" placeholder="Type name">
		<div class="field-group__validation">Error</div>
	</div>

	<div class="field-group">
		<label class="label">Email</label>
		<p class="field-group__description">More info about this field</p>
		<input type="email" class="input" placeholder="Enter email">
	</div>
</form>

Multi-column Grid Layouts

CSS Grid does an interesting thing where it can calculate columns needed depending on the properties of the elements inside of a grid element. In this case we're using the grid-column property with a span value on the fields to build a unique grid. With this method the max number of columns is based on the element with the largest span. In this example, since we have an element with span 4, there are four columns.

Use .form_layout-grid on the parent element. On the children, usually .field-group and .button-group, add .form_layout-grid__span-# where # is any value 1-4. If a form or set of fields requires more than four columns, chances are the design of the form needs rethinking. As forms grow in complexity opt for custom css solutions.

Order of the elements is determined by html, so which "row" the element appears in depends on the number of ocolumns and the number of columns each element spans (i.e. it is possible to create gaps if the elements don't "fit", like if a span-4 follows a span-2 in a four column layout).

Since the default behavior of an element is to span one column, .form_layout-grid__span-1 is not required.

<form class="form form_color-default form_layout-grid form_shadow">
	<div class="field-group">
		<label class="label">Default</label>
		<input type="text" class="input">	
	</div>							
	<div class="field-group form_layout-grid__span-1">
		<label class="label">__span-1</label>
		<input type="text" class="input">	
	</div>
	<div class="field-group form_layout-grid__span-2">
		<label class="label">__span-2</label>
		<input type="text" class="input">	
	</div>	

	<div class="field-group form_layout-grid__span-3">
		<label class="label">__span-3</label>
		<input type="text" class="input">	
	</div>	
	<div class="field-group form_layout-grid__span-1">
		<label class="label">__span-1</label>
		<input type="text" class="input">	
	</div>

	<div class="field-group form_layout-grid__span-2">
		<label class="label">__span-2</label>
		<input type="text" class="input">	
	</div>

	<div class="field-group form_layout-grid__span-4">
		<label class="label">__span-4</label>
		<input type="text" class="input">	
	</div>	

	<div class="button-group form_layout-grid__span-4">
		<button class="button button_color-default">Button</button>
	</div>
</form>

Single-line Flex Layouts

Typically used when we have a form with only a few elements and we want it to take up as little vertical space as possible. Adding class .form_layout-flex__noflex to an element inside the layout will prevent it from line wrapping (which may be desireable in labels and buttons).

<form class="form form_layout-flex form_color-default">
	<label class="label">Search</label>
	<input type="text" class="input" placeholder="Type Text">
	<button type="button" class="button button_color-theme form_layout-flex__noflex">Click Me</button>			
</form>

<form class="form form_layout-flex form_color-default">
	<label class="label form_layout-flex__noflex">Enter Credit Card Number</label>

	<input type="number" class="input">
	<!-- x3 ... etc -->

	<button type="button" class="button button_color-theme">Submit</button>
</form>

<form class="form form_layout-flex">
	<label class="form_layout-flex__noflex">Choose a number</label>
	<select class="select max-width-100">
		<option>1</option>
		<!-- ... -->
	</select>	
	<input class="input" type="text" placeholder="Type Text">
</form>

.form_layout-flex-column, an alternative to the single column grid layout (sometimes necessary with rude elements that don't resize like Google's reCaptcha)

<form class="form form_layout-flex-column form_color-default">
	<div class="field-group">
		<label class="label">Username</label>
		<input class="input" type="text" name="form-login" autocomplete="off" placeholder="Username or email address"  />
	</div>
	<div class="field-group"> 
		<label class="label">Password</label>
		<input class="input" type="password" name="form-pass" autocomplete="off" />
	</div>
	<div class="button-group">
		<button type="submit" name="Submit5" value="Log In" class="button button_rounded button_color-default">Log in</button>
	</div> 
</form>