Zoomed Image
USA
800 691 9120
UK
01225 704844

Form Layout HTML and StyleSheets

xAssets Configuration Guide
Forms

Form Layout HTML and StyleSheets

This page explains how to use custom HTML and CSS to control the layout and appearance of a form. Most forms work well with automatic layout, so this is only needed when you require a specific visual arrangement.

Prerequisites

  • You must be a Configuration User to edit form layout HTML and stylesheets.
  • You should be familiar with the Form Editor and Managing Form Fields before working with custom layouts.
  • Basic knowledge of HTML and CSS is required.

Automatic Layout vs. Custom Layout

By default, xAssets arranges form fields automatically into rows and columns based on the field order and the number of columns specified on the form. This works well for most forms and requires no HTML knowledge.

Custom layout is useful when you need:

  • Fields arranged in a non-standard grid (e.g., two wide fields followed by three narrow fields in a row)
  • Grouped sections with headings or visual separators
  • Specific spacing, alignment, or formatting that automatic layout cannot achieve
  • Side-by-side panels or tabbed sections within a form

The Layout HTML Tab

The Layout HTML tab in the Form Editor contains HTML that defines the structure of the form. Within this HTML, field placeholders indicate where each field should be rendered.

Field placeholders use the format {FieldName} where FieldName matches the Field Name property of a field on the form. When the form is rendered, the system replaces each placeholder with the actual field control.

How to Add Custom Layout

  1. Open the form in the Form Editor (see Editing a Form).
  2. Click the Layout HTML tab.
  3. Enter HTML that structures the form. Use {FieldName} placeholders to position each field.
  4. Click Save.
  5. Refresh the page that displays the form to see the result.

Tip: Start by copying the automatic layout output and modifying it, rather than writing HTML from scratch. This ensures all fields are included and correctly referenced.

Warning: If a field exists on the form but is not referenced in the Layout HTML, it will not appear. Conversely, if the HTML references a field name that does not exist on the form, that placeholder will be rendered as empty space.

The Stylesheet Tab

The Stylesheet tab contains CSS rules that control the visual appearance of the form. These rules are scoped to the form and do not affect other forms on the page.

Use the Stylesheet tab to:

  • Adjust field widths, margins, or padding
  • Apply background colours to sections
  • Change font sizes or styles for specific fields
  • Hide or show elements conditionally using CSS classes

How to Add a Stylesheet

  1. Open the form in the Form Editor.
  2. Click the Stylesheet tab.
  3. Enter CSS rules. Standard CSS syntax is used.
  4. Click Save.
  5. Refresh the page to see the result.

Tips and Warnings

Tip: Changes to Layout HTML and Stylesheets take effect the next time the form is loaded in the browser. If you have the form open in another tab, refresh that tab to see your changes.

Tip: Use the browser's developer tools (F12) to inspect the rendered form and experiment with CSS changes before committing them to the Stylesheet tab.

Warning: Custom layout HTML can make a form harder to maintain. When new fields are added to the form, they must also be added to the Layout HTML or they will not appear. Consider whether automatic layout is sufficient before adding custom HTML.