1.5

Table Of Contents
Provide touch areas that are large enough. COTG forms are used on a mobile device (in the
COTG app). Make sure that the user can easily tap the form elements, hyperlinks and buttons.
The index finger of most adults covers an area that is between 45 and 55 pixels wide. There
should be enough white space between the form inputs so the user won't accidentally put focus
on the wrong element.
Visually group related information. Use headers to mark a section. This makes it easier to
navigate the form. Applying a large font size and background color will make them standout.
You can use Foundation's off-canvas menu and accordeon (collapse) functionality to make it
easier to navigate groups of input fields.
Provide feedback. Show what input data is expected, clearly identify which fields are required
and show errors when the entered data doesn’t meet the required format.
Capture OnTheGo template wizards
With the Designer you can create Capture OnTheGo (COTG) templates. COTG templates are
used to generate forms for the Capture OnTheGo mobile application. For more information
about this application, see the website: Capture OnTheGo.
A Capture OnTheGo Form is actually just a Web Form, that you could add without a wizard, but
the COTG Template Wizards include the appropriate JavaScript files for the Capture OnTheGo
app, and styles to create user-friendly, responsive forms. They are built upon the Foundation
framework.
Foundation
All Web Template Wizards in Connect Designer make use of the Zurb Foundation front-end
framework. A front-end framework is a collection of HTML, CSS, and JavaScript files to build
upon. Foundation is a responsive framework: it uses CSS media queries and a mobile-first
approach, so that websites built upon Foundation look good and function well on multiple
devices including desktop and laptop computers, tablets, and mobile phones. Foundation is
tested across many browsers and devices, and works back as far as IE9 and Android 2. See
http://foundation.zurb.com/learn/about.html and "Using Foundation" on page362.
After creating a COTG template, the other contexts can be added, as well as other sections
(see "Adding a context" on page270 and "Adding a Web page" on page332).
Page 358