space10-community / conversational-form Goto Github PK

Web Speech API

having the ability to compare a previous entry with the current one would be really helpful.
use case: entering password twice, to make sure they are identical

How would translating it into e.g. German work? Just update the strings in the dictionary?

Thanks,
Oktay.

Currently it supportes validation only for radio and select . I need validation based on my
<input cf-questions="questions" type="number" class="form-control" name="coverage-term" id="coverage_term" min="1" max="30">
currently no errors appearing when I enter more than 30.

First off, amazing job on this.

Second, perhaps submitting with AJAX by default should be considered. After the final field is entered, the form is submitted with AJAX, and a message is returned in the chat window.

I think we, as developers, understand what's going on, but the average user filling out a contact form might be a little confused by being redirected to a thank you page. Sort of "I was just talking to someone, what happened?" The last question you have at the end of your demo is a great idea for a submit button replacement, but if they don't answer it and just leave, then the form never gets submitted.

I have tried various methods, like using submitCallback and removing the action from the form, to attempt this, but so far I have been unsuccessful as the form submit redirects, either to the action form or the current page.

Issue:
The form currently expects input from the user for all fields, including disabled fields.

Expected behavior:
The disabled attribute is a boolean attribute.
When present, it specifies that the <input> element should be disabled.
A disabled input element is unusable and un-clickable.
The disabled attribute can be set to keep a user from using the <input> element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the disabled value, and make the element usable.

How it should work with conversational form is open for debate, but here is the way I see it working.

1. When creating the tags add all fields including the disabled fields.
2. Before asking the next questions, check if the form element is disabled
3. If the <input> is disabled, skip the question and move on to the next question.

How to test:
Add the disabled attribute to a form input

<input type="text" name="name" cf-questions="Good day what's your name?" disabled="disabled" >

The question should not appear if the input is still disabled.

Hi,

First of all congratulations!!
Is a very good idea.

But, I'm trying to test it and I get this error:
Uncaught Error: Conversational Form error, the formEl needs to be defined.

I instantiate converstaional form this way (but I had test it with jQuery too):

if(!window.ConversationalForm){
      window.ConversationalForm = new cf.ConversationalForm({
        formEl: document.getElementById("contact-form-1234"),
        context: document.getElementById("wpcf7-f455-p450-o1")
    	});
    }

Any idea?

Amazing work guys!!!
I was just wondering if it was possible to propose form inputs based on a previous response?

For example, if for the possible answers for question 3 depends on answer for question 2?

Thanks!

Is there a way to turn TypeForm form into Conversational Form?

Easy implementation for non-techies for Wordpress

It seems that all fields are required. I think it would be nice to be able to skip a question by hitting enter and get a response like "OK, we don't need that information to proceed." or even better, a programmed response, similar to the question field.

I may be missing something, but I can't get the callback function to work in the constructor.
Here is a jsbin: https://jsbin.com/kipejexaju/edit?html,js,output

For radios and checkboxes, use images. Optional text-description to the images.

Would be great to add support for internationalization, haven't had time to look at all of the code but answers seem canned, and would therefore be easily translatable?

@danielfriis can you update this Dictionary item when possible, no rush:

https://github.com/space10-community/conversational-form/blob/develop/src/scripts/io/space10/data/Dictionary.ts#L53

For an added level of conversation, I was wondering if there is a way to tag an element that, on page load or whenever in the form, would trigger a timed response. For example, if I wanted to welcome guests when they first arrive on the form, wait 2-3 seconds then prompt them with the first input field.

HI!

After my page is loaded it scrolls down to footer to the conv-form. Is it the default behaviour of the conv-form?

I'm implementing conv-form in my React project vie componentDidMount with .setAttribute command.

Would be nice to be able to go back and change an answer you already provided.

Hi,
any idea if this will work with cordova? anyone tried it?
if no, is there any plan to do so?

Thanks.

Activate the Conversational Form via a bookmark tool.

• Add UI to pick out/list form tags
• Create the Bookmark plugin

Could also be a Chrome extension

Hi,

You've given a way to change the user image, could you give a way to change the robot image as well?

I can't specify a context and so my cf is always in the body :(

I accessed the demo on my Windows 10 desktop using Chrome, and when I got to the "What do you do" question where you can select from a list of items, I did the following:

1. Press tab once to highlight the first option "Developer."
2. Press Enter to select the option.

The first time I pressed Enter, it moved focus to the input box below without selecting the option. I then pressed tab once to get back to the "Developer" option and hit Enter again. This time, it moved focus to the "Curious mind" option. The third time, I clicked in the input box, then tabbed to the "Developer" option and pressed Enter, and this time, it selected the "Curious mind" option and continued to the next form question.

Expected Result
I expect when I press enter while an option is highlighted/selected that it would select that option.

We have just got our server flagged as "phishing website" because of the file test/classic.airbnb.html (by phishlabs.com in northon + cloudflare)

I suggest the author to remove the file from the repo.

Unless required, type="email" should allow empty values.

It would be nice if the person types something that the bot doesn't understand then it would notify me and allow me to respond manually.

Issue:
There is no validation of the fields.
Example: email field
When user is writing an invalid email there is no validaiton.
If the server return an invalid message the user must fill all of the fields again.

Expected behavior:
There should be realtime validation or validation on submit with option to edit fields.

When testing the form on others, someone commented that it looked like someone else was typing while they were typing. I think I agree – there's no reason to visually indicate that the user are typing, and it might be a distraction.

Currently it supportes validation only for radio and select . I need validation based on my
""
currently no errors appearing when I enter more than 30.

Description

The image below shows the result when trying to execute some code through the input. The message was: <img src="x" onerror="alert('XSS Vulnerability')">. Since there isn't an image with name 'x', it causes to trigger the onerror function, which means the input value isn't getting sanitized and it is opening a security breach.

How to solve?

Whenever dealing with user input, sanitize the input with a safeString method, otherwise, the vulnerability will persist.

How to simulate the problem

1. Open the demo
2. Type a code that triggers some function related to error, such as <img src="x" onerror="document.location = 'https://twitter.com'">
3. The expected result is to get redirected to Twitter

Currently I only see support for {previous-answer} It would be cool if there is an api to add custom data binding values. For example; currently im looking for a way to get the value of a property of a few inputs ago.

Name
Age
Mood

In mood I want to ask the questions: So you're {age}. Tell me {name} how do you feel today?

It would be useful to be able to import this from NPM. Using something like webpack to build the project would generate smaller file sizes and produce cleaner output. It would also enable integration with React, and more:

import ConversationalForm from 'conversational-form';

const MyForm = ({onSubmit}) =>
  <form
    onSubmit={event => {
      event.preventDefault();
      onSubmit(event.target.elements);
    }}
    ref={formEl => formEl && new ConversationalForm({formEl})}
  >
    <input /* ... */ />
  </form>;
export default MyForm;

I was wondering how I would go about redirecting the user to a different URL based on their decision on a specific radio input?

Example Use Case: I want to start this conversational form out with an option for the guest to go to a more traditional form instead of continuing down the conversational path. By giving the guest 2 radio options in the first input response, I want to redirect to a traditional form if that option is chosen.

I've tried using the onclick = "document.location.href='page.html'" and a few other methods using JS and AJAX.

Hi,

Firstly, congratulations for iniciative. Conversational form is the future of web communication.

Well, I'm building a form that I need set a specific question according with the previous answer. For example:

Question: The client is a person or a company?

Question (if person): Inform the number of personal document.
Question (if company): Inform the number of employees.

Has a solution for this case? Is it possible get the previous answer and make a test to show correct question?

Thanks!

https://orbit.ai/

I needed to pass the field name as a second parameter for validation.

Changed this:
Tag.prototype.setTagValueAndIsValid=function(t){var e=!0,A=t.text;return this.pattern&&(e=this.pattern.test(A)),e&&this.validationCallback&&(e=this.validationCallback(A)),""==A&&(e=!1),e&&"file"!=this.type&&(this.domElement.value=A),e}

To this:
Tag.prototype.setTagValueAndIsValid=function(t){var e=!0,A=t.text,B=t.input.currentTag.name;return this.pattern&&(e=this.pattern.test(A)),e&&this.validationCallback&&(e=this.validationCallback(A,B)),""==A&&(e=!1),e&&"file"!=this.type&&(this.domElement.value=A),e}

Would be clever to utilize the autofill of browsers.

First of all, many congratulations for thinking different and better way.

I notice that the form make blank space upper side when size of form is big. Is there anyway the flow of the interaction show the following things as

1. move from top to bottom side
2. the size of form increases as per questions and answer.
3. Also it is shows the existing style of form before showing the conversational form

I will really appreciate, if you could fix these things.

It would be great to build in some kind of logic response and piping.

Question 1: How do you like your eggs in the morning?
A - Fried Sunny Side Up
B - Poached
C - Scrambled

Question 2: Are you
A: Male
B: Female?

if (question 1:A AND 2:A Answered ) {
 "Sir, you eat the breakfast of champions!"
else if (question 1:A AND 2:B Answered ) {
 "Madam, you eat the breakfast of champions!"
} else if (question 1:A Answered) { 
You eat the breakfast of champions!"
}

Do I put anything here, perhaps?

Would be great to hide password inputs with bullets (•) instead of stars (*). Both when typing, and in the actual conversation.

http://www.fileformat.info/info/unicode/char/2022/index.htm

Awesome job guys! I'm a university student and I'll use your code for a project in computer programming 1 course. My problem is that I can't use a <textarea> instead of an field: in fact I want to ask a longer question to the user. It seems that the code only accepts input fields, the following code doesn't work:

How can I use a textarea with your code? Sorry if this is a stupid question, I'm a real beginner! Thanks, Andreas

First of all, thanks for open-source this idea and for the hard work, I'm really excited to use in my projects, but I'm insecure because the source code doesn't have any unit tests.

Is there any forecast for the implementation of the unit tests?

I was wondering if it was posible to make the form end prematurely when clicking on an answer.
In case of a customer interview for exemple, if the customer is not in the age range that interests the reviewer then the form needs to end.

How do you have it fit into columns, such as in your demo? When I add it to the page, it takes over the whole thing.

Why don't you allow the cf-form-element to be prefixed by the standard data- ?

When user navigates away from tab, toggle between the active question and the original title.

Would be nice to be able to scroll within the conversation and see previous answers, if they're scrolled out the view.

I am concerned about how these forms fields would be validated. Please help me out with the same.