LP6 Style Guide: Forms

Form #103

This form makes use of functionality developed by Collegis to handle form submission into Synapse. The Synapse bridge script is located at the bottom of the form include. Note that there are two versions; one for the production and one for the staging environments.

			
	<script src="//stg-bridge-api.collegiseducation.com/api/bridgescript/?id=f62bff13-9a43-4eba-b41a-2aef5bcf0bb3"></script>
	<script src="//bridge-api.collegiseducation.com/api/bridgescript/?id=f62bff13-9a43-4eba-b41a-2aef5bcf0bb3"></script>
			
		

The form also includes a legacy script file from Collegis as well as some inline js: <script src="/common/js/scripts-legacy.js"></script> that contains a variety of functions.

PlaceAnalyticsCookieValuesIntoForm()

This function checks for cookies set by GA and inserts their values into proper hidden field values.

checkForBlockedStateZipCode()

This functions checks against zip code JSON data to see if a user's zip code falls in a state where enrollment is currently disallowed. An error message is displayed on step two of the form.

hideProgramsBasedOnZipCode()

This functions checks against zip code JSON data to see if a user's zip code is blocked for specific programs under the currently selected school. This function runs on change of the school field (preferred area of study). If matches are found, those programs are not included in the preferred program option list. An error message is displayed if the current selection is disallowed.

FormData

The JSON data referenced above is currently returned from a Collegis service using the jQuery getJSON method. There are two endpoints for production and staging again:

• http://rasmussencollegescedustg.collegiseducation.com/inquiryservice/getschoolofprogramswithdegrees/
• https://www.rasmussen.edu/inquiryservice/getschoolofprogramswithdegrees/

There are many other functions in the Collegis legacy script file that aren't actively used.

Field Chaining

As mentioned above the select field options on step two of the form are all logically chained so the fields must be selected in order. Preferred area will populate preferred program which, in turn, populates preferred level.

Most program pages will be prepopulated with a prefered school, program, and level. This is determined by page global vars set in PHP. Those are written into hidden fields in the form. The Collegis script file then preselects these option values on page load based on those values.

Multi-step Functionality

Our custom front-end form uses a simple multi-step functionality. This specific form is two-step, and more steps can be added as needed. The form doesn't post data to an external system until the final step though.

The simpleform() function is used to paginate an HTML form using fieldsets to determine each step. The script exists inline on the form page with a control script to call the function:

				
	$(".step-form").simpleform({
		speed : 300, //transition speed
		transition : 'fade', //transition animation
		progressBar : true, //progress bar on/of
		showProgressText : true //progress text on/off
	});
				
			

Abide Validation

The Collegis legacy scripts are using Foundation's Abide, a form validation library that extends the HTML5 validation API with custom validators.

In general error messages will show in context when a button press or on change event is detected and an error exists.

Custom Validation

Our two-step form uses some custom validation to prevent people from moving from step one to step two if an error exists. For example, all fields must be filled to progress to step two.

Keep It Short

Forms are used for submitting data so be as concise as possible when designing. Think about each field and what value the data will provide. What do you gain by collecting this information?

Form Logic

• Radio buttons are used when there is a list of two or more options that are mutually exclusive and the user must select exactly one choice. In other words, clicking a non-selected radio button will deselect whatever other button was previously selected in the list.
• Checkboxes are used when there are lists of options and the user may select any number of choices, including zero, one, or several. In other words, each checkbox is independent of all other checkboxes in the list, so checking one box doesn’t uncheck the others. A stand-alone checkbox, or a toggle can be used for a single option that the user can turn on or off.
• Select elements are used for fields in which a single selection is required and there are a large number of possible options.

Optional vs. Required Fields

All fields in a form are assumed required, with optional fields being tagged as so.