前提・実現したいこと
ワードプレスで下記サイトを参考にして、
2ページ+確認画面のお問い合わせフォームを作成したいです。
確認画面のみコンタクトフォーム7を使った方法です。
発生している問題・エラーメッセージ
2ページ目から1ページ目の「戻るボタン」は機能しているのですが、 3ページ目(page-result.php)から2ページ目、1ページ目への戻るボタンが機能しません。 下記メッセージが表示されてしまいます。 「フォーム再送信の確認 このウェブページを正しく表示するには、先ほど入力したデータが必要です。データは再送信できますが、このページで先ほど行った操作を繰り返すことになります。 ページの読み込みに必要なデータを再送信するには、再読み込みボタンを押してください。 ERR_CACHE_MISS」
該当のソースコード
1ページ目(page-request1.php)
<form action="/request2" method="post"> <p>都道府県:<input type="text" name="pref" placeholder="東京都"></p> <p>市区町村:<input type="text" name="city" placeholder="港区"></p> <p>番地:<input type="text" name="area" placeholder="▲■"></p> <button type="submit">進む</button> </form>
2ページ目(page-rewuest2.php)
<form action="/result" method="post"> <p>氏名:<input type="text" name="fullname" placeholder="山田太郎"></p> <p>メールアドレス:<input type="email" name="mail" placeholder="info@exsample.com"></p> <?php //Step 1の内容をまとめて、hiddenへ吐き出しす $pref = htmlspecialchars($_POST['pref']); $city = htmlspecialchars($_POST['city']); $area = htmlspecialchars($_POST['area']); ?> <input type="hidden" name="address" value="<?php echo $pref.$city.$area ?>"> <button type="submit">確認画面へ</button> <button type="button" onclick="history.back()">戻る</button> </form>
3ページ目(page-result.php)
<?php echo do_shortcode('[form]'); ?> <script> jQuery(function($) { //配列から値を取得 var addr = postArray['address']; var name = postArray['fullname']; var mail = postArray['mail']; //値をフォームに入力 $('input[name="addr"]').val(addr); $('input[name="name"]').val(name); $('input[name="mail"]').val(mail); }); </script> //ショートコードでコンタクトフォームを読み込んでいます <?php echo do_shortcode('[contact-form-7 id="105" title="確認画面"]'); ?> <button type="submit">送信</button> <input type="button" value="戻る" onClick="history.back()"/>
※コンタクトフォーム7の内容
[text addr class:pref readonly]
[text name class:city readonly]
[text mail class:area readonly]
※functions.phpの内容
functions.php
1function form_post() { 2 if(isset($_POST)){ 3 $postArray = json_encode($_POST, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT); 4 echo '<script>var postArray = '. $postArray .';</script>'; 5 } 6} 7add_shortcode('form', 'form_post');
試したこと
下記ページを見て
<input type="button" value="戻る" onClick="history.back()"/>
と記載してみたのですが、フォーム再送信の確認のページが表示されてしまいます。
有識者の方いらっしゃいましたら、戻るボタンを実装できるように情報をいただきたいです。
どうぞよろしお願い致します。
フォームなどでよくある前画面に戻るボタン からの来たページに戻るボタン
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー