Create A Smart Chat Bot From An Html Form - convForm

Create A Smart Chat Bot From An Html Form - convForm
File Size: 53.7 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT

convForm is a fancy jQuery plugin to create a smart, interactive live chat bot from a normal html form that you can define your own questions for each form field using conv-* attributes.

How to use it:

1. The plugin requires the latest jQuery library is loaded properly in the document.

<script src="//"></script>

2. Load the jQuery convForm plugin's JavaScript and CSS files in the document.

<link rel="stylesheet" href="dist/jquery.convform.css">
<script src="dist/jquery.convform.js"></script>

3. Define the question to ask using conv-question attribute as this:

<input type="text" name="name" conv-question="Question to ask">

4. If you'd like to show specific questions based on your user's answer.

<select name="conversation" conv-question="Question To Ask">
  <option value="yes">Yes</option>
  <option value="no">No</option>

<div conv-fork="conversation">
  <div conv-case="yes">
    <input type="text" conv-question="Question To Ask" no-answer="true">
  <div conv-case="no">
    <select name="thought" conv-question="Question To Ask">
      <option value="yes">Yes</option>
      <option value="no">No</option>

5. Possible plugin options with default values.

var convForm = $('.my-conv-form-wrapper').convform({
    placeHolder : 'Type Here',
    typeInputUi : 'textarea',
    timeOutFirstQuestion : 1200,
    buttonClassStyle : 'icon2-arrow',
    eventList : {
      onSubmitForm : function(convState) {
        return true;
      onInputSubmit : function(convState, readyCallback) {readyCallback()}
    formIdName : 'convForm',
    inputIdName : 'userInput',
    loadSpinnerVisible : '',
    buttonText: '▶'



  • fixed disappearing chat box


  • adjusted wrapper height when showing options


  • changes to callback functions to also pass ready


  • multiple select not able to select bug fixed, multiple select not


  • new option eventList: onInputSubmit, called on every input submit. 


  • Attributes changed to be w3c compliant


  • added option to change button text (buttonText)


  • changed default loader color, removed round border-top-right radius from


  • fixed a bug with rollback example, and prevent js from throwing error


  • callback functions now receive the ConvState object as a parameter so the user can interact with the conversation states and do cool things like rollback


  • fixed bug when user typed an invalid option and then clicked on a valid


  • fixed bug where form didn't submit when last question was a no-answer="true"


  • fixed bug


  • added callback support to options on a select

This awesome jQuery plugin is developed by eduardotkoller. For more Advanced Usages, please check the demo page or visit the official website.