こんにちは。

佐藤です。

今日はwordpressのフォーム製作の定番プラグイン

「Contact Form 7」

このプラグインのselectボックスの中身を

phpで簡単に自動設定する方法を解説します。

ちなみにselectボックスと言ってますが、別にselectボックスじゃなくても出来ます。

ただ、分かりやすく説明するためにselectボックスに絞って解説していきます。

※今回は応用することが前提となっており、

コピペだけで実装できるものではなく、多少の知識が必要となります。

予めご了承ください。

実装するには「wpcf_form_tag」というフィルターフックを使って実装していきます。

という訳でまずは以下をfunction.phpに記述しましょう。

//Contact Form 7 のカスタマイズ
function filter_wpcf7_form_tag( $scanned_tag, $replace ) {

  /*
  ここに処理を記述していく。
  */

  return $scanned_tag; 
}; 
         
add_filter( 'wpcf7_form_tag', 'filter_wpcf7_form_tag', 11, 2 );

このフィルターフックでは、Contact Form 7のコンテンツエディタ内でショートコードを使って入力したタグを編集できます。

例として[select* menu-92 id:test_id class:test_class “test1” “test2” “test3”]と入力した場合の$scanned_tagに入るデータを見てみましょう。

  object(WPCF7_Pipes)#7115 (1) {
[“pipes”:”WPCF7_Pipes”:private]=>
array(3) {
[0]=>
      object(WPCF7_Pipe)#7116 (2) {
[“before”]=>
string(5) “test1”
[“after”]=>
string(5) “test1”
}
[1]=>
      object(WPCF7_Pipe)#7117 (2) {
[“before”]=>
string(5) “test2”
[“after”]=>
string(5) “test2”
}
[2]=>
      object(WPCF7_Pipe)#7118 (2) {
[“before”]=>
string(5) “test3”
[“after”]=>
string(5) “test3”
}
}
}
[“labels”]=>
array(3) {
[0]=>
string(5) “test1”
[1]=>
string(5) “test2”
[2]=>
string(5) “test3”
}
[“attr”]=>
string(0) “”
[“content”]=>
string(0) “”
}

//////////////////////////////////////////////////////////////////////////

沢山項目がありますが重要なものだけ軽く解説。

・[“values”](array)

配列で値を設定できます。

プレースホルダ―のテキスト修正ももこちらです。

inputのtextの場合も配列で設定します。

・[labels](array)

配列でラベルを設定できます。

selectなどではこちらも合わせて変更する必要があります。

・[options](array)

クラスやIDなど色々な設定が入ってます。

[select* category:x-type]といった感じで適当な属性を付けた場合もここに入ります。

この「$scanned_tag」の内容を書き換え、returnで返すことにより内容を修正できます。

という訳で実際にありそうな以下内容で作ってみます。

●カスタム投稿タイプで「採用情報」を投稿するカスタム投稿タイプ(recruit)を用意し、採用情報を複数登録し、表示させるWebサイトを制作した。

Contact Form 7のお問い合わせフォームのselectタグで「採用情報」に登録している情報のタイトルを選択できるようにしたい。
※「採用情報」を登録・削除した際、自動で反映するようにすること。

① Contact Form 7 のコンテンツエディタでselectタグを用意する。

応募する求人情報[select* recruit-select]

② function.phpに以下を記述

//Contact Form 7 のカスタマイズ
function filter_wpcf7_form_tag( $scanned_tag, $replace ) {

  if(!empty($scanned_tag)){

    //nameで判別
    if($scanned_tag['name'] == 'recruit-select'){

      //カスタム投稿タイプの取得
      global $post;
      $args = array(
        'posts_per_page' => -1, 
        'post_type' => 'recruit',
        'order' => 'DESC',
        );
      $customPosts = get_posts($args);
      if($customPosts){
        foreach($customPosts as $post){
          setup_postdata( $post );

          $title = get_the_title();

          //$scanned_tagに情報を追加
          $scanned_tag['values'][] = $title;
          $scanned_tag['labels'][] = $title;
          
        }
      }
      wp_reset_postdata();

    }

  }

  return $scanned_tag; 
}; 
         
add_filter( 'wpcf7_form_tag', 'filter_wpcf7_form_tag', 11, 2 );

以上で上記[select* recruit-select]では「採用情報」のリストが表示されるようになりました。

この様に自由に変更できますので「wpcf_form_tag」なかなかにおすすめです。