About Survey Layouts

Customize the look and feel of your surveys using Survey Layouts. This functionality enables you to design in detail your page and question layout. Three basic types of survey layouts are available:

• "Standard" survey layouts.
• Easy Layouts - these are simpler, and can be edited visually in Forsta Express. They contain some specific HTML styles and settings (go to Creating an Easy Layout for more information).
• Responsive layouts - allows the survey layout to automatically adapt to suit the device the respondent is using to answer the survey (go to Responsive Rendering for more information).

Note: Standard users do not have access to the Survey Layout functionality; Easy Layouts are available.

Note: Responsive rendering must be switched on for the specific company. Contact your system administrator for details.

An HTML table on the page will simplify positioning of the visual components on the page. However you can instead specify the positions inside the Styles directly, and this method is recommended if you want your Survey Layout to support 100% accessibility requirements (go to About Accessibility for more information).

You can set up a layout for mobile devices which will be used as default if no other mobile layouts are specified (go to Mobile Layouts for more information). You can also set up a mobile layout for each theme in the Themes folder, which will be used when the respondent is using a mobile device and that theme is selected. And if your company has the Responsive Rendering functionality available, you can use a responsive layout which will present your survey in the optimum way irrespective of the device the respondent is using (go to Responsive Rendering for more information).

Survey Layout Component Properties

Each of the visual components used in the survey layout has a Properties page. To access this page, right-click on the component in the Layout tab and select Properties. The properties available depend on the component selected. The main properties are described below (note that some properties are variations of main properties):

• Style Name – the name of the style.
• Main Style Name – specifies the position and style of the progress bar (except the bar itself) including the percentage numbers.
• Bar Style Name – specifies the style of the bar in the progress bar.
• Bar Background Style Name – specifies the style for the bar’s background area.
• Navigation Area Style Name – specifies the position and layout of the Navigation area.
• Navigation Control Style Name – specifies the style of the navigation control.
• Override Next Control Style Name – specifies the style for the Next button.
• Override OK Control Style Name – specifies the style for the OK button.
• Buttons – specifies whether the navigation control should include only a Back-button, only a Next-button or both.
• Tag Name – each component generates an HTML marker, and this property allows you to select the tag type for the visual component. The options are div, span, P, H1, H2 , H3, H4, H5. This gives more flexibility, and for example allows you to specify H1 for survey titles (or other headers), and H2 for question texts if question titles aren't used (question titles already use H2).
• Forward-first rendering - when this property is selected, the Forward (next question) navigation button will be placed first in the tabbing order, even though it will still appear on the Survey form to come after. This is useful for accessibility surveys (go to About Accessibility for more information).
• Rendering Mode - [Progress Bar and Navigation Control only] the Progress Bar and the Navigation Controls (Forward and Back buttons) can be displayed such that they are easier to use for respondents with disabilities, and in addition can be recognized by vocalization applications designed for use by the visually impaired (go to About Accessibility for more information). Select between Inherit (the control uses the accessibility layout specified for the rest of the theme), Accessible (the control always uses the Accessibility, non-table-based layout) or Legacy (the control will always use table-based rendering, not the Accessibility layout).