Learn how to design an effective questionnaire and configure form field validation to improve the quality of your survey results.
A thoughtfully designed questionnaire can improve its completion rate and deliver a positive user experience. If your survey is clear and well structured, and questions are concise, survey takers will be willing to provide relevant and actionable data that you can use to derive valuable insights.
But how do you accomplish this? How do you organize an online questionnaire that doesn't overwhelm respondents and instead makes their experience enjoyable?
Proper Completion Time
Designing a questionnaire requires careful consideration of various factors. One of them is completion time, especially when it comes to online surveys. To maximize participation rates, limit the survey to no more than 10 minutes, or even shorter for mobile device users - around 7 minutes.
Suitable Question Types
Another critical aspect is selecting appropriate question types to ensure that the data collected will be suitable for further analysis and visual representation. Please refer to the How to Create an Effective Survey, Poll, or Quiz, and Increase its Completion Rate article to find out more on this topic.
Relevant Responses
Data validity is another key factor to consider when designing a questionnaire. To ensure reliable data, identify the types of data you want and do not want to receive. This approach can help avoid uncertainties by clarifying the data expected from respondents.
Different fields require different types of validation: validation for mandatory fields, numeric range validation for age or weight values, and file type validation for uploads in a specific file format, such as PDF, JPEG, or MP4.
Using SurveyJS, you can apply these and other data validation settings to your survey questions, ensuring that respondents provide accurate and reliable data. In the following sections, we will review some possible data validation options available with SurveyJS, which can help improve the quality of your survey data.
Form Input Validation with SurveyJS
SurveyJS is an open-source JavaScript library for building complex forms and surveys in React, Angular, Vue.js, Knockout, and jQuery. SurveyJS offers a variety of input validation options that can help ensure that respondents provide valid answers.
Mandatory Questions
Set the isRequired property value to true to ensure that a user doesn't leave a question unanswered before submitting a survey.
{
"type": "text",
"name": "last-name",
"title": "Last name",
"isRequired": true
}
If you use Single-Choice Matrix and you want to ensure that a user addresses all question in the rows, enable the isAllRowRequired option.
Restrict the Number of Choices to Select
If you want to limit the number of choice options a respondent can select in Multiple-Selection Checkbox and TagBox questions, you can use the maxSelectedChoices property.
{
"type": "checkbox",
"name": "product-aspects",
"title": "Key Features",
"description": "These are some important aspects of the product. Select three features you find most important.",
"choices": [
"Technical support",
"Price",
"Delivery option",
"Quality",
"Ease of use",
"Product warranties"
],
"maxSelectedChoices": 3
}
Once a user selects the maximum number of items allowed, further selection is disabled for that question.
Numeric Ranges
You can use the min and max properties to set numeric ranges for questions that require a numerical input type.
{
"name": "number",
"type": "text",
"title": "Enter a number from 0 to 100",
"inputType": "number",
"min": 0,
"max": 100,
"defaultValue": 0,
"isRequired": true
}
Text Length
By setting the minimum or maximum length values for text entry fields, you can control the number of characters users can enter.
The minimum text length value can help ensure that users provide enough data and prevent them from submitting invalid and eventually useless responses.
{
"type": "comment",
"name": "service_improvements",
"title": "How can we improve our service?",
"validators": [
{
"type": "text",
"text": "Please provide more information",
"minLength": 10
}
]
}
Setting the maximum text length value, on the other hand, can help prevent users from submitting redundant details in their answers. This will keep survey responses concise and focused on relevant information.
{
"type": "comment",
"name": "service_improvements",
"title": "How can we improve our service?",
"maxLength": 100
}
Maximum File Size
You can limit the size of files that can be uploaded as responses to questions.
{
"type": "file",
"title": "Please upload your files",
"name": "files",
"storeDataAsText": false,
"allowMultiple": true,
"maxSize": 102400
}
Demo: File question - Upload Files to a Server
Accepted File Types
When configuring a File question type, use the acceptedTypes property to restrict the file types that can be uploaded.
Regular Expressions
You can use regular expressions to implement more sophisticated logic and validate such input values as email addresses, phone numbers, or passwords.
{
"name": "user-password",
"type": "text",
"title": "Password",
"inputType": "password",
"description": "Enter a password that contains at least one upper-case, one lower-case letter, a digit, and a special character",
"isRequired": true,
"validators": [
{
"type": "regex",
"regex": /(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s)(?=.*[!-@#$*])/,
"text": "Your password must contain at least one upper-case, one lower-case letter, a digit, and a special character"
}
]
}
Custom Validation Functions
Validation functions can be useful in verifying more detailed responses. For instance, when it comes to email address, you may want to validate not only that the entered value conforms to the email format but also that it belongs to the domain of a specific company.
Demo: Custom Form Validation Using an Event
Server-Side Validation
Use server-side validation in addition to client-side validation to prevent malicious submissions or errors.
Demo: Server-Side Form Validation Using an Event
Summary
Consider the following recommendations to ensure that respondents provide accurate data while taking your survey.
Validate All Fields
Ensure that all fields have validation on, including optional fields. This helps prevent incomplete submissions and errors and ensures that most of the information provided is valid.
Provide Help Text
SurveyJS highlights a field with an error and displays an error message next to this field.
In addition, you can customize error messages and provide clear instructions on fixing the error. Use plain language and avoid technical jargon.
Use Real-Time Validation
Real-time validation helps users correct errors as they type rather than waiting until the form is submitted. Set the checkErrorsMode property to onValueChanged to validate user responses as soon as users provide answers.
Lastly, always test your survey with a small group of people (ideally - from the intended target group). This ensures that the survey is clear and easy to understand and can help detect and correct errors or ambiguities in questions and choice options before it reaches the main target audience.
Conclusion
Designing effective surveys requires both skill and creativity. SurveyJS offers a wide selection of tools to help you create more engaging and insightful surveys and online forms.
Top comments (0)