MW WP Formは、Contact Form 7と違って入力内容の確認画面を作れるため、確認画面が必要なフォームで使ってきた方も多いプラグインです。ただ、少し不便なところもあります。

確認画面・完了画面を別URLで使いたい場合、MW WP Formでは「入力画面URL」「確認画面URL」「完了画面URL」を指定する必要があります。ここで問題になるのが、archive.phpやsingle.phpなど複数ページで同一フォームを使いたいときです。入力画面のURLが1つに定まらず、エラーになってしまいます。

結論から言うと、「入力画面URL」を空欄にし、戻るボタンやSafari対策を自作することで対応できます。今回このケースに出くわしたので、その解決策をまとめておきます。

「入力画面URL」は空欄にする

たとえばarchive.phpにフォームを埋め込む場合、URLは次のように複数にわたります。

https://aaaa.com/blog/
https://aaaa.com/blog/page/2/
https://aaaa.com/blog/page/3/

このように入力画面のURLが定まらないため、特定のURLを指定できません。そこで、「入力画面URL」は空欄のままにします。「確認画面URL」「完了画面URL」には、それぞれ適切なURLを入力します。

戻るボタンは history.back() で自作する

MW WP Formが用意する戻るボタンをそのまま使うと、確認ページから戻ったときに「このページには直接アクセスできません。」というエラーが出てしまいます（入力画面URLを空欄にしているため）。

そこで、戻るボタンはhistory.back()を使って自作します。

<button class="input_but back" type="button" onclick="history.back()">戻る</button>

Safariで送信ボタンが押せない問題

Chromeではこれで問題ないのですが、Safariではhistory.back()で戻ったフォームページで、再度「送信ボタン」を押そうとしても押せない、という事象が発生しました。

原因は、Safariのbfcache（back-forward cache）というキャッシュの仕組みのようです。前のページの状態がキャッシュから復元されるため、ボタンが正しく機能しなくなっていました。

戻ったときに強制リロードする

対策として、history.back()で戻ったときに強制リロードし、キャッシュが残らないようにしました。pageshowイベントのevent.persistedで、bfcacheから復元されたかを判定できます。

window.onpageshow = function(event) {
  if (event.persisted) {
    window.location.reload();
  }
};

ただ、これだと当然ながら、フォームに入力したデータもきれいに消えてしまいます。これでは元も子もありません。

入力データはセッションで残す

リロードしても入力値を残せるように、セッション（Session）を使います。ページのテンプレートPHPの先頭に、次のようにセッションを開始する記述を加えます。

<?php
session_start();

if (!isset($_SESSION['formdata'])) {
    $_SESSION['formdata'] = 0;
} else {
    $_SESSION['formdata']++;
}
?>

実際には、各入力欄の値をセッションに保存しておき、リロード後にその値を各フィールドへ復元する、という処理を組み合わせます。上記はセッションを使うための土台の部分なので、保持したい項目に合わせて、値の保存・復元を追加していきます。

まとめ

• 複数ページで同一フォームを使うときは「入力画面URL」を空欄にする
• 戻るボタンはhistory.back()で自作する
• Safariのbfcache対策としてpageshowで強制リロードする
• リロードで消える入力値はセッションで保持する

やや力技ではありますが、これで複数ページでの同一フォーム利用を実現できました。なお、MW WP Formは現在、開発・サポートが終了しています。既存サイトの保守では役立つ内容ですが、新規構築ではContact Form 7など他のフォームプラグインも検討するとよいでしょう。