ConversationForms
A Rails port of conversational-form inspired by SPACE10
Installation
Add this line to your application’s Gemfile:
ruby
gem 'conversation_forms'
And then execute:
bash
$ bundle
Or install it yourself as:
bash
$ gem install conversation_forms
require the js:
javascript
//= require conversation_forms
and require the css:
css
*= require conversation_forms
Usage
on any pages that you want to use a conversation form, simply set the form’s ID to convo-form
conversation forms will automatically detect your form’s method and action
html
<form id="my-form-element" cf-form-element ...
with form_for add “cf-form-elemt” => true: ```ruby <%= form_for @user, html: { “cf-form-element” => true } do |f| %> ``
That’s It!
DOM Element attributes
cf-questions
- to map questions directly to a tag.
- seperate by | to allow for more questions, app will shuffle.
html <input type="text" cf-questions="What is your name?|Please tell me your name." ..
way value-binding with cf-questions:
For cui-questions, add previous-answer to insert the value from the previous user-answer.
html
<input type="text" cf-questions="Hello {previous-answer}" ..
previous input could be firstname.
html
<input type="text" cf-questions="So you want to travel to {previous-answer}" ..
previous input could be a select:option list with countries.
cf-label
- set a label to the field, [type=”radio”|”checkbox”]
html <input type="radio" cf-label="Subscribe to newsletter" ..
cf-error
- to map error messages directly to a tag.
- seperate by | to allow for more error, app will shuffle.
html <input type="text" cf-error="Text is wrong wrong|Input is not right" ..
Validations
* Checks user input against the supplied regex
html
<input type="text" pattern="^[0-9a-zA-Z-']*$" ..
cf-validation-contains
- Checks if the input value is one of a pipe-separated list of values
- e.g. the following will check if the input is equal to “a”, “b”, “c”, or “d”
html <input type="text" cf-validation-contains="a|b|c|d" ..
cf-validation-email
- Basic email regex check to ensure the value contains only 1 “@” symbol and at lease 1 “.” after the “@”
html <input type="text" cf-validation-email ..
pattern/cf-validation-matches
- This will check user input against the supplied regex
- Using “pattern” is recommended over cf-validation-matches when possible as it is a native HTML5 attribute
html <input type="text" pattern="^[0-9a-zA-Z-']*$" .. <input type="text" cf-validation-matches="^[0-9a-zA-Z-']*$" ..
max/cf-validation-max
- Ensure User input is less than or equal to a maximum
- Using “max” is recommended over cf-validation-max when possible as it is a native HTML5 attribute
html <input type="number" max=9 .. <input type="text" cf-validation-max=9 ..
min/cf-validation-min
- Ensure User input is greater than or equal to a minimum
- Using “min” is recommended over cf-validation-min when possible as it is a native HTML5 attribute
html <input type="number" min=1 .. <input type="text" cf-validation-min=1 ..
required
- to require a field set the required attribute as normal
html <input type="text" required .. <input type="text" required="true" .. <input type="text" required="required" ..
cf-validation-custom
- Check input against a custom Javascript function before submitting
- OBS. eval is used.
- two parameters are passed to your custom method
- value: String, the value of the input field
- tag: ITag, the actual DOM tag
html <input type="text" cf-validation-custom="window.validateFunction" ..
Advanced Initialization
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 form’s parent element.
html
<div cf-context ...>
cf-prevent-autofocus
If you don’t want to have the UserInput to auto focus.
```html