デザインのあれやこれ
『ContactForm7』GET/POSTでデータ送受信のメソッド的なもの
ContactForm7で作成したフォームに値を渡す〜メール送信以外の処理を行うまでの、一連の流れをご紹介します。hiddenフィールド追加プラグイン、functions.phpへコード追加、フックによる割り込み処理、の3ステップです。
めちゃ久しぶりの記事です。
お仕事が忙しかったり、Macちゃんがブッ壊れたり、復旧後もっと忙しかったりでバタバタでした。でへへ。
『記事ページからお問い合わせフォームに飛び、送信が完了したら、該当記事ページのお問い合わせ数を+1する』という処理を組んだ時のお話です。
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>
フォームが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で受け取った値で自由に処理ができます。やったね!