こんなことありませんか? フォームの項目が多くなり過ぎてしまい、ユーザーがストレスを感じそうと思う時はありませんか? そんな時、押した項目によってその後の内容を変化させれば 項目が減って見た目もスッキリ・ユーザーの離脱も効果的に抑えられるはずです。 JavaScriptはかなりの初心者なので忘れないようメモしてみました。 【サンプル】例えばお申し込みフォームで… ・【初めて申し込む】を押した時は、「紹介者」入力欄・特典を表示。 ・【2度目以降の利用】を押した時は、「会員番号」入力欄を表示。 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力してください。 会員番号 会員番号を入力してください。 特典:初めての方は30%オフ! サンプルソース(ラジオボタン) HTML [html] 利用方法 初めて申し込む 2度目以降の利用 紹介者 紹介された方のお名前を入力して
ブラウザがクラッシュしたり、うっかりリロードしたり。 たくさんの時間をかけて入力したフォームの内容をあっという間に飛ばしてしまった経験は誰しもあると思います。 私はそういう事故が怖いので、長文の場合は自動保存機能のあるエディタやメーラー上で入力するようにしています。しかし、ユーザーの方にそれを望むのは無理というものですよね。 最近のCMSは大抵自動保存する仕組みがついています。そこまで本格的なものでなくてもいいから、簡単に導入できる、負荷の少ないフォームの自動保存機能、欲しくありませんか? こんなご希望にぴったりのjQuery autosave plug-inをご紹介します。 機能の特徴 1.フォームに入力した内容をcookieに保存します(軽い) 2.formタグにあれこれ追記する必要はありません(簡単) 3.保存秒数等、細かい設定も可能です 4.さすがにリビジョンを指定して復元したりす
フォームの入力チェックは、JavaScriptでリアルタイムにできると便利 ウェブ上のフォームに何らかの入力をするとき、一旦送信してからエラーを表示されるよりも、その場でリアルタイムに入力ミスを指摘してくれる方が便利です。その方がページを移動する手間が省けますし、戻る際に入力内容が消えてしまう心配もなくなるからです。 ■入力チェックは、複合条件だと特に手間がかかる フォームへ入力された内容のチェック機能を自力で作るのはかなり面倒です。特に「この項目のチェックがONの場合にだけ、隣のテキスト入力欄への入力が必須」といった複合条件でチェックするのは大変でしょう。HTML5には個別に入力チェックする機能がありますが、複数項目を組み合わせたチェックをしたければ、JavaScriptなどを併用するしかありません。 ■見やすくて分かりやすい形でエラーを表示したい ユーザの入力や選択にミスがあればエラー
最近お問い合わせフォームでリアルタイムに入力項目をチェックするサイトが増えてきているように感じます。 ユーザビリティを向上させられ、お問い合わせ数の増加に期待できそうです。 JavaScriptのライブラリ「jQuery」のプラグインValid8を使用すると簡単に導入できます。 sponsors 使用方法 Valid8からjquery.valid8-1.2.2.jsをjQueryからjquery.jsをダウンロードします。 <script type="text/javascript" src="jquery-1.3.2.js"></script> <script type="text/javascript" src="jquery.valid8-1.2.2.js"></script> <script type="text/javascript"> $(document).ready(fun
最近では、エントリーフォーム最適化(EFO)という施策も広まってきましたが、特に購入やサンプル請求、お問合せ等がコンバージョンとなっているサイトではフォームで離脱されてしまってはせっかくの広告や施策が水の泡になってしまいます。 ここではユーザーを離脱させないために気をつけたいポイントとそれを実現するために便利なjQueryのプラグインを紹介します。 まず、入力フォームを作成する際のポイントは、ユーザーにストレスを感じせない事です。ストレスの原因となるものは大きく言うと 入力しづらい、エラーメッセージがわかりづらい、といった操作に関するもの。 どこまでやれば完了なのかわかない、個人情報の扱いが心配、といった心理的なもの。 です。なのでこの点を解消させてあげるフォームを作成すればユーザーが離脱する可能性は下がりますね。 具体的なポイントは以下のような項目になります。 必須入力か
個人的なメモ。普段さほど使うことが 無いので、必要な時に探すのに時間 掛からないようにまとめておきます。 沢山ある必要はさほど無いのですが、 勉強用も兼ねていろいろと数を揃えて おきました。 お問い合わせフォームのユービザリティ向上として導入されるバリデーション用のjQueryプラグインのまとめと、その他Tipsやフォームデザイン周りの情報をちょろっと。一応動作だけIE6、7でも確認しています。 exValidation 安心(?)の国産プラグインです。複雑なフォームにも対応できるのでとりあえずこれを覚えておけば安心ではないかと思います。 どんなフォームにも使えるjQueryのフォームバリデーション exValidation jquery.validate.js Validationの日本語Ver.です。シンプルなので使い勝手いいですね。日付の確認用プラグインも派生していますので合わせて。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く