実現したいこと
WordPressのContact form 7でメールフォームを作っています。
プラグインのContact Form 7 Cost Calculatorで金額の計算を、Contact Form 7 Multi-Step Formsで確認画面を作っています。
確認画面から戻るボタンで入力画面に戻った時に、ラジオボタンのチェック内容を保持したいです。
しかし、Contact Form 7 Cost Calculatorで作成したラジオボタンのチェック内容が、戻った時に保持されずリセットされてしまうので、改善したいです。
申し訳ございませんがご教示を宜しくお願い致します。
発生している問題・分からないこと
Contact Form 7 Cost Calculatorのラジオボタンにチェックを入れて確認画面に進み、戻るボタンで戻ったらラジオボタンに入れたチェックがリセットされます。
該当のソースコード
リセットされるコード（Contact Form 7 Cost Calculator） [radio_custom glove-color use_label_element default:1 "100|ベージュ" "200|ブルー" "300|レッド"] 保持されるコード（通常のコンタクトフォームのラジオボタン） [radio glove-color use_label_element default:1 "ベージュ" "ブルー" "レッド"]
下記はChatGptの回答です。 ------------------------- Contact Form 7 Multi-Step FormsとContact Form 7 Cost Calculatorの組み合わせで、戻るボタンを使用しても選択がリセットされないようにするためには、JavaScriptを使用してフォームの状態を管理する必要があります。以下に、そのための基本的な手順を示します。 JavaScriptを使って選択状態を保存する。 戻るボタンをクリックしたときに、保存した選択状態を復元する。 以下は、この手順を実装するためのサンプルコードです。まず、Contact Form 7 Multi-Step Formsの前のステップで、選択されたラジオボタンの値をJavaScriptで記憶します。 html Copy code <script> // 選択されたラジオボタンの値を保存する変数 var selectedValue = ""; // ラジオボタンが変更されたときに、選択された値を変数に保存する関数 function saveSelectedValue() { selectedValue = document.querySelector('input[name="your-radio-field"]:checked').value; } // ページが読み込まれたときに、選択された値を保存する document.addEventListener('DOMContentLoaded', function () { saveSelectedValue(); }); </script> そして、戻るボタンがクリックされたときに、保存した選択状態を復元します。 html Copy code <script> // 戻るボタンがクリックされたときに、保存した選択状態を復元する関数 function restoreSelectedValue() { var radioButtons = document.querySelectorAll('input[name="your-radio-field"]'); radioButtons.forEach(function (radioButton) { if (radioButton.value === selectedValue) { radioButton.checked = true; } }); } // 戻るボタンがクリックされたときに、選択状態を復元する document.addEventListener('DOMContentLoaded', function () { document.getElementById('your-back-button').addEventListener('click', function () { restoreSelectedValue(); }); }); </script> これらのコードを、Contact Form 7 Multi-Step Formsの適切な場所に組み込んでください。また、必要に応じてyour-radio-fieldを適切なラジオボタンの名前に、your-back-buttonを戻るボタンのIDに変更してください。
試したこと・調べたこと
上記の詳細・結果
Google検索やChatgptで調べましたが具体的な解決方法が見つかりませんでした。
補足
特になし
0 コメント