Getting Started

Turning web forms into conversations. Conversational Form is an open-source concept by SPACE10 to easily turn any form element on a web page into a conversational form interface. It features conversational replacement of all input elements, reusable variables from previous questions and complete customization and control over the styling.

Include ConversationalForm in your page

<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/space10-community/conversational-form@1.0.1/dist/conversational-form.min.js" crossorigin></script>

ConversationalForm will automatically look through the DOM for a form element with the attibute cf-form, and auto-instantiate.

<form id="my-form-element" cf-form ...>

That's it! Your form is now conversational 👍

Instantiate with jQuery

See ConversationalFormOptions for all available options.

$("form").conversationalForm({
        
});

Self-instantiate with vanilla Javascript

Only parameter formEl is mandatory for the object you pass to the constructor. See full list of ConversationalFormOptions.

new cf.ConversationalForm({
    // HTMLFormElement
    formEl/*: HTMLFormElement;*/
});

React

Vue

Angular

Use with various ES6 module bundlers

like Webpack and Rollup

import { ConversationalForm, EventDispatcher } from 'conversational-form';
    var cfInstance = ConversationalForm.startTheConversation({
    formEl: document.getElementById("form")
});

Include Conversational Form in your project

NPM

npm install conversational-form