WebPlatform Documentation

Form Design Best Practice

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


  • 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