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:
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