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

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:

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

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

You Might Be Interested In:

Add Comment