Table of Contents
Layout Settings for the Question
___________________________________________________________________________
Creating a Survey
The Surveys module has a dedicated page under Automation. To create a survey, follow the steps below:
- Navigate to Automation > Surveys. You will find a dedicated survey page in Automation where all created surveys are listed. This page shows the survey name, entity, creator, number of workflows attached, and status.
- Click on Create New to create a new survey.
- Define Survey Details, such as Survey Name, and select the Focus Entity.
- Click Create.
Survey Creation and Design
These are the primary navigation "headings" at the top of the interface.
- Designer: This tab would likely be where you build and structure the survey questions and pages.
- Preview: This is the active tab in the image. It allows you to see how your survey will look to respondents before publishing it. The image shows a "No preview" message indicating the survey is currently empty.
- Themes: This tab (not currently active in the image) is where you would typically manage and apply themes to change the visual appearance of the survey.
Designer Tab
When creating or editing a survey, you are taken to the designer screen. The interface is typically divided into three sections: Question Types on the left, the Survey Design area in the center, and Settings on the right.
You can drag and drop different question types into the design area. The settings panel on the right changes based on what is selected.
Here's an explanation of the key elements visible in the interface:
-
Left Sidebar: This sidebar lists different questions or input types that can be added to the survey. These include:
- Single-Line Input: For short text responses.
- Long Text: For more extensive text responses.
- Rating Scale: For questions requiring a numerical, qualitative rating, labels, smileys, and stars.
- Checkboxes: For multiple-choice questions where multiple options can be selected.
- Dropdown: For single-choice questions presented in a dropdown menu.
- Multi-Select Dropdown: Similar to a dropdown, but allows selection of multiple options.
- Expression (read-only): Potentially for displaying calculated values or dynamic text based on other inputs.
- HTML: Suggests the ability to embed custom HTML content into the survey.
- NPS Rating: Specifically for Net Promoter Score questions.
-
Central Design Canvas: The main workspace where the survey content is arranged.
- Survey Title: Define the overall title of the survey.
- Description: Define the description of the survey.
- Page Name and Description: The survey is divided into pages, each with a name. "Page 1" is currently displayed along with its description.
-
Question Block ("question1"): A purple-bordered box represents an individual question. Within this block, you can see:
- The question text itself ("question1").
- A text input field for the answer.
- "Single-Line Input" and "Text" dropdowns allow changing the type of input for that specific question and its data format.
-
Action buttons: The following action buttons allow you to perform the following:
- Add Variable: Add Entity or Global variable
- Duplicate: Copy the question
- Required: Make the question mandatory
- Delete: Remove the question.
- Add Question button: This button allows the user to add new question blocks to the current page.
Survey Canvas and Actions
This section outlines the core elements of the Survey 2.0 interface, focusing on areas essential for survey configuration and readiness before integrating into workflows.
- Survey Title and Status Location: The survey's name and current status are displayed in the top-left corner.
-
Available Actions: In the top-right section, the following actions are available:
- The “Save” button allows you to retain ongoing changes.
- The “Publish Survey” button is the key control for moving the survey from Draft to Ready to use, fulfilling the prerequisite for workflow integration.
-
Eraser Icon: Clears any conditions applied to the question.
- Filter/Settings Icon: Opens survey settings for that question or block.
Editing and Layout Controls (Right Vertical Toolbar)
A fixed vertical toolbar on the right-hand side of the interface offers access to essential layout and view tools:
-
Zoom Controls:
- Zoom In: Magnifying glass with a plus icon.
- Zoom Out: Magnifying glass with a minus icon.
- Fit to View: A neutral magnifying glass, likely resets the zoom to the default view.
- Alignment Tool: Represented by two vertical arrows, this tool helps align or distribute survey components vertically within the design canvas.
- Fullscreen/Expand Tool: Icon with four outward arrows, likely used to enlarge the canvas for an expanded design view or toggle fullscreen mode.
- Locked Chat Bubble: This option allows you to lock a question.
Survey Level Settings
Here are the settings categories on the right.
General
This section contains general settings for the entire survey.
- Survey title: Input field for the survey's title.
- Survey description: Input field for the survey's description.
- Make the title and description visible: Checkbox to control the visibility of the title and description.
- Make the survey read-only: Checkbox to make the entire survey read-only.
- Survey width mode: Choose between Auto, Static (with a defined width), and Responsive width modes.
- Width: When "Static" width mode is selected, you can specify the width (e.g., 1200px).
Logo in the Survey Header
This section manages the survey's logo.
- Survey logo: Input field to add the URL of the survey logo (e.g., an Amazon AWS S3 link is shown).
- Logo width: Set the width of the logo (e.g., auto).
- Logo height: Set the height of the logo (e.g., 40px).
- Logo fit: Define how the logo image fits within its container (None, Contain, Cover, Fill).
Navigation
These settings control how users navigate through the survey pages.
- Survey layout: Choose the layout for questions (Show single question per page is shown as an option).
- First page is a start page: Checkbox to designate the first page as a start page.
- Auto-advance to the next page: Checkbox to automatically move to the next page after a question is answered.
- Show navigation buttons: Checkbox to show or hide navigation buttons.
- Navigation buttons alignment: Align navigation buttons (Top, Bottom, Top and bottom are shown as options).
- Show the "Previous Page" button: Checkbox to show the "Previous Page" button.
- Show the progress bar: Checkbox to show a progress bar.
- Progress bar alignment: Align the progress bar (e.g., Auto).
- Show table of contents (TOC): Checkbox to show a table of contents.
- Review before submit: Checkbox to allow users to review their answers before submitting.
- "Previous Page" button text: Customize the text for the "Previous Page" button.
- "Next Page" button text: Customize the text for the "Next Page" button.
- "Complete Survey" button text: Customize the text for the button that submits the survey.
Question Settings
Question Order: Choose between Original (creation order) or Random question sequence.
Question Title Alignment: Set the title’s alignment to Top, Bottom, or Left.
Question Description Alignment: Choose where the question description appears, such as under the question title.
Question Numbering: Enable or disable numbering. Options include No numbering, or patterns like 1. Question Title *.
Required Symbol(s): Define the symbol used to mark mandatory questions (default is *).
Error Message Alignment: Decide where error messages should appear: Top or Bottom.
Focus First Question on a New Page: Enable this to display the first question on a separate page from any intro content.
Restrict Answer Length: Set a maximum character count for responses (enter 0 for no restriction).
Restrict Comment Length: Limit the length of comments entered by respondents (enter 0 for no restriction).
Comment Area Height (in lines): Specify how tall the comment field should be, in number of lines.
Auto-expand Text Areas: Automatically expand long text fields as users type.
Allow Users to Resize Text Areas: Allows respondents to manually adjust the size of text areas.
Pages
This section is used to manage the pages within your survey structure.
- Pages: Lists the pages currently in the survey (initially "You don't have any pages yet") with an option to Add new page.
- Show page titles: Checkbox to display the title for each page.
- Show page numbers: Checkbox to display page numbers.
- Enable grid layout: Checkbox to enable a grid layout for questions on a page.
Conditions
This section is where you can define custom variables and triggers, likely for implementing conditional logic.
- Custom variables: Option to Add new variable.
- Triggers: Option to Add new trigger.
Validation
These settings control how and when survey responses are validated.
- Set focus on the first invalid answer: Checkbox to automatically focus on the first question with an invalid answer.
- Run validation: Choose when validation should run (e.g., When switching to the next page is shown as an option).
"Thank You" Page
This section configures the page displayed after a user completes the survey.
- Redirect to an external link after submission: Input field for a URL to redirect the user after submission.
- Dynamic external link: Option to add dynamic external links.
- Show the "Thank You" page: Checkbox to display a "Thank You" page.
- "Thank You" page markup: Input area to define the HTML markup for the thank you page (e.g., <h3\>Thank you for completing the survey</h3\>).
- Dynamic "Thank You" page markup: Option to add dynamic thank you page markup.
- Markup to show while survey model is loading: Input area for loading message markup (e.g., <h3\>Loading Survey...</h3\>).
- Markup to show if the user already filled out this survey: Input area for the message displayed if the user tries to access the survey again after completion (e.g., <h3\>You have already completed this survey.</h3\>).
Question Level Settings
These settings allow for detailed configuration of an individual question within a page.
General Question Settings
- Question name: Identifies the question, for example, "question1".
- Question title: The display title for the question.
- Question description: A field for a description of the question.
- Visible: A checkbox to make the question visible.
- Read-only: A checkbox to make the question read-only.
- Required: A checkbox to make the question mandatory.
- Input type: Defines the expected input type, with "Text" as the currently selected option.
- Placeholder text within input field: Text that appears in the input field before a user types.
- Autocomplete type: Allows selection of an autocomplete behavior for the input field.
- Items for auto-suggest: A field to list items for auto-suggestion functionality.
Layout Settings for the Question
- Display the question on a new line: A checkbox to control whether the question appears on its own line.
- Question box collapse state: Determines if the question box can be "Locked," "Collapsed," or "Expanded".
- Question title alignment: Aligns the question title, with "Inherit" as the default.
- Question description alignment: Aligns the question description, with "Inherit" as the default.
- Error message alignment: Aligns error messages for the question (Inherit, Top, Bottom).
- Increase the inner indent: Adjusts the inner indentation of the question, with options 0, 1, 2, 3.
- Inline question width: Sets the width for the question when displayed inline, e.g., "Ex:: 6in".
- Minimum question width: Sets a minimum width for the question, e.g., "300px".
- Maximum question width: Sets a maximum width for the question, e.g., "100%".
- Input field width (in characters): Defines the width of the input field based on character count.
- Input value alignment: Aligns the input value within the field (Left, Right, Auto).
Conditions for the Question
- Make the question visible if: Allows defining a condition for the question's visibility.
- Disable the read-only mode if: Allows defining a condition to disable read-only mode for the question.
- Make the question required if: Allows defining a condition to make the question mandatory.
- Default value expression: Allows setting a default value based on an expression.
- Reset value if: Allows defining a condition to reset the question's value.
- Set value if: Allows defining a condition to set the question's value.
- Set value expression: Allows setting the question's value based on an expression.
Input Mask Settings
- Input mask type: Controls the format of user input, with options "None," "Pattern," "Date and Time," "Numeric," or "Currency". This ensures data is entered in a specific, expected format.
Validation Settings
- Validation rules: Allows adding rules to validate the input provided by the user. The source indicates "You don't have any validation rules yet" and an option to Add a new rule.
- Error message for required questions: A field to customize the error message displayed if a required question is not answered.
- Maximum character limit: Sets the maximum number of characters allowed in the input field, with "-1" possibly indicating no limit.
For Rating type questions, there's an additional setting called Rating Values to define the scale.
For MCQ (Multiple Choice Questions), you can configure the available choice options.
Page Level Settings
Each survey page includes multiple configuration tabs that allow you to customize how that specific page behaves.
General Tab
The General tab covers the basic properties of the page.
- Page Name: Internal name used for reference (e.g., page1).
- Page Title: Optional title shown to respondents at the top of the page.
- Page Description: Additional context or instructions for respondents.
- Visible: Toggle to control whether the page is shown to respondents.
- Read-only: When selected, the page becomes non-editable.
- Type to Search...: A search bar is available to help locate specific fields quickly.
Question Settings Tab
This tab controls how questions behave within this specific page.
- Question Title Alignment: Choose to Inherit global settings or override them with Top, Bottom, or Left alignment.
- Error Message Alignment: Define where error messages appear: Inherit, Top, or Bottom.
- Question Order on the Page: Decide how questions are ordered: Inherit, Original (as created), or Random.
- Type to Search: Use the search bar to quickly navigate settings within the tab.
Conditions Tab
Use this tab to apply conditional logic at the page level.
- Make the page visible if: Define logic to show the page only under certain conditions.
- Disable the read-only mode if: Allow the page to become editable based on logic.
- Make the page required if: Specify when the page becomes mandatory.
- Type to Search...: Easily find specific conditional fields using the search bar.
Conditional Logic Builder
The magic wand icon indicates a smart condition setup.
Clicking it opens a logic builder dialog where you define rules like:
If [Select] Equals [Value]
This means: show the current question only if a previous answer or field matches the specified value.
Navigation Tab
This tab manages page-specific navigation options.
- Show Navigation Buttons: Control the visibility of the Next and Previous buttons on the page.
- Options include: Inherit, Disabled, or Enabled.
- Type to Search...: A search bar helps you find navigation settings quickly.
Preview tab
Within the Preview tab is a dropdown menu that functions as a set of "headings" for different device types. Selecting one of these lets you preview the survey layout as it would appear on that specific device.
The preview options include:
- Desktop
- iPhone SE
- iPhone 15
- iPhone 15 Plus
- iPad Mini
- iPad Air
- Android Phone
- Android Tablet
- Microsoft Surface
You can also hide the questions using the eye button.
Themes Tab
General: This section controls the overall theme settings and the basic appearance of questions within the survey.
- You can select the main Theme (e.g., Default).
- It allows choosing between Light and Dark modes.
- You can set the Question appearance to Default or Without Panels.
Header: This section is dedicated to configuring the visuals and layout of the survey header.
- Settings include View (Basic or Advanced).
- You can adjust the Height (overall and on smartphones).
- Options for Content area width and Text width are available.
- You can set a Background color (None, Accent color, Custom) or use a Background image with options for fit, opacity, and overlap.
- It allows customizing the Survey title font and Survey description font settings (family, weight, color, opacity, size).
- Alignment options are available for the Logo, Survey title, and Survey description (Left, Center, Right, Top, Middle, Bottom).
Background: This section manages the background appearance of the survey pages.
- You can set a Background color (e.g., #F3F3F3).
- You can add a Background image.
- Options for the background image include how it fits (Auto, Contain, Cover), its position (Fixed, Scroll), and its Opacity.
Appearance: This section controls various visual styling aspects of the survey elements.
- It allows you to set the Accent color (e.g., #19B394).
- You can configure the Panel and question box opacity and Input element opacity.
- You can set the overall Survey font family (e.g., Open Sans), Survey font size, Survey scale factor, and Corner radius (e.g., 4px).
- There is a toggle for Advanced mode.