vue-conversational-form

KO | EN

gitlite — search

#javascript #python #llm #golang #android #machine-learning #rust #macos #windows #awesome #cli #pytorch #security #open-source

vue-conversational-form

(★ 47)

Turning web forms into conversations using Vue.js

vue-conversational-form 최신버젼 다운로드

최종 버전 다운로드 (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Vue.js Conversational Form
Turning web forms into conversations using Vue.js.  
[Demo](https://sophiasaiada.github.io/vue-conversational-form/)

## Install
``` bash
npm i --save vue-conversational-form
```

## Usage
``` html
<template>
    <ConversationalForm @submit="submit">
      <fieldset>
        <label for="name">What's your name?</label>
        <input required data-question="Hi there! What's your name? " type="text" name="name" id="name">
      </fieldset>
      <fieldset>
        <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>
      </fieldset>
    </ConversationalForm>
</template>
<script>
import ConversationalForm from 'vue-conversational-form'

export default {
  name: 'App',
  components: {
    ConversationalForm
  },
  methods: {
    submit (o) {
      console.log('Submit:')
      console.log(o) // get form data
    }
  }
}
</script>
```

## Documentation
The content of the question should be defined in the `data-question` attribute.  
Multple question options will be seperated by `|`. Use inserted values using `{value-name}`.  
In submit buttons, use `data-success` for defining success message.  
In submit/reset buttons, use `data-cancel` for defining the cancel button's text.  
Listen in the parent to `submit` event in order to get the submitted data (as an object).  
  
Define a text/email/password input:
``` html
<fieldset>
  <label for="name">What's your name?</label>
  <input required data-question="Hi there! What's your name? " type="text" name="name" id="name">
</fieldset>
```  
Define a radio buttons' group:
``` html
<fieldset>
   <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
</fieldset>
```
Define a select group:
``` html
<fieldset>
    <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">
        <option></option>
        <option>Definitely</option>
        <option>Maybe</option>
        <option>No</option>
    </select>
</fieldset>
```
Define a submit button:
``` html
<fieldset>
    <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>
</fieldset>
```
Define a reset button:
``` html
<fieldset>
    <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>
</fieldset>
```
Use inserted values as a part of a question:
``` html
<fieldset>
    <label for="company">Company</label>
    <input data-question="{occupation}, nice! Which company are you with?" type="text" name="company" id="company">
</fieldset>
```

vue-conversational-form

vue-conversational-form 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

vue-conversational-form

vue-conversational-form 최신버젼 다운로드

오늘의 추천 프로젝트

Was this content helpful?

Recent Feedback

Download README