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.
Below you will find guides to inlcude the ConversationalForm into a page containing a form or try a quick demo
Include ConversationalForm in your page
<script type="text/javascript" src="https://rawgit.com/space10-community/conversational-form/master/dist/conversational-form.min.js" crossorigin></script>ConversationalForm will automatically look through the DOM for a form element with the attibute cf-form-element, and auto-instantiate.
<form id="my-form-element" cf-form-element ...>That's it! Your form is now conversational đź‘Ť
cf-context
If you want to have the ConversationalForm appended to a certain element (when auto-instantiating) then add attribute cf-context to an element, otherwise the ConversationalForm will be appended to the body element.
<div cf-context ...>cf-prevent-autofocus
If you don't want to have the UserInput to auto focus.
<form id="my-form-element" cf-form-element cf-prevent-autofocus>For more control over the output exclude the attribute cf-form-element from the form element and instantiate either with vanilla JS or jQuery:
new cf.ConversationalForm({
formEl: <HTMLFormElement>,
// dictionaryData?: {}, // empty will throw error, see Dictionaty.ts for values
// dictionaryAI?: {}, // empty will throw error, see Dictionaty.ts for values
// context?: // context of where to append the ConversationalForm (see also cf-context attribute)
// tags?: tags, // pass in custom tags (when prevent the auto-instantiation of ConversationalForm)
// submitCallback?: () => void | HTMLButtonElement // custom submit callback if button[type=submit] || form.submit() is not wanted..
// userImage: "..." //base64 || image url
});$("form").conversationalForm();- formEl: HTMLFormElement | string
- context?: HTMLElement | string
- Set the context of where the ConversationalForm will be appended to
- If not set then ConversationalForm will get appended to document.body
- tags?: Array
- [cf.Tag.createTag(element), ...]
- dictionaryData?: object
- Possibility to overwrite the default dictionary, empty will throw error, see Dictionaty.ts for values
- dictionaryAI?: object
- Possibility to overwrite the default dictionary, empty will throw error, see Dictionaty.ts for values
- submitCallback?: () => void | HTMLButtonElement
- An alternative way to submit the form. Can be a Function or an HTMLButtonElement (click will be called). If not defined the component will search in the formEl after a button[type=”submit”] and call click() if not button is found final fallback will be to call submit() on formEl.
- userImage?: string
- Set a different userImage. "..." //base64 || image url
The Conversational Form automatically detects the accepted tags in the passed in form element. If this is not desired then you are able to define your own tags, and pass them into the constructor.:
var fields = [].slice.call(formEl.querySelectorAll("input, select, button"), 0);
for (var i = 0; i < fields.length; i++) {
var element = fields[i];
tags.push(cf.Tag.createTag(element));
}Tags can then be set in the instantiation object, see ConversationalFormOptions
pattern attribute will automatically be used if set in tag.:
<input type="text" pattern="^hello" cf-questions="Your answer needs to include 'hello'" ..- to map questions directly to a tag.
- seperate by | to allow for more questions, app will shuffle.
<input type="text" cf-questions="What is your name?|Please tell me your name." ..For cui-questions, add {previous-answer} to insert the value from the previous user-answer.
<input type="text" cf-questions="Hello {previous-answer}" ..previous input could be firstname.
<input type="text" cf-questions="So you want to travel to {previous-answer}" ..previous input could be a select:option list with countries.
- set a label to the field, [type="radio"|"checkbox"]
<input type="radio" cf-label="Subscribe to newsletter" ..- Javascript validate a before submitting
- OBS. eval is used.
- two parameters is passed to the method
- value: String, the value of the input field
- tag: ITag, the actual DOM tag
<input type="text" cf-validation="window.validateFunction" ..- to map error messages directly to a tag.
- seperate by | to allow for more error, app will shuffle.
<input type="text" cf-error="Text is wrong wrong|Input is not right" ..When instantiating ConversationalForm a reference to the instance will be available in window scope.
window.ConversationalFormusing this reference you are able to remove the ConversationalForm by calling:
window.ConversationalForm.remove();You can overwrite the UI with your own styles. Please see the source styles/css files for more info.
We welcome contributions in the form of bug reports, pull requests, or thoughtful discussions in the GitHub issue tracker.
ConversationalForm is a concept by SPACE10. Brought to life by Felix Nielsen, RWATGG. Designed by Charlie Isslander.
$ cd gulp-tasks
$ npm install
Install local gulp from project root
$ npm install gulp
$ cd src/scripts
$ typings install
watch task, watches .styl, .ts, .jpg, .png, .gif, compiles to /build
# compiles (same as build) and watches files.
$ gulp
# compiles build files, to run locally.
$ gulp build
# compiles distribution files
$ gulp dist
$ cd gulp-tasks
$ npm install --save-dev XX
When you are up and running, you can find a few form tests in the /test folder.
Tested in latest Chrome, Firefox, Safari and Internet Explorer.
If you have a project that uses Conversational Form, feel free to make a PR to add it to this list: