更新日:2015.05.27jQuery離脱を防げ!jQueryで入力フォームを改善し成果を出す楽な方法TwitterFacebookはてブPocketLINE(注*2013年7月1日に公開された記事を再編集したものです。)フォームでの離脱率がもっとも大きい悩みの種Web担当者の方こんな悩みはありませんか?問い合わせフォームの離脱率、購入フォームの離脱率が高いWeb担当者の悩み種は離脱率、それも問い合わせフォームや購入フォームでの離脱率、これが最も大きい悩みの種だと思います。膨大な広告費かけ、コンバージョンを上げるために改善や修正を重ね、やっとの思いでユーザーをWebサイトに誘導したのに肝心のフォームで離脱、今までの努力が水の泡...あまりにも残酷すぎます。ページを閉じてしまっては元も子もない!その原因の一つは問い合わせページや購入ページのフォーム入力項目が多く、わかりづらくなっているのかもしれません。ユーザーが「購入するぞ!」と思っても、かわりづらかったら購入せずに離脱してしまいます。テキストボックスにヒントを出してアシストするそこで今回は離脱を少しでもしないようにテキストボックスにヒントを出してくれるjQeryプラグインを紹介します。一度、導入してはいかがでしょうか?1.プラグインのダウンロード「http://digitalbush.com/projects/watermark-input-plugin/」にアクセスし、赤枠の「Uncompressed」をクリック。2.jQueryをテキストエディタにコピペ「Uncompressed」をクリック後、上記のjQueryコードが表示されるので全てを選択してコピーをし、テキストエディタにペーストします。エディタの保存名は「jquery.watermarkinput.js」にします。これで下準備は終わりです。3.head内にjQueryのライブラリを組み込むさきほど、保存した「jquery.watermarkinput.js」と「jQuery」をhead内に組み込みます。src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>※ファイルのパスはそれぞれアップした場所に合わせて変更して下さい。4.head内にプラグインを組み込みhead内に「watermark」を呼び込むための設定をします。tabindex=”1′′>」○○にjavascriptで設定したクラス名を書いて完成です。tabindex="1"></td></tr></table>入力フォームのサンプルはこちらまとめ大きな効果は望めないかもしれませんが、時間をかけて少しずつ効果が出てくると思います。離脱率はWeb担当者にとって永遠のテーマですから少しでもこのjQueryプラグインが多くの人に役立てば幸いです。