Introduction

Introducing a new question type to Formbricks is a great way to look into various parts of the tool. It touches a lot of different elements both from a UI perspective as well technically.

This doc walks you through all the different steps you need to perform to add a new question type. It makes sense to read the whole thing once before getting started so you know what you’re up to 😉

Preparation

1. Type Definition: Define the question type as TSurveyExampleQuestion in packages/types/surveys.ts.
2. Response Data Consideration: Determine an appropriate response data format, which can be a String, Number, string[], or introduce a new, clear, and comprehensible type.

Component Integration

1. Form Component: The form component gathers all the input needed for the question type, for example this one for single selection questions:

   

   → Add ExampleQuestionForm.tsx at apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/edit/components.

2. Display Component: The display component is the UI of the question type which is used to display it in the actual survey the respondent sees:

   

   → Add ExampleQuestion.tsx within packages/surveys/src/components/questions.

3. Summary Component: The summary component displays the results of this question type:

   

   Add ExampleQuestionSummary.tsx to apps/web/app/(app)/environments/[environmentId]/surveys/[surveyId]/(analysis)/summary/components.

4. The Response Card Layout: Make sure the collected data is displayed properly in the response card in the SingleResponseCard in packages/ui/SingleResponseCard/index.tsx

   In most cases, simple text is sufficient:

   

Other Considerations

1. Icon Selection: Choose a fitting lucide-icon that represents the new question type.
2. Responsiveness Validation: Ensure the question type is responsive across various platforms and devices:
   • Desktop and mobile versions of Link Surveys.
   • Desktop and mobile configurations for In-app Surveys.
   • Test it both with in the survey editor (toggle at the bottom) as well as in the browser
3. Template Addition: Include an example template for the new question type in app/web/app/lib/questions.ts.
4. Form Field Validation in Survey Editor: Extend the default validation (which checks for empty headline and description) with specific validations for the new question type in validation.ts.
5. Mandatory vs Optional Responses: If question is not optional, users should not be allowed to jump to next question without answering that question and if its optional, user should be able to skip it