タグ

フォームとjQueryに関するpisutaのブックマーク (4)

  • クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」:phpspot開発日誌

    DocumentCloud's VisualSearch.js クールで高機能な次世代検索ボックスを作成できる「VisualSearch.js」 検索ボックスというとどのサイトも<input type="text">があってCSSで修飾されていたりオートコンプリートが付いていたりするものですが、今回紹介する検索ボックスはそれらをもうちょっと進化させたものになっています。検索条件など細かくをいれてもらうような場合、フォームが巨大になってしまったりしますが、その心配はありません。1つの検索ボックスで完結します。 検索ボックスがあります 入力するとフィルタの候補が現れます Enterで補完されます 条件を入れていきます ×ボタンで条件は消せますし、条件の上でクリックすればそのままオートコンプリートが走ります 日付の指定なども検索ボックス上で完結させられます こうした検索ボックスが合わないサイトも

  • フォームで離脱させないためのjQueryプラグイン50選|designaholic -Creative Column-

    最近では、エントリーフォーム最適化(EFO)という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。   まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと   入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。   です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。   必須入力か

  • 1個目のselectで2個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」:phpspot開発日誌

    1個目のselectで2個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」 2010年05月26日- jQuery Doubleselect Plugin 1個目のselectで2個目のselectの内容を簡単に変えられるjQueryプラグイン「Doubleselect」。 次のように、1個目のSelectボックスの内容によって2個目のselectボックスの内容が容易に切り替えるようなUIが簡単に実現できてしまうプラグインです。 1個目が野菜(Vegetables)の場合は、tomato, potato, asparagus が表示されます。 1個目をフルーツ(Fruits)にすると、apple, orange, kiwi, melon になります。 いざ実装しようとすると面度臭そうなのですが、jQueryプラグインによって、比較的簡単に実装できま

  • 長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプル:phpspot開発日誌

    長ったらしいフォームをウィザードにして抵抗を少なくするjQueryサンプルが公開されています。 長々としたフォームは利用者が入力を躊躇してしまいますが、ウィザードにすることでその抵抗を軽減できますね。 この変換を自動で行えるjQueryのサンプルが公開されています。 図1:長いフォーム スクリプトを実行すると次のようにウィザード形式に変換できます。 図2:ウィザード形式(Step1〜Step3) チュートリアル記事になっているので、見ながら簡単に実装できます。 フォームを作成する時は、参考にしてみてもよいでしょう。 次のエントリにて具体的手法が見れます。 Turn any webform into a powerful wizard with jQuery (FormToWizard plugin)

  • 1