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.
<script type="text/javascript" src="https://cdn.jsdelivr.net/gh/space10-community/conversational-form@0.9.83/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 👍
See ConversationalFormOptions for all available options.
$("form").conversationalForm({
});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);
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.config({
baseUrl: 'js',
paths: {
conversationalform: 'conversational-form'
}
});
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")
});
});import cf from 'conversational-form';
var cfInstance = cf.startTheConversation({
formEl: document.getElementById("form")
});npm install conversational-form