Using the Survey Creator

When designing your registration forms or survey questionnaire forms you use the Survey Creator, shown below. This tutorial will give a brief overview of the Survey Creator for more detailed information on specific question types or advanced features, refer to the individual question tutorials or visit the official SurveyJS website ( https://surveyjs.io/ ) for extensive examples and documentation on the use of the Survey Creator.

Survey Creator

With the Survey Creator you can design your surveys by adding questions to your survey, adding logic to the survey and doing the translations of your surveys. Survey questions are added by clicking on the question in the Toolbox panel on the left, questions are removed by clicking on the Delete question button. You can move the order of the questions by dragging the Move question icon.

When selecting Add New Page it will add a page to your survey, instead of listing all your questions on one page you can present them on multiple pages.

When creating your survey it is useful to test if all is working correctly, you can test the survey by clicking on the Preview tab, the Save survey button is found on top.

Properties of the questions are set in the Properties panel on the right, how to set the properties of the individual questions can be found in the tutorials for the individual questions. Properties found for each question are:

Name, the name of the question
Title, the title of the question
Description, the sub title of the question where you can give additional information
Is required?, if this property is set then the survey can only be finalized when this question is answered
Header, Sub header and Alert under mobile. With this option set to 1 or higher the question will be shown as header, subheader or alert on the phone. In the screenshot below you can see the name is set as header, the telephone number is set as subheader and gender is set as alert. You can search on header, subheader and alert.

Getting Started with Survey Creator

The Survey Creator interface consists of four main panels:

Toolbox (Left Panel): Contains all available question types and survey elements you can drag and drop into your survey.
Design Surface (Center): Where you visually design your survey layout and preview how it will appear to respondents.
Properties Panel (Right): Displays and allows editing of properties for the selected question or page.
Toolbar (Top): Contains actions like Save, Undo/Redo, Test Survey, and access to Logic and Translation features.

Question Types Available

Survey Creator offers a wide variety of question types:

Text Questions: Single line input, multi-line text, comment boxes
Choice Questions: Radio buttons (single select), checkboxes (multiple select), dropdown lists
Rating Questions: Star ratings, smiley faces, numeric scales
Matrix Questions: Single-choice matrix, multiple-choice matrix
Date and Time Questions: Date pickers, time inputs
File Upload Questions: Allow respondents to upload documents or images
Specialized Questions: Email, URL, phone number with validation

Adding Conditional Logic

One of the most powerful features is conditional logic, which allows you to show or hide questions based on previous answers:

Select the question you want to apply logic to
In the Properties panel, find the "Visible If" property
Use the expression builder or write conditions like: {age} > 18 or {country} = 'USA'
You can also set "Required If" to make questions conditionally required

Example: If a respondent selects "Other" for employment status, show a text field asking them to specify.

Working with Pages

Multi-page surveys improve user experience and can include page navigation logic:

Click "Add New Page" to create additional pages
Drag questions between pages using the Move icon
Set page titles and descriptions
Use "Page Navigation" to create branching between pages based on answers
Add page completion messages or instructions between sections

Validation Rules

Ensure data quality by adding validation rules to questions:

Text Validation: Minimum/maximum length, regular expressions, email format, URL format
Numeric Validation: Minimum/maximum values, whole numbers only
Custom Validation: Write JavaScript expressions for complex validation logic
Error Messages: Customize validation error messages for better user experience

Translation and Localization

Create multilingual surveys using the Translation feature:

Click the "Translation" button in the toolbar
Select languages you want to support
Translate all survey text: questions, choices, error messages, buttons
Set default language and allow respondents to switch languages
Export/import translations for collaboration with translators

Note: Survey Creator automatically detects text that needs translation and provides a convenient interface for entering translations.

Advanced Features

For more complex survey needs:

Calculated Values: Create variables that calculate based on answers (e.g., total score)
Default Values: Set dynamic default values based on previous answers
Question Templating: Create reusable question templates
JavaScript Triggers: Execute custom JavaScript on events like page load or question change
Data Source Integration: Populate dropdown choices from external APIs or databases

Testing and Preview

Always test your survey thoroughly before deployment:

Click "Preview" tab to enter preview mode
Test all question types and validation rules
Verify conditional logic and page navigation
Test on different devices (desktop, tablet, mobile)
Check data submission to ensure it captures what you need

Best Practices

Keep it Simple: Start with essential questions, add complexity only when needed
Use Clear Labels: Make sure questions and instructions are easy to understand
Progressively Disclose: Use conditional logic to avoid overwhelming respondents
Test Extensively: Have multiple people test the survey before going live
Save Frequently: Use the Save button regularly to avoid losing work
Document Your Logic: Complex conditional logic should be documented for future reference