Form Builder Quick Reference

Before You Start

Be comfortable with or brave about HTML
Understand the Online Form HTML Specification document in the Form Builder Documentation
Think through and plan your workflow
Set up your groups in test.forms.northwestern.edu (we assume you have requested access)
- Only group admins can create and manage forms. Organization admins must make themselves an admin of a group first
- A good practice to follow is have one group "own" the form and other groups for the approval processes. For example, a two-step workflow for ordering office supplies might have an "Office Supplies Order - Form Owners" group to manage the workflow and am "Office Supplies Order - Approvers" to approve purchase requests

Starter Template Download

Download OnlineForms-Template.html

Customize Template Metadata

Change "Online Forms" in the <head> <title> to the name of your form
Change "Northwestern University" (or remove it) and "Online Forms" in the <body> <header> to something representative of your unit
Change "Online Form" in the <h1> of the main content region to the name of your form
Optionally customize the <footer> (maybe add another <p>)

Add Sections

Basic Section Code

Just a standard section you can customize

<hr>

<form id="SECTION_IDENTIFIER" class="form-section visiblefromall">
	<h2>SECTION_NAME</h2>
	
	<!-- MORE ROWS AND FIELDS HERE -->
	
	<div class="controls">
		<button type="submit" class="btn btn-hover-success" value="approve" name="submit"><i class="icon-ok"></i> Submit</button>
		<button type="submit" class="btn" value="save" name="submit"><i class="icon-disk"></i> Save as Draft</button>
		<button type="submit" class="btn btn-hover-warning" value="return" name="submit"><i class="icon-turn-left"></i> Return Form</button>
		<button type="submit" class="btn btn-hover-danger" value="reject" name="submit" onclick="if(confirm('Are you sure you want to reject this form?')) {return true;} event.returnValue = false; return false;"><i class="icon-remove"></i> Reject</button>
	</div>
</form>

Signature Section Code

A section that is really just a signature

<hr>

<form id="Signature" class="form-section visiblefromall">
	<h2>Signature</h2>
	<div class="row-fluid">
		<div class="span5">
			<label>Name</label>
			<input type="text" name="name" class="form-autosize required form-autofill-currentuser-displayname">
		</div>
		<div class="span2">
			<label>Date</label>
			<input type="text" name="date" class="form-autosize form-autodate required">
		</div>
	</div>
	<div class="controls">
		<button type="submit" class="btn btn-hover-success" value="approve" name="submit"><i class="icon-ok"></i> Sign</button>
		<button type="submit" class="btn btn-hover-warning" value="return" name="submit"><i class="icon-turn-left"></i> Return Form</button>
		<button type="submit" class="btn btn-hover-danger" value="reject" name="submit" onclick="if(confirm('Are you sure you want to reject this form?')) {return true;} event.returnValue = false; return false;"><i class="icon-remove"></i> Reject</button>
	</div>
</form>

Routing Section Code

If you change the ID of this form section ("Route" in this example) you must change the visiblefrom- class to match ("visiblefrom-Route" in this example)
This section assumes the ID you are assigning is "Approver." If the section you assign has a different ID, change "Approver" to that ID in both the visiblefrom- class (visiblefrom-Approver) and the name of the NetID input field (formcycle-assign-to-netid-Approver)

<form id="Route" class="form-section visiblefrom-Route visiblefrom-Signature form-router">
	<h2>Route to Approver</h2>
	<div class="row-fluid">
		<div class="span2">
			<label>Approver NetID</label>
			<input type="text" name="formcycle-assign-to-netid-Signature" class="form-autosize required">
		</div>
	</div>
	<div class="controls">
		<div class="buttons">
			<button type="submit" class="btn btn-hover-success" value="approve" name="submit"><i class="icon-arrow-right"></i> Route</button>
		</div>
	</div>
</form>

Sign or Route Section Code

Sometimes you want to give a user the option to sign themselves or route a form to someone else to sign. E.g., a dispatcher might sign routine requests themselves but escalate an unusual case. To achieve this we create two sections essentially with duplicate fields, hide and skip the second section when the user signs, show and activate the second section (while hiding the first section) when the user routes. This is a pretty slick but advanced technique so it is not covered in detail at this time. This template outlines the basic idea. Doing a find-and-replace of XXXXXX with a valid ID string should work (you may want to clean up the two instances in <h2> tags).

SignOrRoute-Code.html

Bootstrap Rows

Each spanX is a column where all the Xs must add up to less than 12

Other Field Types

For all of these field types you will want to customize the name attribute and optionally add the "required" class to required fields (avoid the required attribute at this time)

Radio Button

Wrapping the button and text in the <label> makes the text clickable. A group of radio buttons should all have the same name

Checkbox

Wrapping the button and text in the <label> makes the text clickable. Each checkbox must have a unique name within the form section

If the required class were applied the empty option would not be a valid choice. To add text to the empty option while still making it required use <option value="">Select one...</option>

Multiple Select Options

The empty brackets ("[]") after the name are required. The size attribute dictates how tall the box will be

Text Area (large text box)

The rows attribute dictates how tall the box will be

Upload Attachment

Date

Adds a datepicker interface when clicked. As of this writing this produces more consistent results than using the "date" HTML5 type

datepicker-note

If your datepicker isn't working, make sure that the head section of your document includes the following:

Email

Includes the @ symbol on the keyboard of some mobile devices, limited browser validation

URL

Includes the : and / symbols on the keyboard of some mobile devices, limited browser validation

Telephone

Defaults to the numeric keypad on some mobile devices, limited browser validation

Number