Create Conversational Conditional-logic Forms For Vue.js – Flow Form

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.3.1 (07/29/2022)

• Fix npm build

v2.3.0 (07/29/2022)

• New question type – QuestionType.IconRate
• New question type – QuestionType.OpinionScale

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