【コピペで実装】フォームの離脱率を改善！入力情報を保存して自動表示させる方法

こんにちは。井上です。


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

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

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

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


これ、凄くないですか！

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

今回は、メンバーの皆さんにもシェアできるよう、誰でもコピペで実装できるコードと設定方法をまとめてみました。


どういう仕組みなの？

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


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


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


設定は超簡単、たったの2ステップです！

作業は本当にシンプルです。

  1. これから紹介するコードをコピーする

  2. あなたのフォームのHTMLコードを開き、一番下にある</body>というタグのすぐ上に貼り付ける

たったこれだけです。簡単ですよね〜。

▼貼り付け場所のイメージ（MyASPの場合）

MyASPの場合は下記手順で実装していきます。先ずはシナリオ管理メニューを開いてください。

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

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

③カスタムフッター欄が表示されたら下記コードをコピペで貼り付けます。

用途に合わせて選べる2つのコード

今回は、保存するタイミングが違う2種類のコードを用意してみました。個人的には、入力中にリアルタイムで保存してくれる「おすすめ版」が、より親切なので良いかなと思います。

A.【基本版】「登録」ボタンを押した時に保存するコード

これは、「登録する」とか「申し込む」といったボタンが押された瞬間に、入力情報を保存するシンプルなタイプです。

コード（基本版）
<script>
    // ページの読み込み完了時に実行
    document.addEventListener('DOMContentLoaded', function() {
        // 保存されたデータを読み込んで表示
        loadFormData();
        // フォームが送信される時にデータを保存
        const myForm = document.getElementById('UserItemForm');
        if (myForm) {
            myForm.addEventListener('submit', saveFormData);
        }
    });
    // データを読み込む関数
    function loadFormData() {
        const savedLastName = localStorage.getItem('savedUserLastName');
        const savedFirstName = localStorage.getItem('savedUserFirstName');
        const savedEmail = localStorage.getItem('savedUserEmail');
        if (savedLastName) {
            document.getElementById('Username1').value = savedLastName;
        }
        if (savedFirstName) {
            document.getElementById('Username2').value = savedFirstName;
        }
        if (savedEmail) {
            document.getElementById('Usermail').value = savedEmail;
        }
    }
    // データを保存する関数
    function saveFormData() {
        const lastName = document.getElementById('Username1').value;
        const firstName = document.getElementById('Username2').value;
        const email = document.getElementById('Usermail').value;
        if (lastName) {
            localStorage.setItem('savedUserLastName', lastName);
        }
        if (firstName) {
            localStorage.setItem('savedUserFirstName', firstName);
        }
        if (email) {
            localStorage.setItem('savedUserEmail', email);
        }
    }
</script>
B.【おすすめ版】入力中にリアルタイムで保存するコード

こちらは、お客さんが文字を入力するたびに、その内容をリアルタイムで保存してくれるタイプです。これだと、万が一入力の途中でブラウザを閉じちゃっても、またページを開いたときに入力内容が復元されるんですよね。こっちのほうが、より親切な設計な気がします。

コード（おすすめ版）
<script>
    // ページの読み込み完了時に実行
    document.addEventListener('DOMContentLoaded', function() {
        // 保存されたデータを読み込んで表示
        loadFormData();

        // 各入力欄で入力があるたびにデータを保存
        document.getElementById('Username1').addEventListener('input', saveFormData);
        document.getElementById('Username2').addEventListener('input', saveFormData);
        document.getElementById('Usermail').addEventListener('input', saveFormData);
    });

    // データを読み込む関数
    function loadFormData() {
        const savedLastName = localStorage.getItem('savedUserLastName');
        const savedFirstName = localStorage.getItem('savedUserFirstName');
        const savedEmail = localStorage.getItem('savedUserEmail');

        if (savedLastName) {
            document.getElementById('Username1').value = savedLastName;
        }
        if (savedFirstName) {
            document.getElementById('Username2').value = savedFirstName;
        }
        if (savedEmail) {
            document.getElementById('Usermail').value = savedEmail;
        }
    }

    // データを保存する関数
    function saveFormData() {
        const lastName = document.getElementById('Username1').value;
        const firstName = document.getElementById('Username2').value;
        const email = document.getElementById('Usermail').value;

        localStorage.setItem('savedUserLastName', lastName);
        localStorage.setItem('savedUserFirstName', firstName);
        localStorage.setItem('savedUserEmail', email);
    }
</script>


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


いくつか注意点です

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

  • このコードは、姓名とメールアドレスの入力欄のidがそれぞれ Username1, Username2, Usermail になっているフォーム（マイスピーの標準フォームとかですね）で動くようになっています。

  • この機能は、同じドメイン（〇〇.com の部分が同じ）のページじゃないと有効になりません。

  • お客さんがブラウザのキャッシュとか履歴を自分で削除した場合は、保存された情報もリセットされちゃいます。

  • 当然ですが、パスワードとかクレジットカード情報みたいな、超重要な情報を保存する目的では絶対に使わないでくださいね。


まとめ

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

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

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