ExpressionEngine®
Style Guide

Interaction Guidelines

Forms are used for settings, and creation/editing of content.

Alerts

Form alerts should always be inline alerts, and they should always appear below the form heading.

Validation

Form validation should be on input, with a back up of on submit.

When submitting a settings form

  • Success alerts should appear at the top of the form, on save.
  • Error alerts should appear at the top of the form, on submit.

When submitting a content creation, or edit form

  • Success alerts should appear at the top of the content listing, and the new item(s) should be highlighted, on save.
  • Error alerts should appear at the top of the form, on submit.

Error indication

All erred fields should be marked invalid, and given a short error reason. e.g. "This field cannot be blank"

Standard Form

To create a form use form.settings.

All .settings forms must include a title, use a h1.

You may use .settings on a div instead, if you need to move the form tag up the DOM. e.g. wrapping multiple .box wraps into a single form.

Note: The h1 must be placed outside the .settings tag.

HTML

<h1>Form Title</h1>
<form class="settings">
	...
</form>

<form>
	<h1>Form Title</h1>
	<div class="settings">
		...
	</div>
	<h1>Form Title 2</h1>
	<div class="settings">
		...
	</div>
</form>

Visual Output

Form Title

Form Title

Form Title 2

back to the top


Sub Headings Requires: Standard Form

A form can have sub headings.

Use an h2, placed inside the .settings.

Usage

For organizing long forms, and grouping similar settings together.

HTML

<h1>Form Title</h1>
<form class="settings">
	<h2>Sub heading</h2>
</form>

Visual Output

Form Title

Sub heading

back to the top


Required Field Heading Requires: Standard Form

If your form has required fields, use span.req-title placed inside the h1.

The text must be “Required Fields”.

See also: Setting Field: required.

HTML

<h1>Form Title <span class="req-title">Required Fields</span></h1>
<form class="settings">
	...
</form>

Visual Output

Form Title Required Fields

back to the top


Errors Requires: Standard Form

Use alert inline messages to indicate errors with form submissions.

HTML

<h1>Form Title</h1>
<form class="settings">
	<div class="alert inline issue">
		<h3>This is an error.</h3>
		<p>Error, please do such and such to resolve.</p>
	</div>
</form>

Visual Output

Form Title

This is an error.

Error, please do such and such to resolve.

back to the top


Fieldset

To add a form element use fieldset.col-group, and div.setting-text and div.setting-field as children.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>...</h3>
			<em>...</em>
		</div>
		<div class="setting-field col w-8 last">
			...
		</div>
	</fieldset>
</form>

Visual Output

Form Title

...

...
...

back to the top


Form Controls Requires: Fieldset

To create form controls, use fieldset.form-ctrls.

Use input.btn to create action buttons.

Use input.btn.disable when a form has errors.

Optionally, on submission, use input.btn.work to show the form working.

HTML

<h1>Form Title</h1>
<form class="settings">
	...
	<fieldset class="form-ctrls">
		// standard button
		<input class="btn" type="submit" value="Save [item]">
		// errored form
		<input class="btn disable" type="submit" value="Errors Found">
		// working form
		<input class="btn work" type="submit" value="Saving...">
	</fieldset>
</form>

Visual Output

Form Title

back to the top


Secure Form Controls Requires: Fieldset

To create secure form controls, use div.password-req inside the fieldset.form-ctrls.

This forces the user to enter their password, to submit the form.

Usage

For when a form cannot be submitted without an administrator password.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="form-ctrls">
		<div class="password-req required">
			<div class="setting-txt col w-8">
				<h3>Current password</h3>
				<em>You <b>must</b> enter your password to save.</em>
			</div>
			<div class="setting-field col w-8 last">
				<input class="required" type="password" value="">
			</div>
		</div>
		<input class="btn" type="submit" value="Save [item]">
		<input class="btn disable" type="submit" value="Errors Found">
		<input class="btn work" type="submit" value="Saving...">
	</fieldset>
</form>

Visual Output

Form Title

Current password

You must enter your password to save.

back to the top


Setting text

Use div.setting-text containing an h3 to label the field, and an em to hold the fields instructions.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			...
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.
...

back to the top


Setting Field

div.setting-field contains the form element input, textarea, select, etc…

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Setting Field: auto saved Requires: Setting Field

To mark a setting field as auto saved, use fieldset.col-group.auto-saved

Optionally you can add an em under the input in div.setting-field to add a message.

Usage

For marking a field as being auto saved.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group auto-saved">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
			<em>Auto saved content</em>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.
Auto saved content

back to the top


Setting Field: errors Requires: Setting Field

To mark a setting field as an error, use fieldset.col-group.invalid

You must add an em under the input in div.setting-field to add an message.

Usage

For marking a field with invalid content.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group invalid">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
			<em>Error message</em>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.
Error message

back to the top


Setting Field: warning Requires: Setting Field

To mark a setting field as auto saved, use fieldset.col-group.warned

Optionally you can add an em under the input in div.setting-field to add a message.

Usage

For marking a field with a warning, not invalid content, but potentially harmful content.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group warned">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
			<em>Warning content</em>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.
Warning content

back to the top


Setting Field: required Requires: Setting Field

To mark a setting field as required, use fieldset.col-group.required

If a form has any required fields, you must use a Required Field Heading.

Usage

For marking a field as required to submit the form.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group required">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Setting Field: security caution Requires: Setting Field

To mark a setting field as potentially decreasing site security, use fieldset.col-group.security-caution

Usage

For marking a field as a potential security issue.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group security-caution">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Setting Field: security enhance Requires: Setting Field

To mark a setting field as potentially increasing site security, use fieldset.col-group.security-enhance

Usage

For a marking a field for potential security enhancement.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group security-enhance">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Input: text Requires: Setting Field

Use input type=“text” for most fields.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="text" value="">
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Input: file Requires: Setting Field

Use input type=“file” for upload fields.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<input type="file" value="">
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Input: checkboxes Requires: Setting Field

Use input type=“checkbox” wrapped in a label.choice for checkboxes.

Note: More than two choices? Use a multi select instead.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<label class="choice mr chosen"><input type="checkbox" checked="checked"> Choice</label>
			<label class="choice"><input type="checkbox"> Choice</label>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Input: radios Requires: Setting Field

Use input type=“radio” wrapped in a label.choice for radios.

If radios are yes or no, use a class of label.choice.yes and label.choice.no respectively.

Note: More than two choices? Use a multi select instead.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<label class="choice mr chosen yes"><input type="radio" checked="checked"> yes</label>
			<label class="choice no"><input type="radio"> no</label>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Select Drop Down Requires: Setting Field

Use select for drop down menus.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<select>
				<option>option</option>
				<option>option</option>
				<option>option</option>
				<option>option</option>
			</select>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Textarea Requires: Setting Field

Use textarea for large text inputs.

Leave the cols=”“ and rows=”“ attributes empty.

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<textarea cols="" rows=""></textarea>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Multi Select Requires: Setting Field

Use input type=“checkbox” or input type=“radio” wrapped in a label.choice.block for multi select options.

Two or less choices? Use checkboxes, or radios instead.

Note: If the total possible choices are unknown, wrap the labels in a div.scroll-wrap

Usage

Multi selects should be used anywhere you would use radios, or checkboxes but have 3 to (n) choices.

If there are 10 to (n) choices, you must wrap your .choices in a div.scroll-wrap

HTML

<h1>Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<div class="multi-select">
				<label class="ctrl-all"><input type="checkbox"> <span>select all</span></label>
				<div class="scroll-wrap">
					<label class="choice block chosen">
						<input type="checkbox" checked="checked"> Option <i>&mdash; Instructions</i>
					</label>
					<label class="choice block">
						<input type="checkbox"> Option <i>&mdash; Instructions</i>
					</label>
				</div>
			</div>
		</div>
	</fieldset>
</form>

Visual Output

Form Title

Field Label

Field Instructions.

back to the top


Publish form

To create a publish form, use div.box.publish.

HTML

<div class="box publish">
	<h1>Form Title</h1>
	<form class="settings">
		...
	</form>
</div>

Visual Output

Publish Form Title

...

back to the top


Input: date Requires: Publish form

To create a date field, use rel=“date-picker” on a standard input type=“text”

HTML

<h1>Publish Form Title</h1>
<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<label class="choice mr chosen"><input type="radio" checked="checked"> Localized</label>
			<label class="choice"><input type="radio"> Fixed</label>
			<input type="text" value="" rel="date-picker">
		</div>
	</fieldset>
</form>

Visual Output

Publish Form Title

Field Label

Field Instructions.

back to the top


Input: upload Requires: Publish form

To create a image upload file field, use a.btn.action.m-link with rel=“modal-file” placed inside a p.solo-btn

Once a file has been chosen the user should see a figure.file-chosen containing the image thumbnail, and a .toolbar with .edit and .remove tools.

HTML

<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<p class="solo-btn"><a class="btn action m-link" href="#" rel="modal-file">upload file</a></p>
		</div>
	</fieldset>
</form>

<form class="settings">
	<fieldset class="col-group">
		<div class="setting-txt col w-8">
			<h3>Field Label</h3>
			<em>Field Instructions.</em>
		</div>
		<div class="setting-field col w-8 last">
			<figure class="file-chosen">
				<img src="/asset/sg/img/avatar-example.jpg" alt="current avatar">
				<ul class="toolbar">
					<li class="edit"><a href="" title="edit"></a></li>
					<li class="remove"><a href="" title="remove"></a></li>
				</ul>
			</figure>
		</div>
	</fieldset>
</form>

Visual Output

Publish Form Title

Field Label

Field Instructions.

Publish Form Title

Field Label

Field Instructions.
current avatar

back to the top


Textarea with extras Requires: Publish form

To create format options for a textarea, use textarea.has-format-options.

Below the textarea.has-format-options use div.format-options, to contain a toolbar.

Above the textarea use ul.toolbar.html-btns to add HTML formatting buttons.

Note: div.setting-text and div.setting-field should have .w-16 for this field type in a publish form.

HTML

<ul class="toolbar html-btns">
	<li class="html-bold"><a href="" title=".html-bold"></a></li>
	<li class="html-italic"><a href="" title=".html-italic"></a></li>
	<li class="html-order-list"><a href="" title=".html-order-list"></a></li>
	<li class="html-order-list"><a href="" title=".html-order-list"></a></li>
	<li class="html-link"><a href="" title=".html-link"></a></li>
	<li class="html-upload"><a href="" title=".html-upload"></a></li>
	<li class="html-quote"><a href="" title=".html-quote"></a></li>
</ul>
<textarea class="has-format-options" cols="" rows=""></textarea>
<div class="format-options">
	<ul class="toolbar">
		<li class="upload"><a class="m-link" href="" title="upload file" rel="modal-file"></a></li>
		<li class="emoji last"><a href="" title="open emoji"></a></li>
		<li class="form-element">
			<select>
				<option>Plain Text</option>
				<option>Markdown</option>
				<option>HTML</option>
			</select>
		</li>
	</ul>
</div>

Visual Output

Publish Form Title

Field Label

Field Instructions.

back to the top


Textarea with RTE Requires: Publish form

To create a RTE, use textarea.has-rte.

Above the textarea.has-rte add a RTE toolbar.

Note: div.setting-text and div.setting-field should have .w-16 for this field type in a publish form.

HTML

<ul class="toolbar rte">
	<li class="rte-bold"><a href="" title="make bold"></a></li>
	<li class="rte-italic"><a href="" title="make italic"></a></li>
	<li class="rte-quote"><a href="" title="create blockquote"></a></li>
	<li class="rte-list"><a href="" title="create unordered list"></a></li>
	<li class="rte-order-list"><a href="" title="create ordered list"></a></li>
	<li class="rte-link"><a href="" title="create hyperlink"></a></li>
	<li class="rte-upload last"><a href="" title="upload file"></a></li>
	<li class="rte-elements">
		<select>
			<option>Paragraph</option>
			<option>Heading 1</option>
			<option>Heading 2</option>
			<option>Heading 3</option>
			<option>Heading 4</option>
			<option>Heading 5</option>
			<option>Heading 6</option>
		</select>
	</li>
	<li class="rte-view"><a href="" title="view code"></a></li>
</ul>
<textarea class="has-rte" cols="" rows=""></textarea>

Visual Output

Publish Form Title

Field Label

Field Instructions.

back to the top


Relationships - Single Requires: Publish form

A single relationships field uses a special one column multi select.

HTML

<div class="box publish">
	<h1>Publish Form Title</h1>
	<form class="settings">
		<fieldset class="col-group">
			<div class="setting-txt col w-8">
				<h3>Field Label</h3>
				<em>Field Instructions.</em>
			</div>
			<div class="setting-field col w-8 last">
			<div class="col w-16 relate-wrap">
				<h4>Item to <strong>relate with</strong> this entry.</h4>
				<div class="relate-actions">
					<div class="filters">
						<ul>
							<li>
								<a class="has-sub" href="">channel <span class="faded">(Blog Entries)</span></a>
								<div class="sub-menu">
									<fieldset class="filter-search">
										<input type="text" value="" placeholder="filter channels">
									</fieldset>
									<ul>
										<li><a href="">[Allowed Channel]</a></li>
										<li><a href="">[Allowed Channel]</a></li>
										<li><a href="">[Allowed Channel]</a></li>
										<li><a href="">[Allowed Channel]</a></li>
										<li><a href="">[Allowed Channel]</a></li>
									</ul>
								</div>
							</li>
						</ul>
					</div>
					<input class="relate-search" type="text" value="" placeholder="Search available entries">
				</div>
				<div class="scroll-wrap">
					<label class="choice block chosen">
						<input type="radio" checked="checked"> [entry_title] <i>&mdash; [channel_name]</i>
					</label>
					<label class="choice block">
						<input type="radio"> [entry_title] <i>&mdash; [channel_name]</i>
					</label>
					<label class="choice block">
						<input type="radio"> [entry_title] <i>&mdash; [channel_name]</i>
					</label>
					<label class="choice block">
						<input type="radio"> [entry_title] <i>&mdash; [channel_name]</i>
					</label>
					<label class="choice block">
						<input type="radio"> [entry_title] <i>&mdash; [channel_name]</i>
					</label>
				</div>
				<div class="relate-wrap-chosen">
					<label class="choice block chosen relate-manage">
						<a href="" title="Remove Relationship"></a> [entry_title] <i>&mdash; [channel_name]</i>
					</label>
				</div>
			</div>
			</div>
		</fieldset>
	</form>
</div>

Visual Output

Publish Form Title

Field Label

Field Instructions.

Item to relate with this entry.

Field Label (empty)

Field Instructions.

Item to relate with this entry.

No entries found

back to the top


Relationships - Many Requires: Publish form

A many relationships field uses a special two column multi select.

HTML

<div class="box publish">
	<h1>Publish Form Title</h1>
	<form class="settings">
		<fieldset class="col-group">
			<div class="setting-txt col w-16">
				<h3>Field Label</h3>
				<em>Field Instructions.</em>
			</div>
			<div class="setting-field col w-16 last">
				<div class="col w-8 relate-wrap">
					<h4>Items to <strong>relate with</strong> this entry.</h4>
					<div class="relate-actions">
						<div class="filters">
							<ul>
								<li>
									<a class="has-sub" href="">channel <span class="faded">(Blog Entries)</span></a>
									<div class="sub-menu">
										<fieldset class="filter-search">
											<input type="text" value="" placeholder="filter channels">
										</fieldset>
										<ul>
											<li><a href="">[Allowed Channel]</a></li>
											<li><a href="">[Allowed Channel]</a></li>
											<li><a href="">[Allowed Channel]</a></li>
											<li><a href="">[Allowed Channel]</a></li>
											<li><a href="">[Allowed Channel]</a></li>
										</ul>
									</div>
								</li>
							</ul>
						</div>
						<input class="relate-search" type="text" value="" placeholder="Search available entries">
					</div>
					<div class="scroll-wrap">
						<label class="choice block chosen">
							<input type="checkbox" checked="checked"> [entry_title] <i>&mdash; [channel_name]</i>
						</label>
						<label class="choice block">
							<input type="checkbox"> [entry_title] <i>&mdash; [channel_name]</i>
						</label>
						<label class="choice block">
							<input type="checkbox"> [entry_title] <i>&mdash; [channel_name]</i>
						</label>
						<label class="choice block">
							<input type="checkbox"> [entry_title] <i>&mdash; [channel_name]</i>
						</label>
						<label class="choice block">
							<input type="checkbox"> [entry_title] <i>&mdash; [channel_name]</i>
						</label>
					</div>
				</div>
				<div class="col w-8 relate-wrap last">
					<h4>Items <strong>related to</strong> this entry.</h4>
					<div class="relate-actions">
						<input class="relate-search" type="text" value="" placeholder="Search related entries">
					</div>
					<div class="scroll-wrap">
						<label class="choice block chosen relate-manage">
							<span class="relate-reorder"></span>
							<a href="" title="Remove Relationship"></a> [entry_title] <i>&mdash; [channel_name]</i>
						</label>
					</div>
				</div>
			</div>
		</fieldset>
	</form>
</div>

Visual Output

Publish Form Title

Field Label

Field Instructions.

Items to relate with this entry.

Items related to this entry.

Field Label (empty)

Field Instructions.

Items related to this entry.

No entries related

back to the top


Grid Requires: Publish form

For a grid field use fieldset.grid-publish.

The grid form fields are all placed within a table.grid-input-form.

Below you can see an example of an empty grid, and a grid with a single row added.

HTML

<div class="box publish">
	<h1>Publish Form Title</h1>
	<form class="settings">
		<fieldset class="col-group grid-publish">
			<div class="setting-txt col w-16">
				<h3>Field Label</h3>
				<em>Field Instructions.</em>
			</div>
			<div class="setting-field col w-16 last">
				<div class="tbl-wrap">
					<table class="grid-input-form" cellespacing="0">
						<tr>
							<th>Text Input <em class="grid-instruct">Instructions</em></th>
							<th>Textarea <em class="grid-instruct">Longer Instructions</em></th>
							<th>Textarea - RTE <em class="grid-instruct">These Instructions are a bit longer</em></th>
							<th>File <em class="grid-instruct">Instructions like these</em></th>
							<th>Checkboxes <em class="grid-instruct">Instructions to check the right boxes, are needed here</em></th>
							<th>Radios <em class="grid-instruct">Instructions, radios</em></th>
							<th>Multi-Select <em class="grid-instruct">Instructions, select multiple things here</em></th>
							<th>Drop Down <em class="grid-instruct">Instructions drop. down.</em></th>
							<th>Relationship <em class="grid-instruct">Instructions for using this relationship grid field.</em></th>
							<th>Relationships <em class="grid-instruct">Instructions for using this relationship grid field.</em></th>
						</tr>
						<tr class="no-results">
							<td class="solo" colspan="10">No rows created <a class="btn action" href="">Add new Row</a></td>
						</tr>
					</table>
				</div>
			</div>
		</fieldset>
	</form>
</div>

Visual Output

Publish Form Title

Field Label

Field Instructions.
Text Input Instructions Textarea Longer Instructions Textarea - RTE These Instructions are a bit longer File Instructions like these Checkboxes Instructions to check the right boxes, are needed here Radios Instructions, radios Multi-Select Instructions, select multiple things here Drop Down Instructions drop. down. Relationship Instructions for using this relationship grid field. Relationships Instructions for using this relationship grid field.

upload file

Item to relate with this entry.

Items to relate with this entry.

Items related to this entry.

Field Label (empty)

Field Instructions.
Text Input Instructions Textarea Longer Instructions Textarea - RTE These Instructions are a bit longer File Instructions like these Checkboxes Instructions to check the right boxes, are needed here Radios Instructions, radios Multi-Select Instructions, select multiple things here Drop Down Instructions drop. down. Relationship Instructions for using this relationship grid field. Relationships Instructions for using this relationship grid field.
No rows created Add new Row
July

August 2014

Sept
su mo tu we th fr sa
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31
Aug

September 2014

Oct
su mo tu we th fr sa
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30