# Layouts

### Overview

Layouts let you apply consistent branding and styling across all your UbiQuity forms, surveys, and events. Once you have created a layout, it is available across your entire UbiQuity account and can be applied to any form, survey, or event you create.

You can set a default layout so that any new form, survey, or event you create automatically inherits your branding without any additional steps. If you have the Create Layout permission across multiple UbiQuity accounts, you can also copy layouts between accounts.

Note that there are slight differences in how layouts apply across forms, surveys, and events. Surveys, for example, include next, back, and finish buttons that forms do not have. Keep these differences in mind when designing your layout and test it across each content type before applying it broadly.

For advanced customisation of field positioning and layout within a form, survey, or event, contact UbiQuity for assistance.

***

### Accessing Layouts

You can access Layouts from several places in UbiQuity, including the **Manage layouts** button within the Forms, Surveys, and Events modules.

<div align="left"><figure><img src="/files/92C2ott25eRILbgEIr0S" alt="A screenshot of the Manage layouts dropdown, showing options to select a default layout or edit layouts."><figcaption><p>The Manage layouts dropdown, showing options to select a default layout or edit layouts.</p></figcaption></figure></div>

***

### Creating and Editing a Layout

From the **Manage layouts** drop down, click **Edit layouts** to reach the Layouts list page. From there, you can either click into an existing Layout to edit it, or click **New Layout** to start a new layout, or select an existing layout to edit it.

The layout editor has several tabs. The **Basic**, **Logo and Buttons**, and **Advanced** tabs are designed for most users and cover the majority of styling needs without requiring any coding knowledge. The **Base HTML**, **Content HTML**, and **Custom CSS** tabs are for web developers who need deeper control.

<div align="left"><figure><img src="/files/usOvBl3bjQ6m6P73w4ku" alt="A screenshot of the Layouts list page showing an existing layout, with options to create a new layout or set default layouts."><figcaption><p>The Layouts list page showing an existing layout, with options to create a new layout or set default layouts.</p></figcaption></figure></div>

***

### Basic and Logo & Buttons Tabs

These tabs control the global styling of your layout — including fonts, colours, logos, and button icons or images.

<figure><img src="/files/j5VSj3R68kbRIIQDRslp" alt="A screenshot of the Basic tab of the layout editor showing styling options for font, wallpaper background, content background, and content width."><figcaption><p>The Basic tab of the layout editor showing styling options for font, wallpaper background, content background, and content width.</p></figcaption></figure>

<figure><img src="/files/jAKB3lIVuQc1NLRWTAbb" alt="A screenshot of the Logo &#x26; Buttons tab showing all configurable button types for the layout."><figcaption><p>The Logo &#x26; Buttons tab showing all configurable button types for the layout.</p></figcaption></figure>

***

### Advanced Tab

The **Advanced** tab gives you detailed control over the visual styling of your layout. Navigate to the specific page or state you want to style, for example a validation error message, and make changes while seeing them applied in real time in the preview below.

<div align="left"><figure><img src="/files/owfNZsgfTPrIcv9O0RyF" alt="A screenshot of the Advanced tab showing granular styling controls for the selected page element."><figcaption><p>The Advanced tab showing granular styling controls for the selected page element.</p></figcaption></figure></div>

***

### Base HTML Tab

The **Base HTML** tab is for web developers. It controls the core HTML structure of the page including the background, header, footer, and content container, as well as which stylesheets and scripts are loaded.

The most important element in the Base HTML is the `[ContentHTML]` marker. This is where the form, survey, or event content is injected into the page. You can move this marker but you must never remove it, or the content will not display.

The Base HTML also uses Engage Scripting Language block tags to apply sections conditionally depending on whether the item being displayed is a form, survey, or event. Do not edit the block tags themselves, but you can change the content inside them.

<div align="left"><figure><img src="/files/OM3azEp3zvgA5hNl5LE5" alt="A screenshot of the Base HTML tab showing the core HTML structure of the layout, including Engage Scripting Language block tags."><figcaption><p>The Base HTML tab showing the core HTML structure of the layout, including Engage Scripting Language block tags.</p></figcaption></figure></div>

***

### Content HTML Tab

The **Content HTML** tab is also for web developers. It controls how each item type, forms, surveys, and events, is structured and rendered within the base page. Use the toggle at the top to switch between item types.

As with **Base HTML**, this tab uses Engage Scripting Language block tags. Avoid editing anything inside the block tag syntax itself, but you can adjust the HTML content within those blocks to change how sections are displayed.

<figure><img src="/files/iTBsmMkfHXPserP5e0yL" alt="A screenshot of the Content HTML tab with the Form view selected, showing the HTML structure for form content including validation and error block tags."><figcaption><p>The Content HTML tab with the Form view selected, showing the HTML structure for form content including validation and error block tags.</p></figcaption></figure>

***

### Custom CSS Tab

The **Custom CSS** tab lets you add your own CSS rules to customise the appearance of your layout beyond what the Basic and Advanced tabs provide. You can create new style rules, or create new classes and reference them in the Base HTML and Content HTML tabs.

Click **Apply** at the bottom of the section to see your changes reflected in the preview.

<figure><img src="/files/i4NBoTIff8JMR3Z5QaPR" alt="A screenshot of the Custom CSS tab, showing an empty CSS editor ready for custom style rules."><figcaption><p>The Custom CSS tab, showing an empty CSS editor ready for custom style rules.</p></figcaption></figure>

***

### Previewing a Layout

You can preview your layout on a real form, survey, or event while you are working on it. Click **Change Preview** to select the item you want to preview, and use the page dropdown to navigate between different pages of that item, such as the introduction page, a question page, or the Thank You page.

This means you can see your changes applied in context before pushing them live.

<figure><img src="/files/r8zul5chz95UWn1A9Fin" alt="A screenshot of the layout editor preview showing a form rendered with the current layout applied."><figcaption><p>The layout editor preview showing a form rendered with the current layout applied.</p></figcaption></figure>

***

### Applying a Layout

You can apply a layout to a form, survey, or event in two ways. The first is from within the item itself, on the **Select Layout and Preview** step when building or editing it. The second is directly from the layout editor by previewing the item you want to apply it to and clicking **Apply Layout,** then **Save and Apply**.

<figure><img src="/files/pwDl58jhORSJWM26pf3Q" alt="A screenshot of the Apply Layout confirmation dialog prompting you to save and apply the layout to the selected form."><figcaption><p>The Apply Layout confirmation dialog prompting you to save and apply the layout to the selected form.</p></figcaption></figure>

***

### Default Layouts

To set a layout as the default for all new forms, surveys, and events, click **Set default layouts** from the Layouts list page.

<figure><img src="/files/thze1tAhSPG8YmXnu5Wk" alt="A screenshot of the Layouts list page showing the Set default layouts button."><figcaption><p>The Layouts list page showing the Set default layouts button.</p></figcaption></figure>

From here, you are able to view and change the default layouts.

<div align="left"><figure><img src="/files/jGhac8EVeimFGu1yOL8b" alt="A screenshot of the set your default layouts dialog showing the default layout selections for Forms, Surveys, Survey Reports, and Events."><figcaption><p>The Set your default layouts dialog showing the default layout selections for Forms, Surveys, Survey Reports, and Events.</p></figcaption></figure></div>


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.ubiquity.co.nz/documentation/data-capture/layouts.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.