『ContactForm7』GET/POSTでデータ送受信のメソッド的なもの

めちゃ久しぶりの記事です。
お仕事が忙しかったり、Macちゃんがブッ壊れたり、復旧後もっと忙しかったりでバタバタでした。でへへ。

『記事ページからお問い合わせフォームに飛び、送信が完了したら、該当記事ページのお問い合わせ数を＋１する』という処理を組んだ時のお話です。
ContactForm7で作成されたお問い合わせフォーム（SSL）に、記事ID等の値をどうやって渡すか、また送信完了後に該当記事ページを対象にどうやって処理するか？
こんな案件であれこれ試行錯誤した結果『ContactForm7フォームページにGETで値を渡す〜送信後に値を保持したまま処理用ページへ遷移』という処理を組んだので、その内容をご紹介します。

まず最初に入れておくプラグイン

まずはプラグインの準備など。

ContactForm7
そろそろ標準搭載になってもいい頃だと思うんですが、手動で入れてあげましょう。

ContactForm7 Modules
ContactForm7にhiddenなフィールドを追加できるようになるプラグインです。
このhiddenフィールドに値を格納して、メールで送信/別スクリプトに送信って具合で使います。

ContactForm7のフォームにデータを渡す

フォームに値を渡したい時は、WPのfunctions.phpに下記のようなソースを追加してあげます。

  function my_form_tag_filter($tag){
    if (!is_array($tag)){
      return $tag;
    }

    // 複数の値を渡したい時は、以下の部分をコピペ
    if(isset($_GET['GETパラメータ名'])){
      $name = $tag['name'];
      if($name == '受け取った値をセットするフォーム名')
        $tag['values'] = (array) $_GET['GETパラメータ名'];
    }
    // （ここまで）

    return $tag;
  }
  add_filter('wpcf7_form_tag', 'my_form_tag_filter');

あ、ちなみにどのサイトを見てもこれと超そっくりなコードが紹介されてます。hehehe.
このコードをfunctions.phpに加えてあげれば、URLにGETパラメータをつけてフォームページを開いた際に、該当フォームへ値が入ってくれるんです。
ページタイトルやお問い合わせタイトルなど、フォームに表示させたい内容の場合はtextフィールドに渡してreadonly化させてあげましょう。商品番号やIDなど非表示にさせたい内容の場合はhiddenフィールドに渡して、こっそり処理すればOKです。
ちなみに値をPOSTで渡したい時には、$_GETを$_POSTに差し替えます。

ContactForm7にフックをかけて処理

メール送信以外に処理を行いたい場合は、ContactForm7の処理にフックをかけて割り込み処理を行います。

ContactForm7トリガー一覧

エラー時

wpcf7:invalid

メールアドレスがスパムだった場合

wpcf7:spam

メールの送信が成功した場合

wpcf7:mailsent

メールの送信が失敗した場合

wpcf7:mailfailed

ajaxが成功した際に必ず呼ばれる

wpcf7:submit

ajax開始前

ajaxStart

ajax送信時

ajaxSend

ajax成功時

ajaxSuccess

ajax失敗時

ajaxError

ajax完了時 成功/失敗の直後

ajaxComplete

ajax終了時 ajaxComplete後

ajaxStop

今回のケースでは『メールの送信が成功した場合』に別処理を行いたかったので、下記のようなコードで割り込み処理を行います。

  <script>
    $('.wpcf7').on('wpcf7:mailsent', function() {
      // メール送信完了後に行いたい処理
    });
  </script>

※参考
【WordPress】Contact Form 7のajaxトリガーを引き当てる – Qiita

フォームがSSLの場合はAJAXに問題が…

メール送信完了後はhiddenフィールドに入れておいた値を拾い、$.getでPHPに値を送信〜update_post_metaで記事ページのカスタムフィールドを更新すればいいや、って考えていたのですが、ここで結構躓きました。とほほ。

お問い合わせフォームページがSSL（httpsから始まるアドレス）だった場合、jQueryの$.ajaxや$.load等で外部からデータを持ってこようとすると、『SSLじゃない未知のプログラムが改変しようとしてるよ、ダメ！（※意訳）』って止められちゃいます。
これの解決法としてjQuery本体もSSLで読み込む（URLをhttpsにして読み込む。または//から始まるURLで指定〜自動的に自身のページと同じプロトコル＝httpsで読み込まれる）という方法も試してみたのですが、なんかウマくいかなかったんです。

※参考
jQuery – httpsだとjQuery/Ajaxは使えないのでしょうか？(3159)｜teratail

なので、値を持たせて処理用ページへリダイレクトさせるという方法で行いました。

  // hiddenフィールドに格納しておいた値を取得
  $param = $("name=['hidden_field']").val();
  // リダイレクト用URL組み立て
  $url = "http://erimaki-house.com/update_func/?param="+$param;
  // 処理用ページへ遷移
  location.href = $url;

こんなカンジのコードで、メール送信完了後（wpcf7:mailsentをフック）にリダイレクトさせてやりました。
リダイレクト後は、GETで受け取った値で自由に処理ができます。やったね！