Creating a questionnaire with matrix choices

Creating a questionnaire with matrix choices

Requirement  

Create a matrix-type (horizontal layout of choices) questionnaire to get feedback.

Use Case  

A flight booking application is used by multiple users. The users use it to book flights, after which a feedback form is sent to them to request their feedback. So, a form called Feedback, with varying levels of approvals and disapprovals, will help the service provider to fine tune the services.
 

Steps to follow  

1. Create a feedback form with the following details:
Form
Form Link Name
Field Type
Field Name
Field Link Name
Feedback
Feedback
Radio
In-Flight Service
In_Flight_Service
Radio
Onboard Entertainment
Onboard_Entertainment
Radio
Wi-Fi Connectivity
Wi_Fi_Connectivity
Radio
Meal Options
Meal_Options
Multi Line
If there is any other feedback, please tell us.
If_there_is_any_other_feedback_please_tell_us
Add Notes
Notes
plain

For all the Radio fields, the choices can be imported from Advanced > Import predefined choices > Satisfaction level. This will add the default choices listed under the Satisfaction level (Very Satisfied, Satisfied, Neutral, Unsatisfied, Very Unsatisfied) to the radio fields. (The N/A option can be removed.)
 
 

2. Some CSS code can make the form look in a matrix type. Click the Notes field, then click Edit HTML.
 
3. Add the below code in Edit HTML editor:
  1. <div>
  2.     Feedback bring a smile and a change. Do both!
  3.     <br>
  4. </div>
  5. <style>
  6. <!-- The below line is a comment. -->
  7. <!-- zc-<field_link_name>-group indicates the radio box group -->
  8. .zc-In_Flight_Service-group .form-field .tempContDiv .choice-table-row { 
  9. display: table-cell !important 
  10. } 
  11. .zc-Onboard_Entertainment-group .form-field .tempContDiv .choice-table-row { 
  12. display: table-cell !important 
  13. } 
  14. .zc-Wi_Fi_Connectivity-group .form-field .tempContDiv .choice-table-row { 
  15. display: table-cell !important
  16. } 
  17. .zc-Meal_Options-group .form-field .tempContDiv .choice-table-row { display: table-cell !important 
  18. }
  19. </style>
  20. <div>
  21.     <br>
  22. </div>

See how it works