「form要素を対話形式で作成できるスクリプト・「Conversational Form」」のご紹介| Webデザイン参考記事まとめアプデ

2019年08月2日(金)

form要素を対話形式で作成できるスクリプト・「Conversational Form」

0

31

11

19

Conversational Form

See the Pen Conversational Forms – native validation (v1.0.0 feature) by kachibito
(@kachibito) on CodePen.

Conversational Formは上サンプルのような対話式コンテンツを作成する為のスクリプトです。formを変換するタイプです。上記はHTML側を日本語に変えてサンプルを用意しましたが、実際はもっと効率的にローカライゼーションが可能な仕様となっています。

質問に対し、回答していく事でformの項目をストレスなく埋めてもらおう、というもの。だと思いますが、質問をうまく作らないと逆に混乱させてしまう可能性があるので製作者のコミュニケーション能力が問われそうですね。

サンプルのようにオートコンプリート機能なども付与できますのである程度応用も効くんじゃないかなと思います。これはこれで一つのフォーム入力における離脱防止の策の一つになるかもしれません。

非依存型で、単体で動作します。ライセンスはMIT。

Conversational Form

WordPressやJQueryなどを中心に、Web開発者のためのチュートリアルやコードスニペットの記事を公開しているTakahashi Yoheiさんのブログかちびと.netの記事『form要素を対話形式で作成できるスクリプト・「Conversational Form」』についてまとめています。

この記事は特にjavascriptについて書かれており、気になるWebデザインの記事やまとめを見つけたら「本文を読む」をクリックすると、記事配信元のかちびと.netで全文を閲覧することができます。RSS Sourceの「このサイトの記事一覧」をクリックするとかちびと.netの記事をまとめて表示することができます。また閲覧数や各SNSのシェア状況を目安に、他の人たちが記事をどのように評価しているのか推測することができます。Webデザインにとって有益な記事をまとめていますので、ぜひリンク先をチェックしてみてください。