チャット風のフォームを実装できるスクリプト・「chatty-form」

chatty-form

chatty-formはチャット風のフォームを実装できるスクリプトです。React向けに設計されています。かなり昔にChattyというjQueryのプラグインがありましたが同じような感じのものです。

質問に対して回答を入力すると、次の質問がチャットのUIで表示される、というもの。扱いもシンプルで使いやすそうでした。

<ChattyForm
  disableAutoScroll
  onSubmit={(formState) => alert('calling onSubmit')}
  onChange={(formState) => alert('calling onChange')}
>
  <Input
    name="name"
    question="Howdy! What's your name?"
    placeholder="Type your answer"
  />
  <Select
    name="pet"
    question="Do you like dogs more or cats?"
    options={[
      { label: 'Dogs', value: 'dogs' },
      { label: 'Cats', value: 'cats' },
    ]}
  />
</ChattyForm>

基本的にはformと同じです。question属性が質問になっており、入力する事で次の要素のquestionが表示されます。

場合によっては通常のフォームよりも離脱率を下げられるかもしれないですね。ライセンスは明記がありませんでしたのでご利用の際は開発者にお問い合わせください。

chatty-form