質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

89.87%

複数ページに渡るお問い合わせフォーム(コンタクトフォーム7)で戻るボタンが機能しない

受付中

回答 0

投稿

  • 評価
  • クリップ 0
  • VIEW 876

kii.32

score 18

前提・実現したいこと

ワードプレスで下記サイトを参考にして、
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の内容

function form_post() {
  if(isset($_POST)){
    $postArray = json_encode($_POST, JSON_HEX_TAG | JSON_HEX_AMP | JSON_HEX_APOS | JSON_HEX_QUOT);
    echo '<script>var postArray = '. $postArray .';</script>';
  }
}
add_shortcode('form', 'form_post');

試したこと

下記ページを見て
<input type="button" value="戻る" onClick="history.back()"/>
と記載してみたのですが、フォーム再送信の確認のページが表示されてしまいます。
有識者の方いらっしゃいましたら、戻るボタンを実装できるように情報をいただきたいです。
どうぞよろしお願い致します。

フォームなどでよくある前画面に戻るボタン からの来たページに戻るボタン

補足情報(FW/ツールのバージョンなど)

ここにより詳細な情報を記載してください。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

まだ回答がついていません

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 89.87%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる
  • トップ
  • PHPに関する質問
  • 複数ページに渡るお問い合わせフォーム(コンタクトフォーム7)で戻るボタンが機能しない