Modern Conversational Form In Vue


A Vue.js component that converts form groups into a conversational form.

Basic Usage:

1. Import the component.

import ConversationalForm from ‘vue-conversational-form’

2. Add form groups to the Conversational Form component.

  <ConversationalForm @submit="submit">
      <label for="name">What's your name?</label>
      <input required data-question="Hi there! What's your name? " type="text" name="name" id="name">
       <label for="name">Gender</label><br />
       <input type="radio" data-question="What's your gender?" name="gender" value="male" data-text="Male" /> Male<br>
       <input type="radio" name="gender" value="female" data-text="Female" /> Female<br>
       <input type="radio" name="gender" value="other" data-text="Other" /> Other
      <label for="opinion">Will conversational interfaces be everywhere?</label>
      <select data-question="Do you think conversational forms will replace web forms in the future?" name="opinion" id="opinion">
      <label for="company">Company</label>
      <input data-question="{occupation}, nice! Which company are you with?" type="text" name="company" id="company">
      <label for="thats-all">Want to start over?</label>
      <button data-question="Want to start over?" name="reset" type="reset" data-cancel="No">Yes, let's go again</button>
      <label for="thats-all">Are you ready to submit the form?</label>
      <button data-question="Are you ready to submit the form?" data-success="Submited! Yay! 😄" name="submit" type="submit" data-cancel="Nope">Yup</button>
export default {
  name: 'App',
  components: {
  methods: {
    submit (o) {
      console.log(o) // get form data


Modern Conversational Form In Vue

Download Details:

Author: SophiaSaiada

Live Demo:

Download Link:

Official Website:

Install & Download:

$ npm i vue-conversational-form --save

You Might Be Interested In:

Add Comment