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 ๐
TSurveyExampleQuestion
in packages/types/surveys.ts
.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
.
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
.
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
.
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:
app/web/app/lib/questions.ts
.validation.ts
.