Description:
A Vue.js component to create conversational, conditional-logic, multi-step forms for form wizards, questionnaires, quizzes, and much more.
Basic usage:
1. Import the Flow Form component.
import FlowForm, { QuestionModel, QuestionType, ChoiceOption, LanguageModel } from ‘@ditdot-dev/vue-flow-form’
2. Add the FlowForm component with the question list as questions prop.
<template> <flow-form v-bind:questions="questions" v-bind:language="language" /> </template>
3. Define questions in the questions array
export default {
name: 'example',
components: {
FlowForm
},
data() {
return {
language: new LanguageModel({
// Your language definitions here (optional).
// You can leave out this prop if you want to use the default definitions.
}),
questions: [
// QuestioModel array
new QuestionModel({
question: 'Question',
type: QuestionType.MultipleChoice,
options: [
new ChoiceOption({
label: 'Answer'
})
]
})
]
}
}
}Preview:
Changelog:
v2.2.1 (11/22/2021)
- Bugfix
v2.2.0 (11/20/2021)
- New question type – QuestionType.Matrix
- Fix issue when jumping to previous questions
v2.0.1 (05/27/2021)
- Fix issue when adding package via npm
v2.0.0 (05/27/2021)
- Now supporting Vue 3
- NumberType now works with masks
- Added maxLength option for Text and LongText
- Added min/max validation to Number type question
- Various bugfixes and improvements
v1.1.7 (03/03/2021)
- Allow for questions to be defined as components
- New question type – MultiplePictureChoice
- Various bugfixes
- Small enhancements
v1.1.6 (12/19/2020)
- Fix “skip” button not appearing in some cases
v1.1.4 (11/17/2020)
- New global feature – Timer
- New question type – Date
- Additional navigation options
- Additional MultipleChoiceType options
- Additional component events
v1.1.3 (10/09/2020)
- Isolated CSS styles
- New layout option
v1.1.2 (09/24/2020)
- Dropdown accessibility enhancements
- Theme/design corrections
- Minor bugfixes
v1.1.1 (09/19/2020)
- Allow using mask for all question types that extend TextType
- Links can now be added below description
- Progress bar can now be disabled
- New theme added
- Accessibility improvements
v1.1.0 (09/10/2020)
- Allow for multiline LongTextType on mobile devices
- Don’t show “press enter” text on LongTextType for mobile devices
- Add two new themes
- Fix SectionBreak issues
Download Details:
Author: ditdot-dev
Live Demo: https://www.ditdot.hr/demo/vff/quiz/
Download Link: https://github.com/ditdot-dev/vue-flow-form/archive/master.zip
Official Website: https://github.com/ditdot-dev/vue-flow-form
Install & Download:
# Yarn
$ yarn add @ditdot-dev/vue-flow-form
# NPM
$ npm i @ditdot-dev/vue-flow-form --save