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="" 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.


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;*/


class Hello extends React.Component {
    constructor(props) {
        super(props); = null; // <-- Conversational Form ref
        // add Conversational Form info'cf-questions', "Your name?");'cf-questions', "Your email?");
        this.refs.description.setAttribute('cf-questions', "What is description?"); ={
            formEl: this.refs.form,
            context: document.getElementById("cf-context"),
            flowStepCallback: function(dto, success, error){
            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)',
            React.createElement('input', {
                type: 'email',
                ref: "email",
                placeholder: '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]);


  baseUrl: 'js',
  paths: {
    conversationalform: 'conversational-form'
    // conversationalform: ''

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 install conversational-form