DOM element attributes
Form-tag attributes
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 UserTextInput to auto focus.
<form id="my-form-element" cf-form cf-prevent-autofocus>
cf-no-animation
Disables animations completly.
<form id="my-form-element" cf-form cf-no-animation>
Form-field attributes
cf-questions
Map questions directly to a tag. You can seperate with || to allow for more questions, app will shuffle questions.
<input type="text" cf-questions="What is your name?||Please tell me your name." />
seperate with && to allow for chained questions.
<input type="text" cf-questions="Hello?&&Please tell me your name." />
cf-input-placeholder
Tag specific, set the placeholder text on the UserTextInput field.
<input type="text" cf-input-placeholder="Should include http" />
{One way value-binding} with cf-questions
For cui-questions, add {previous-answer} to insert the value from the previous user-answer, you are also able to reference the input ID.
Using the {previous-answer} mapping:
<input type="text" cf-questions="What is your firstname?" />
<input type="text" cf-questions="Hello {previous-answer}, what is your lastname?">
Using the ID attribute, this will loop through all submitted tags and map:
<input type="text" cf-questions="What is your first name?" id="firstname" />
<input type="text" cf-questions="What is your last name?" id="lastname" />
<input type="text" cf-questions="Hi {firstname} {lastname}, please tell me your email?" />
previous input could be a select:option list with countries.
<input type="text" cf-questions="So you want to travel to {previous-answer}" />
cf-label
Add a label to the field. Field must be of type "radio" or "checkbox".
<input type="radio" cf-label="Subscribe to newsletter" />
cf-validation
Validate a submitted value before continuing the form flow using javascript.
- OBS. eval is used.
- Asyncronous, so a value can be validated through a server
- three parameters is passed to the method
- dto: FlowDTO
- success: () => void //callback
- error: (optionalErrorMessage?: string) => void //callback
<input type="text" cf-validation="window.validateFunction" ..
cf-error
Map error messages directly to a tag. The messages can be seperated by | to allow for more error messages. The app will shuffle between given messages.
<input type="text" cf-error="Text is wrong wrong|Input is not right" />