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@0.9.70/dist/conversational-form.min.js" crossorigin>

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

class Hello extends React.Component {
    constructor(props) {
        super(props);
        this.cf = null; // <-- Conversational Form ref
    }
    componentDidMount(){
        // add Conversational Form info
        this.refs.name.setAttribute('cf-questions', "Your name?");
        this.refs.email.setAttribute('cf-questions', "Your email?");
        this.refs.description.setAttribute('cf-questions', "What is description?");

        this.cf = window.cf.ConversationalForm.startTheConversation({
            formEl: this.refs.form,
            context: document.getElementById("cf-context"),
            flowStepCallback: function(dto, success, error){
                success();
            },
            submitCallback: function(){
                // this callback could also be added to the React.createElement it self...
                alert("You made it!")
                console.log("Form submitted...");
            }
        });
    }
    render() {
        return React.createElement('form', {
            id: "form",
            ref: "form",
            className: 'form'
        },
            React.createElement('input', {
                type: 'text',
                ref: "name",
                placeholder: 'Name (required)',
                defaultValue: this.props.name,
            }),
            React.createElement('input', {
                type: 'email',
                ref: "email",
                placeholder: 'Email',
                defaultValue: this.props.email,
            }),
            React.createElement('textarea', {
                placeholder: 'Description',
                ref: "description",
                defaultValue: this.props.description,
            }),
            React.createElement('button', {type: 'submit'}, "Submit")
        )
    }
};

ReactDOM.render(React.createElement(Hello, {
    name: "Input name..",
    email: "Input email..",
    description: "Input description..",
}), document.getElementsByClassName('form-outer')[0]);

RequireJS

requirejs.config({
  baseUrl: 'js',
  paths: {
    conversationalform: 'conversational-form'
    // conversationalform: 'https://cf-4053.kxcdn.com/conversational-form/0.9.6/conversational-form.min'
  }
});

requirejs(["conversational-form"], function(conversationalForm) {
  console.log("Conversational Form loaded with requirejs:", conversationalForm);

  // start the conversation
  var conversationalForm = conversationalForm.startTheConversation({
    formEl: document.getElementById("form"),
    context: document.getElementById("cf-context")
  });
});

Use with various ES6 module bundlers

like Webpack and Rollup

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

Include Conversational Form in your project

NPM

npm install conversational-form