WebPlatform Documentation

Form Design Best Practice: Layout

Follow the guidelines for the webplatform you will be creating processes for

• Colours/banners to be used consistently throughout forms
• Use the correct beautification form* type. Choice: Accordion, Collapsible, Side by Side
• Use the relevant beautification help file* type: Big-fat, Collapsible, Grid

Note: Forms need to cater for all levels of user

• from most experienced to new starter, so make sure you think about the user experience and choose wisely

Add Explanatory Text/Guidance so that users understand what is expected of them in order to complete the WorkItem

Layout

• Must have (Mandatory info red asterisk*)
• Nice to have (Visible status)
• Read-Only (info carried over from completed WorkItems)

For old forms: Display of forms across different browsers

• If there is any chance that the forms might be viewed in IE add the table width html to control width of pages to all tables in forms <table style="max-width:1101px;">

• Best practice is to replace the form html with the beautification html which is designed to overcome this by default (compatibility addressed)

Form Design Best Practice: Re-using HTML

It is quite normal to re-use html in form design. E.g. You can see a form format in other processes that you would like to replicate in your process.

However there is a way to do this correctly!

Scenario 1: You’re copying html from other forms in the same process – No issue!

• All the context objects that you are copying will exist in the process
• Just add more/remove as per the needs of the form

Scenario 2: You’re copying html from another process – You must sanitise the html in order to not break your process!

• Go to the HTML tab for the form you want to copy
• Select all HTML & Copy

• Go to the HTML tab for your WorkItem form
• Paste the HTML in the HTML tab (this replaces what you had)

Next step:

• Go to the Design tab and sanitise the form = Delete context objects carried with the HTML
• Now customise to suit your purpose:
  • Select the context objects of your process
  • Update text
  • Save your changes & then beautify!

What you need to get right