Making Accessible MachForms

Headings

MachForm will create an <h1> for the site logo, an <h2> for the form title, and an <h3> for each section break. All questions are list items within their respective section or within the main form if no section headings.

DO NOT put any <hx> tags in html fragments inside field titles or user guidelines.

If using section breaks:

  1. begin the form with a section break so there is not an orphan question list under the <h2>.
  2. DO NOT make any empty section breaks.
  3. The field label for a section break should be a short title for the section. Other content, such as further explanations , should go in the user guidelines.

Images

Images placed on a form should always be implemented using a media field. Whenever possible, link to the image rather than uploading it. This should always be done with images already on the Brockport website. With Brockport logos and lockups, if the image is not available on one of the Brockport servers, ask for it with an email to webteam@brockport.edu. If the image is not a logo or lockup, and is not already on the Brockport website, then you can upload it onto the form.

When an image is placed, whether linked fro the website or on the form itself, always include correct and useful alt text in the field provided for it.

Never embed images directly using HTML in a field title or user guidelines.

HTML

The Brockport form theme in MachForm is designed to fit the styling of the Brockport website. The REOC theme does the same with respect to the REOC website. These themes are built with appropriate styling for fonts and other elements to be consistent across forms and to fit with the website. Style changes should not generally be necessary and should be avoided.

HTML should never be used to achieve a certain visual result on the form. It is possible to add a predefined class (see below) to fields to get certain visual results. If what is needed is not available in an existing class, ask for it by emailing webteam@brockport.edu.

The only cases where it is acceptable to embed HTML into field titles or user guidelines is when a single word or a few words need italics or boldface.

Custom Classes

These classes can be added to form fields to achieve a certain visual effect. These should be entered in the Custom CSS Class field of the field properties panel. This is preferable to injecting HTML directly into a field title or user guidelines. If a visual effect is needed, please email webteam@brockport.edu to request it.

class name (enter it exactly as shown here) effect theme availability

column_2
column_3
column_4
column_5
column_6

will allow multiple fields on a row, up to 6. See the MachForm documentation. all
guidelines_bottom will cause the user guidelines for a field to be displayed below the field all the time instead of to the side when hovering over the field. See the MachForm documentation. all
section-break can be added to a section break field to give it a background appropriate to the site — tan for Brockport, yellow for REOC. all
section-break-green can be added to a section break to give it a green background. Brockport
section-break-blue can be added to a section break to give it a blue background. REOC

Signature Fields

If any of your forms contain the original Signature field, then edit the field properties of that original signature field as follows:

  1. Remove the check from the Rules > “Required” checkbox.
  2. Set the Field Visibility to “Admin-only”. This preserves any previous signatures collected in past entries.
  3. Insert a Single Line Text field to replace the original signature field

How to use a Single Line Text Field to collect electronic signatures.

On the Single Line Text > Field Properties tab, make the Field Size “large” and set the Rule to “Required” to ensure the field is completed by the user.