MW WP Formでフォーム完了画面内のiframeにフォーム内容データを渡す
クエリパラメータとPOST
デザイン会社様より、すでに構築済のWordpressサイトでフォームからデータを送信完了ページ内iframeコンテンツに渡すという依頼をいただきました。
フォームで会員登録を完了した後で決済ページ前の中間ページにフォーム内容の値を渡す仕様です。
使用環境
WordPress 5.2.5
MW WP Form 4.2.0
jQuery 2.2.4
フォームには「MW WP Form」プラグインが使われており、ソースを改造することなくフィルターフックなどを使って対応できればいいなと思い調べてみました。
フォーム送信後に処理ができるフィルターフックが見つかりましたので今回はこれを利用します。
作業概要
・完了画面URLにフォームデータのクエリパラメータを追記。（MW WP Formフィルターフック）
・完了ページ内（メインフレーム）hiddenの値に埋め込む。（JavaScript）
・メインフレームのフォームをsubmitし、POSTでiframe内phpにデータを渡す。（JavaScript）
・submit後にiframe内を読み込む。（JavaScript）
という流れで行いました。
JavaScriptだけでクエリパラメータから直接「子フレーム」に値を送るつもりでしたが、iframeで呼び出したphp内でハッシュと照合するスクリプトが入っていたので一度躓きました。
phpにPOSTでデータを渡してからiframe呼び出しすることで無事にデータが渡されました。
フィルターフック
すでにフォームは作成済のという想定です。
テーマのfunction.phpにフィルターフックを追記します。
「mw-wp-form-xxxx」のxxxxにはフォームのkeyを当てはめてください。
フォームの内容のいくつかをURLのクエリパラメータに渡します。
フォーム送信完了ページがリダイレクトされ、URLパラメータが正しいかどうかを確認します。
JavaScriptとCSS
フォームの項目に会員の種類を選択できる項目があり、選択した会員の種類を決済金額の数値に置き換える作業をしています。
完了ページ内にinput hiddenのフォームを用意し、取得したクエリパラメータをセットし、iframe内phpに対してPOSTでデータを送ります。
submitの後でiframeを表示するようにすれば、データを受け取った後のphpが呼び出されます。
まとめ
MW WP Formプラグインにはフィルターフック機能が沢山あり、便利で大変助かりました。
ありがとうございます。
参考サイト（感謝です！）
