2022.08.08(Mon)

MW WP Form 同一フォームを複数ページで使う

WordPress でメールフォームを作る時に便利なプラグイン MW WP Form 。
Contact Form 7 と違い、入力内容の確認画面が作れるので、確認画面が必要な場合は MW WP Form を使用している方が多いのではないでしょうか。

ただこのプラグイン不便なところもあります。
確認画面と送信完了画面をきちんと別URLで使用したい時は
・入力画面URL
・確認画面URL
・完了画面URL

上記URLを入力する必要があります。

例えば archive.php や single.php など複数ページで同一フォームを使用したい時、「入力画面URL」に特定のURLが入力できないので、エラーが起きます。

今回このような場面に出くわしたので、苦肉の解決策を残しておきます。

複数ページで同一フォームを使用する時、「入力画面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
・完了画面URL

MW WP Form で用意される戻るボタンをそのまま使用してしまうと、確認ページから戻った時に、「このページには直接アクセスできません。」といったエラーが出てしまいます。

なので、戻るボタンは history.back() を使用して自作します。

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

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

どうやら bfcache(back-forward cache) という、Safari の独自のキャッシュの仕組みが原因のようです。

しょうがないので history.back() で戻ったときに強制リロードをして
キャッシュが残らないようにしました。

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']++;
}
?>

かなり無理矢理ですが何とか希望の形になりました。

しかしなんで最初から同一フォームを複数ページで使用できる仕様に改良してくれないんだろうか。

結構需要あるはずだと思うんですよね。

名古屋の Web 制作会社で 9 年半働いた後フリーランスに。中小企業のWEBサイト制作実績 100 サイト以上。ディレクション、デザイン、コーディング、WordPress 構築まで手掛けます。主にWeb系の情報をお届けします。