ContactForm7で入力途中の内容を自動保存する方法（保存→復元まで）

複数のContact Form 7フォームに対応し、各フォームの入力欄ごとに途中入力をブラウザに記憶する応用例です。フォームIDを限定せずに、自動で全てのフォームに対応します。

1 実装のポイント

• 複数フォームに対応（ページ内に複数の Contact Form 7 フォームがあってもすべて処理対象になります）
• 入力欄ごとに独立して保存
• ページを離れても内容が復元される
• フォーム送信後に該当フォームだけクリア

2 functions.php にコードを追加

// ------------------------------
// 複数フォーム対応・途中入力保存
// ------------------------------
function cf7_draft_save_button_script() {
    ?>
    <script type="text/javascript">
    (function(){
        document.addEventListener('DOMContentLoaded', function(){
            var forms = document.querySelectorAll('.wpcf7 form');
            forms.forEach(function(form){
                var formId = form.getAttribute('id') || form.dataset.wpcf7Id || 'cf7_form_default';
                var fields = form.querySelectorAll('input[type=text], input[type=email], textarea, select');

                // 一時保存ボタン作成
                var saveBtn = document.createElement('button');
                saveBtn.type = "button";
                saveBtn.textContent = "一時保存";
                saveBtn.className = "cf7-save-draft-btn";

                // 送信ボタンの隣に挿入
                var submitBtn = form.querySelector('input[type=submit], button.wpcf7-submit');
                if(submitBtn && submitBtn.parentNode){
    			submitBtn.parentNode.insertBefore(saveBtn, submitBtn); // ← submitBtn の前に置く
		} else {
    			form.appendChild(saveBtn);
		}

                // 保存処理
                saveBtn.addEventListener('click', function(){
                    fields.forEach(function(field){
                        if(!field.name) return;
                        var key = 'cf7_' + formId + '_' + field.name;
                        localStorage.setItem(key, field.value);
                    });
                    alert("入力内容を保存しました。");
                });

                // 復元処理
                fields.forEach(function(field){
                    if(!field.name) return;
                    var key = 'cf7_' + formId + '_' + field.name;
                    var saved = localStorage.getItem(key);
                    if(saved !== null) field.value = saved;
                });

                // 送信後クリア
                form.addEventListener('wpcf7submit', function(){
                    fields.forEach(function(field){
                        if(!field.name) return;
                        var key = 'cf7_' + formId + '_' + field.name;
                        localStorage.removeItem(key);
                    });
                }, false);
            });
        });
    })();
    </script>
    <style>
    .cf7-save-draft-btn {
        margin-left: 10px;  /* 送信ボタンとの間隔 */
        padding: 8px 15px;
        background: #eee;
        border: 1px solid #ccc;
        cursor: pointer;
    }
    .cf7-save-draft-btn:hover {
        background: #ddd;
    }
    </style>
    <?php
}
add_action('wp_footer', 'cf7_draft_save_button_script');

3 汎用CSS

/* -------------------------
*  複数フォーム対応・途中入力保存
---------------------------- */

/* 送信ボタン */
.wpcf7 input[type="submit"] {
    background-color: #f90;   /* 背景色（オレンジ） */
    color: #fff;              /* 文字色（白） */
    border: none;             /* 枠線なし */
    border-radius: 5px;       /* 角を丸める */
    padding: 15px 30px;       /* 内側余白（上下15px・左右30px） */
    font-size: 1.1em;         /* 文字サイズを少し大きめに */
    cursor: pointer;          /* カーソルをポインタ（手の形）にする */
    transition: background-color 0.3s ease; /* ホバー時の色変化をなめらかに */
    margin-top: 1em;          /* 上に余白をとる */
}
.wpcf7 input[type="submit"]:hover {
    background-color: #e07b00;  /* ホバー時に少し濃いオレンジに変化 */
}

/* スマホ対応（画面幅600px以下） */
@media screen and (max-width: 600px) {
    .wpcf7 input[type="submit"] {
		margin-right:-5px !important;
    }
    .wpcf7 input[type="submit"] {
        width: 100%;      /* 送信ボタンも幅100% */
    }
}



/* 一時保存ボタン */
.wpcf7 .cf7-save-draft-btn {
    background-color: #28a745;   /* 背景色（グリーン） */
    color: #fff;                 /* 文字色（白） */
    border: none;                /* 枠線なし */
    border-radius: 5px;          /* 角を丸める */
    padding: 15px 30px;          /* 内側余白（上下15px・左右30px） */
    font-size: 1.1em;            /* 文字サイズを送信ボタンと同じに */
    cursor: pointer;             /* カーソルをポインタにする */
    transition: background-color 0.3s ease; /* ホバー時の色変化をなめらかに */
    margin-top: 1em;             /* 上に余白をとる */
    margin-right: 10px;			 /* 送信ボタンとの間に横スペースを入れる */
    display: inline-block;       /* 横並びで配置できるようにする */
}
.wpcf7 .cf7-save-draft-btn:hover {
    background-color: #218838;   /* ホバー時に少し濃いグリーンに変化 */
}
    
/* スマホ対応（画面幅600px以下） */
@media screen and (max-width: 600px) {
    .cf7-save-draft-btn {
        display: block;   /* 横並び解除 */
        width: 100%;      /* 幅100% */
        margin-right: 0;  /* 右マージン解除 */
        margin-bottom: 10px; /* 下に余白 */
		margin-left:5px !important;
    }
    .wpcf7 input[type="submit"] {
        width: 100%;      /* 送信ボタンも幅100% */
    }
}
    

4 代用プラグイン

• CF7 Smart Grid Design（フォームデザイン＋部分入力保持対応）
• Save Contact Form 7 (Draft / Partial Form Save)

5 まとめ

• 複数フォーム・入力欄ごとに途中入力を自動保存
• フォーム送信後に該当フォームだけクリア
• テーマに応じたCSSでレイアウト調整可能
• ユーザーの利便性向上、離脱防止に効果的