Layouts

Layouts control the look and feel of your forms, surveys, and events. Set up your branding once and apply it across everything you publish.

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.

The Manage layouts dropdown, showing options to select a default layout or edit layouts.

---

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.

The Layouts list page showing an existing layout, with options to create a new layout or set default layouts.

---

Basic and Logo & Buttons Tabs

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

The Basic tab of the layout editor showing styling options for font, wallpaper background, content background, and content width.

The Logo & Buttons tab showing all configurable button types for the layout.

---

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.

The Advanced tab showing granular styling controls for the selected page element.

---

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.

The Base HTML tab showing the core HTML structure of the layout, including Engage Scripting Language block tags.

---

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.

The Content HTML tab with the Form view selected, showing the HTML structure for form content including validation and error block tags.

---

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.

The Custom CSS tab, showing an empty CSS editor ready for custom style rules.

---

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.

The layout editor preview showing a form rendered with the current layout applied.

---

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.

The Apply Layout confirmation dialog prompting you to save and apply the layout to the selected form.

---

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.

The Layouts list page showing the Set default layouts button.

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

The Set your default layouts dialog showing the default layout selections for Forms, Surveys, Survey Reports, and Events.