Where controls have had bug fixes, you may have to replace existing controls on your forms with the new versions to apply the fix.

UPDATE 3RD NOVEMBER 2020

NEW CONTROLS/FEATURES
MASK CONTROLS - Added controls for Council Tax N., NNDR N., and renamed Housing Claim N. to Benefits N.
BASIC CONTROLS - New Read Only control.
All Text and Number input controls now include an attribute to flag the field as holding sensitive data, in compliance with HIPAA and GDPR.
To improve security, a form being completed will reset after 4 minutes of inactivity to protect user data.
The form submission name is now automatically set if you don't assign a name in the Form Name attributes.
The Form Name attributes now includes a redirect URL, which overrides the standard redirect URL if set.

UPDATES TO EXISTING CONTROLS
BASIC CONTROLS - Hidden Field now recognises numbers and can be used with the Calculated Field control.
SPINNER - The large spinner that appeared when saving a form has been replaced with a more inconspicuous animation at the top left of the application next to the Form Designer title.
PREVIEW CONTROLS - The star rating control now allows you to add text before and after the stars.

UPDATE 1ST NOVEMBER 2020

KNOWN ISSUES
Screen occasionally freezes after saving
You can't always mix Workflow with Page Sections

BUG FIXES
Workflow with Checkbox now works correctly
Form alignment now works correctly
Fieldset now aligns correctly
You can now use more than one date dropdown control on a form
The Star Rating control now works (see Preview group)

NEW CONTROLS/FEATURES
PAGE NUMBERS - Multi-page forms now show Page X of Y at the top of each section.
REQUIRED POPUP MESSAGE - If the user misses any required fields, a popup message is shown when the Submit button is pressed.
MASK CONTROLS/HOUSING CLAIM MASK - New mask input for Housing Benefit Claims number. Starts with 8, ends in X or a number, total of 9 characters in length.
API CONTROLS/AUTOCALC - Control that allows mathematical operations on two or more other numeric fields.
LOGIC CONTROLS/VIEW CONDITIONAL BLOCK START - In addition to the VIEW BLOCK START and END controls, you can now hide a block until another input field contains valid content.
BUTTON CONTROLS/UPLOAD FILE - Now allows limiting uploads to a single file type.
STYLE ELEMENTS/KNOWLEDGE BASE - Create knowledge articles in sections. Includes a search facility.
LOCATION CONTROLS/POSTCODE - Now has the option to show/hide the address in a list of input fields.
MEDIA ELEMENTS/QUOTE FULL IMAGE - Now includes an option to resize the image.
BUTTON CONTROLS/TEXT WITH BUTTON - A right-aligned button with hyperlink and optional long line of text to the left.

UPDATES TO EXISTING CONTROLS
LOCATION CONTROLS/POSTCODE - The control now has an attribute to show/hide the address fields. By default this is turned on.
INPUT CONTROLS/DATE DROPDOWN - Now allows you to set the start and end years.
Form Name size increase, colours updated, to more closely match Barclays Bank forms.
Alert Box with news on Form Designer now automatically disappears after 16 seconds.

UPDATE 25TH OCTOBER 2020

BUG FIXES
Echo Field now works with text, date and dropdown controls, and generally works better.
Date fields and help text now align correctly.
Legend fields now align correctly.
The Map Postcode no longer displays a random error message.
Workflow Radio Control now defaults to select the first radio button.

NEW FEATURES
Basic Controls - Added maximum length option to Text Input control.
Style Elements - Expanding List. Features a bulleted list which appears when you click on the title.
Dropdown Controls - Pre-populated property types dropdown list.
Basic Controls - Now includes a basic number input, with no minimum, maximum or step value.
Icon Controls - Now includes a basic number input, with no minimum, maximum or step value.
Echo Radio - In addition to the Echo Field, there is now an equivalent which works with Radio Buttons.
Block Controls - There is a new pre-populated Payment block
You can see individual IDs by hovering over the control on the canvas.
When you submit a form, it redirects to a demo "Thank You" page.

UPDATES TO EXISTING CONTROLS
Info and Contact Blocks now include an Anonymous check box as well as being able to set/unset the Required option.
MAP Postcode control now includes free text field.
Legend Control now defaults to Very Light font.

UPDATE 20TH OCTOBER 2020

BUG FIXES
You can now add more than one Postcode Lookup to a form.
The Map Postcode finder now includes default help text and a pin is now dropped automatically after you enter a postcode or address.
Various bug fixes to the Triple dropdown date control.

NEW FEATURES
A DUAL SELECT control: choose a category from the first list and the second list changes to reflect the sub-category of items.
A ACKNOWLEDGMENT control provides a means of ensuring the user confirms a statement before they can submit the form.
A NO SUBMIT control disables all Submit buttons on a form for those occasions when you create a lead sheet instead of a form.
A CLASSIFICATION BLOCK (in preview) will be used to provide a three level classification of each form for back-end automation.
Two new preview controls are under development: reCaptcha and GovMetric.

UPDATES TO EXISTING CONTROLS
Date triple dropdown now displays calendar dates including leap years, looking forwards 20 years.
The indicator for required or * character for labels can now be changed by administrators in settings.
Date controls now include default help text.
All media files (images, audio, video) are now located in the same folder.
Published forms now reside in the same folder so all team members can view them.
Forms are now published with a hidden reference to the person who designed the form at the foot of the HTML file.
All Settings are now persisted across sessions for all team members.
Colours adjusted on the interactive Page Guide and Alert Panel to bring the styles in line with the rest of the application.
User Configuration settings file optimised.
PHP files moved to the correct folder.
CSS removed from control files.

Oxford City Council form design standards 12-10-2020

All of the suggestions in this document should help make online forms as useable and accessible as possible.

Note that not all existing live forms will follow these principles so don’t copy them exactly if that is the case. The Lagan forms builder did not offer the functionality that we have with the new Forms Designer so there is also an opportunity to improve the design and usability of these forms.

The Form Designer is regularly being updated and improved so these standards will change over time to reflect new or amended functionality.

Form Standard Build

Form titles should usually have the first word capitalised only.
Left align all text.
Use a single Fullname input field rather than two separate fields, one for Firstname and another for Lastname.
Use icon input fields for numbers, email, date and phone fields.
Description Labels should be positioned on top of the input field
Use vertically aligned radio buttons and check boxes.
Radio buttons and check boxes should only have a maximum of 5 items. For longer lists, use the Select List.
Help text should be positioned on top, just under the description label.
The Submit button should be positioned to the right of the form.
The Autocomplete button should be on.
The Autosave button should be on.
Try to avoid optional fields. Where they are necessary, add either (Optional) or (If Known) to the field label.
Add a Design Notes control at the top of every form and include the original form web link in the notes.
Add a Classification Block at the top of every form.

Page structure

Use one column only

Be careful writing out too many instructions on a page. Users will not read them. Make use of the expanding text control in the Forms Designer to remove clutter from the page.

Ask personal questions towards the end. On most of the current (Lagan) forms we ask for contact details on the last page.

Sentence case is easier to read than title case and never use full uppercase

Try and move background information and detailed instructions to a web page instead rather than on the form

Keep the form simple and clutter free

Choose appropriate language for the forms and use plain English

Optional and mandatory fields

Any fields with the ‘Required’ attribute selected in the Forms Designer will be automatically marked with (required) on the form

Only ask for the information you absolutely need but if you do ask for optional information, add '(optional)' to the end of your field label

Field labelling

Labels should be short, direct and written in sentence case. Do not use colons at the end of labels.

Field prefills and placeholder text

Don’t use field prefills or placeholder text

Icons

Use the non-icon fields where possible. So in this example use ‘Text Input’ not Text (icon) Input.

Name and title

Use a single name field called ‘Full name’ if possible because it can accommodate the broadest range of name types and requires less effort for users to understand

Avoid asking for people’s title. It’s extra work for users and you’re forcing them to potentially reveal their gender and marital status, which they may not want to do.

We can amend those forms that require a title, first name and last name for system integration purposes afterwards

Radio buttons v select list (dropdown)

Use radio buttons for 5 or fewer options rather than a select (dropdown) list

List fields

Use the vertical list controls (not the horizontal) for consistency

Using Fieldsets with Radio buttons and checkboxes

Fieldsets and legends work together to tell screen readers that a group of form fields relate to each other, and to provide a label for the group.

You should use a fieldset element when you have a single multiple choice question when using radio buttons or checkboxes. Do not use them when you have a single form field that asks for a single piece of information.

The Form Designer now adds a Fieldset/Legend to a radio button control and a checkbox control automatically for you. You also have the option to display a border around the ‘fieldset’ by selecting the ‘Border’ option in the field attributes. By default the border is off.

Screenshots showing a checkbox question with border on and a radio button question with no border. Fieldset/Legends are automatically added for you.

Field help text

Use the field help attribute within each field to add in any hints for the user on how to fill in the field (shown in grey below).

Do not just repeat or reword the field title

Use field help to provide more information to the user rather than making your field titles long and rambling

Help text can provide context that the field label may not provide

Not all fields need help text

Use the expanding text control in the Forms Designer to provide further information if needed rather than making the help text too long and add in below the field as seen in the screenshots below.

Make the help text succinct and easy to read

The expanding text control allows you to add in html so you could include links to other web pages. Note, that any control in the Forms Designer that states ‘Content (markup)’ in text areas (see the individual attribute popup windows) will accept HTML as well as plain text.

For example:

Your customer claim number should be on any letter or other correspondence that you have received from us about your claim. It will begin with the number 80. For more information please see our <a href="https://www.oxford.gov.uk/info/20097/report_it_online/382/tell_us_about_a_change_of_circumstances_affecting_your_benefits_claim" target="_blank" rel="noopener noreferrer">Change of circumstances page on our website</a>.

Claim number field with a help block expanded:

The grey text is the help text used as a hint to help the user. The ‘I don’t know my customer claim number’ uses the expanding text control and provides more help for the user but without cluttering up the form. Use these together as in this example.

cid:image001.png@01D69C85.72F8F4F0

And collapsed:

cid:image001.png@01D69C85.72F8F4F0

Note that the quality of the help text used on the live forms is patchy so don’t always copy what is currently there.

User Guidance or instructions

Any user guidance or detailed information should be provided on an accompanying council website page (and maintained in the Jadu CMS) and not added to the first page of a form. On the web page it would be useful to indicate how long a form might take a user to fill in.

Sometimes it is necessary to add some important information on the first page of the form to avoid any confusion if the user has come directly to the form (and not via the website) but always try and link back to a web page on the council website.

Location Map control

Make it clear that the user can enter an address or postcode or double click on the map to drop a pin. Could provide some standard text so all forms are consistent.

Postcode / address fields

Use the postcode field (in the Location controls section) of the Forms Designer when you need any address from the user

Use the OCC City Postcodes (in the dropdown controls section) when you want to restrict the user to selecting a postcode within the city boundaries only. This should be needed far less often than the full postcode field above.

Only use the Location map (in the Location controls section) when the user might not know the exact address. So, for example, when reporting fly-tipping or graffiti.

Date fields

The various calendar picker controls (Date field, Weekday view, Month view) can be used for events close to the present time or if the user needs to know the day as well as the date, be able to compare dates or be able to enter date ranges.

Date picker accessibility and use on a mobile can be problematic so these should be implemented with caution and tested well on a mobile site.

Under development – New date picker field with separate day field / month field / year field and all validated as such.

cid:image004.png@01D69C85.72F8F4F0

This new control can be used for memorable dates or known dates and for mobile use.

If you don’t need the exact date and you are asking for dates that users might struggle to remember allow them to enter an approximate date such as January 2020 using a text input field.

Mask controls

Try to avoid using mask controls where possible

Use of branching

Use ‘branching’ questions so people only have to answer questions that are relevant to them.

Note that some of our existing Lagan forms do have branching so you will have to be careful when re-creating these forms.

Styling options

Do not use styling options within each component. Some controls in the Form Designer allow you to style the field and change control margins and control widths. Leave the default settings as much as possible. Any styling can be changed globally (with CSS) and will mean all forms will look consistent in their appearance.

Suggestions for Confirmation page (page that displays once the user has clicked the submit button and the form has been submitted)

Details of what happens next and when
Contact details for the service
Links to information or services that users are likely to need next
Link to a feedback page

Note that you cannot ‘submit’ a form in live so you will not see what the current confirmation page of the form is showing. These confirmation pages can be added in afterwards so ignore for now.

Create unlimited forms with the Form Designer, a drag-and-drop form builder, choosing the design and content you need.

1. Input Controls

Key	Control	Purpose
tnotes	Design Notes
tinput	Text Input
tinput	Text (icon) Input
	First name
	Text Area
	Numeric Field
	Numeric (icon)Field
	Phone Input
	Date Field
	Weekday View
	Month View
	Email address
	Email (icon) Address
	Web Address

2. Mask Controls

Key	Control	Purpose
	Mask Date
	Mask Time
	Mask Date Time
	Mask Phone
	Mask Phone Int
	Mask Credit Card
	Five Star Rating
	Three Star Rating

3. Dropdown Controls

Key	Control	Purpose
	Title
	Gender
	Employment Status
	Residential Status
	Counties
	Countries
	Select List
	Multichoice List
	Data List
	OCC City Postcode
	OCC Wards

4. Check/Radio Controls

Key	Control	Purpose
	Checkboxes (V)
	Checkboxes (H)
	Radio Buttons (V)
	Radio Buttons (H)
	Yes/No Buttons (Horiz)
	Yes/No Buttons (Vert)
	Toggle Switch
	Single Check
	Five Options

5. Button Controls

Key	Control	Purpose
	Upload Files
	Linked Button (hyper)
	Linked Button (email)
	Modal Button
	Expanding Button
	Submit Button
	Print Preview
	Button Group
	Tag Group

6. Location Controls

Key	Control	Purpose
	Postcode
	Location Map

7. Style Controls

Key	Control	Purpose
	Legend
	Static Text
	Alert
	Horizontal Line
	Vertical Spacing
	Inset Text
	Update Info
	Infocard
	Hyperlink
	Phone Link
	Expanding Text
	Expanding Link
	Expanding Panel
	Links List
	Ordered List
	Unordered List
	Quote Text

8. Media Controls

Key	Control	Purpose
	MP4 Video
	YouTube Video
	Modal Video
	MP3 Audio
	Quote Block Left
	Quote Block Right
	Quote Block Full

9. Block Controls

Key	Control	Purpose
	Contact Info
	Address Block
	Contact Block
	Credit Card

10. API Controls

Key	Control	Purpose
	Password
	Verify Password
	Verify Email
	API Select List
	CSV Single Select
	API Code
	Search Database
	Reg.Exp.
	Hidden Field
	Embed HTML	Injects html code stored in the "forms_published/embed/" folder
	Direct HTML	Type HTML directly into the attributes editor
	JS Code

11. Logic Controls

Key	Control	Purpose
	Start of Page Sections
	Page Section Break
	End of Page Sections
	Conditional Block
	Workflow Radio Trigger
	Workflow Checkbox Trigger
	Workflow Section Start
	Workflow Section End
	Fieldset Start
	Fieldset End
	View Block Start
	View Block End

l2. Preview Controls

Key	Control	Purpose
	Classification Block
	OCC Service Area
	User Control
	QRCode Label
	Form Preview
	Date Dropdown
	User Control
	Echo Field
	Camera
	Signature
	Testbed

Control	Shortcut	Purpose
ALT-A	Save As	Saves the form being edited.
ALT-B	Blueprints	Loads a form blueprint in the designer.
ALT-C	Clear	Clears/resets the form designer.
ALT-D	Delete	Deletes a previously saved form.
ALT-E	Edit	Edits an existing form in the designer.
ALT-H	Help	A user guide (work in progress)
ALT-I	Icons	Displays all available icons
ALT-L	Markup	Opens the HTML markup editor
ALT-M	Media	Opens the Media Library
ALT-P	Paste	Paste sample text into the field
ALT-Q	Save	Saves the form being edited directly.
ALT-S	Settings	Displays form settings which can be altered.
ALT-V	View	Displays a previously saved form.
ALT-X	Swap	Flips the design canvas and control windows
ESC	Close Popup Windows	Closes any popup window that is open.

Customize the colours of the form.

Colour	Code	Purpose
	--text-fg
	--muted-fg
	--input-fg
	--input-bg
	--input-bd
	--page-bg
	--card-bg
	--icon-bg
	--icon-fg
	--required-fg
	--links-fg
	--submit-fg
	--submit-bg
	--primary-bg
	--primary-fg
	--secondary-bg
	--secondary-fg
	--success-bg
	--success-fg
	--info-fg
	--info-bg
	--info-body
	--warning-bg
	--warning-fg
	--danger-bg
	--danger-fg
	--modal-bg
	--modal-fg
	--star-fg
	--star-bg

Button colours and codes.

Code	Colour	Background Hex Value
btn-primary		#4285f4
btn-default		#2bbbad
btn-secondary		#a6c
btn-success		#00c851
btn-info		#33b5e5
btn-warning		#fb3
btn-danger		#ff3547
btn-elegant		#2e2e2e
btn-unique		#880e4f
btn-pink		#ec407a
btn-purple		#8e24aa
btn-deep-purple		#512da8
btn-indigo		#3f51b5
btn-light-blue		82b1ff
btn-cyan		#00bcd4
btn-dark-green		#388e3c
btn-light-green		#8bc34a
btn-yellow		#fbc02d
btn-amber		#ffa000
btn-deep-orange		#ff7043
btn-brown		#795548
btn-blue-grey		#78909c
btn-dark-grey		#59698d
alert-warning		#ffd966