フォームの離脱率を改善！入力情報を保存して自動表示させる方法

こんにちは。井上です。

これ、地味なストレスなんですけど、いろんなサイトでメルマガとか申し込もうとすると、毎回毎回、名前とメールアドレスを入力させられるじゃないですか。

「またこれ入力するのか…」って、正直ちょっと面倒になりますよね〜。私もしょっちゅう思います（笑）。

このほんの少しの面倒くささが、実は登録率をじわじわと下げている原因だったりするわけです。もったいないですよね。

で、早速やってみたんですが、この「毎回入力する手間」をなくす、かなり便利な方法を見つけました。一度入力してくれた方の情報をブラウザに記憶させておいて、次からは自動で表示させる、っていう仕組みです。

これ、凄くないですか！

専門的な知識は一切不要で、基本的にコピペ一発で終わります。自分のいくつかのランディングページで試した結果、体感ですが、フォームまで到達した人の登録率が1割か2割くらい上がったような気がします。

今回は、その仕組みと設定の流れを、MyASPで実装する場合の手順としてまとめてみました。

ちょっとだけ裏側の話をすると、これはブラウザが標準で持っている「localStorage（ローカルストレージ）」っていう機能を使っています。

ウェブサイトごとに使える「ブラウザ内の一時的なメモ帳」みたいな感じです。

一度目のフォーム入力で名前やアドレスをこのメモ帳に書き込んでおく。そして、同じサイト内の別のフォームを開いたときに、そのメモ帳から情報を取り出して「前回と同じ方ですね？」って感じで自動で入力してくれる、というわけです。

作業自体はシンプルで、MyASPのフォームデザイン画面に小さなスクリプトを1つ追加するだけです。

先ずはシナリオ管理メニューを開いてください。

①シナリオ管理メニューの「登録フォームデザイン」をクリック

②登録フォームデザインが開いたら下にスクロールして「カスタムフッター」の部分をクリックして入力欄を表示させます。

③カスタムフッター欄が表示されたら、用意したスクリプトを貼り付けます。

④スクリプトを貼り付けたら「変更する」をクリック。シナリオ管理メニューに戻ったら設定完了です。

保存するタイミングの違いで、スクリプトは2種類に分けられます。

登録ボタンを押した時に保存する方法：「登録する」「申し込む」といったボタンが押された瞬間に、入力内容を保存するシンプルなタイプです。
入力中にリアルタイムで保存する方法：文字を入力するたびに内容を保存するタイプです。万が一入力の途中でブラウザを閉じても、またページを開いたときに入力内容が復元されます。個人的には、こちらのほうがより親切な設計だと思います。

スクリプトの全文（2種類）と貼り付け後の確認ポイントは、noteの有料記事で公開しています。

このコードを実装する際の注意点です。実装前に必ず確認をしてください。

このコードは、姓名とメールアドレスの入力欄のidがそれぞれ Username1, Username2, Usermail になっているフォーム（マイスピーの標準フォームとかですね）で動くようになっています。
この機能は、同じドメイン（〇〇.com の部分が同じ）のページじゃないと有効になりません。
お客さんがブラウザのキャッシュとか履歴を自分で削除した場合は、保存された情報もリセットされちゃいます。
当然ですが、パスワードとかクレジットカード情報みたいな、超重要な情報を保存する目的では絶対に使わないでくださいね。

たったこれだけの簡単な設定で、お客さんの入力ストレスを減らして、フォームの登録率を改善できる可能性があるわけです。

こういう小さな改善の積み重ねが、広告費あたりの獲得件数とか、最終的なビジネスの成果に大きな差を生むんですよね。

ぜひあなたのランディングページや登録フォームに導入して、効果を試してみてください！