How to Navigate a Long Form During Design
Navigation Features
When you work with long forms that contain multiple pages, nested panels, or many questions, finding the right element and configuring it might become tricky.
Survey Creator UI includes multiple features that help you navigate long and complex forms more efficiently:
- Switch between pages using the Page Menu
- Find survey elements using the Survey Tree
- Search for settings in the Property Grid
- Find question types in the Toolbox
- Use toolbox subitems to add specific input types
- Reduce visual clutter using Expand/Collapse controls
Using these features together can significantly improve the form design experience, especially when working with large multi-page forms or surveys that contain deeply nested elements.
This guide describes these tools and explains how to use them during the design process.
Switch Between Pages Using the Page Menu
When a form contains multiple pages, scrolling through the design surface to locate the required page can become time-consuming. To simplify navigation, Survey Creator includes a Page Menu, which lists all pages and lets you switch between them instantly.
To navigate to a page using the Page Menu:
- In the top-right corner of the design surface, click the two-page icon.
- Review the list of available pages.
- Select the page you want to open.
The form scrolls to the selected page on the design surface, as shown in the video below.
By default, Survey Creator displays element names (IDs) in UI elements such as the Page Menu. For pages, those correspond to Page name property values. If page names are not descriptive, navigating large forms can become harder.
To improve usability, we recommend assigning meaningful page names or asking your developer to enable the useElementTitles configuration option. When this option is enabled, Survey Creator displays element titles instead of element names across the interface, including the Page Menu, Survey Tree, and conditional logic dialogs. Refer to the Modify New Question demo to see it in action.
Find Survey Elements Using the Survey Tree
The Survey Tree displays the structure of your form and allows you to quickly navigate between survey elements. It supports search and scrolling, making it easier to work with large surveys. You can find it in the Property Grid, where it can be expanded whenever you need to locate a specific item.
To locate an element using the Survey Tree:
- Click the category name at the top of the Property Grid to open the Survey Tree.
- Use one of the following methods:
- Scroll through the form structure to locate the required element.
- Enter the page, panel, or question name (ID) in the search field.
- Select the required element to jump directly to it on the design surface, as shown in the video below.
Search for Settings in the Property Grid
Survey Creator includes a wide range of settings for questions, pages, panels, and other survey elements. To locate a specific setting quickly, use the Property Grid search. The search supports both user-friendly setting names and API property names.
To search for a setting:
- Select a survey element.
- In the Property Grid, focus the search field.
- Enter a keyword.
For example:
- Search for Error message alignment to find the corresponding setting.
- Search for
errorLocationif you know the API property name.
Matching settings are highlighted automatically, as shown in the video below.
Find Question Types in the Toolbox
The Toolbox contains all available question types. When a survey includes many built-in or custom question types, locating the required one manually can be difficult. To simplify navigation, use the Toolbox search.
To find a question type:
- Focus the search field in the Toolbox.
- Enter the question type name.
- Select the required item and drag it onto the design surface.
Use Toolbox Subitems to Add Specific Input Types
Some question types include predefined variations. For example, Single-Line Input can be added as an email field, password input, phone number field, and more. Instead of adding a generic question and configuring it afterward, you can insert the required variation directly from the Toolbox.
To use Toolbox subitems:
- Hover over a question type with a right chevron (>), which indicates that subitems are available.
- Browse the available variations.
- Select the required subitem or drag it onto the design surface.
Survey Creator automatically applies the corresponding configuration, reducing the number of setup steps.
Collapse and Expand Survey Elements
Large forms often contain multiple pages, nested panels, and grouped questions, which can make it difficult to focus on a specific part of the survey. To simplify navigation and editing, Survey Creator allows you to collapse and expand individual questions, panels, and pages, or collapse and expand all survey elements at once. This functionality is particularly useful when reorganizing a survey, since collapsed elements take up less space and are easier to drag and reposition.
To collapse survey elements:
- Use the Collapse button on an individual element to hide its contents.
- Click Collapse All to collapse all elements in the form.
- Expand only the sections you need to work with.
Send feedback to the SurveyJS team
Need help? Visit our support page