Download OnlineForms-Template.html
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> |
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> |
<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> |
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).
Each spanX is a column where all the Xs must add up to less than 12
<div class="row-fluid"> <div class="span4"> <label>FIELD</label> <input type="text" name="FIELD" class="form-autosize"> </div> <div class="span4"> <label>FIELD</label> <input type="text" name="FIELD" class="form-autosize"> </div> <div class="span4"> <label>FIELD</label> <input type="text" name="FIELD" class="form-autosize"> </div> </div> |
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)
Wrapping the button and text in the <label> makes the text clickable. A group of radio buttons should all have the same name
<label class="radio"> <input type="radio" name="Radio_Buttons" value="Yes"> Yes </label> <label class="radio"> <input type="radio" name="Radio_Buttons" value="No"> No </label> |
Wrapping the button and text in the <label> makes the text clickable. Each checkbox must have a unique name within the form section
<label class="checkbox"> <input type="checkbox" name="Check_Box" value="Agree"> I Agree to the Terms and Conditions </label> |
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>
<select name="Dropdown" class="form-autosize"> <option></option> <option>Bienen School of Music</option> <option>McCormick School of Engineering and Applied Science</option> <option>Medill School of Journalism, Media, Integrated Marketing Communications</option> <option>School of Communication</option> <option>School of Education and Social Policy</option> <option>Weinberg College of Arts and Sciences</option> </select> |
The empty brackets ("[]") after the name are required. The size attribute dictates how tall the box will be
<select name="Multiselect[]" multiple="multiple" class="form-autosize" size="6"> <option>Bienen School of Music</option> <option>McCormick School of Engineering and Applied Science</option> <option>Medill School of Journalism, Media, Integrated Marketing Communications</option> <option>School of Communication</option> <option>School of Education and Social Policy</option> <option>Weinberg College of Arts and Sciences</option> </select> |
The rows attribute dictates how tall the box will be
<textarea name="Textarea" rows="6" class="form-autosize"></textarea> |
<input type="file" name="Attachment" class="form-autosize fancyupload"> |
Adds a datepicker interface when clicked. As of this writing this produces more consistent results than using the "date" HTML5 type
<input type="text" name="Date" class="form-autosize datepicker"> |
Includes the @ symbol on the keyboard of some mobile devices, limited browser validation
<input type="email" name="Email" class="form-autosize"> |
Includes the : and / symbols on the keyboard of some mobile devices, limited browser validation
<input type="url" name="URL" class="form-autosize"> |
Defaults to the numeric keypad on some mobile devices, limited browser validation
<input type="tel" name="Phone" class="form-autosize"> |
Defaults to the numeric keypad on some mobile devices, limited browser validation
<input type="number" name="Number" class="form-autosize"> |
Assigning sections to a fixed group/s is done on the access control screen. These instructions detail how to assign a section based on user input where "SECTIONID" in each example is the ID of the section you want assigned
Leave the <select> empty. It will be populated based on selections on the access control screen (below)
<select name="formcycle-assign-to-group-SECTIONID" class="form-autosize required"></select> |
<input type="text" name="formcycle-assign-to-netid-SECTIONID" class="form-autosize required"> |
(after you submit the form code)