Contact Form 7で動的に選択肢を生成する方法　

Contact Form 7を使用して、チェックボックス、ラジオボタン、プルダウンメニューなどの選択肢を動的に作成する必要がある場合がある。例えば、「製品」というカスタム投稿を含むウェブサイトがあるとしよう。このウェブサイトで、「製品に関するお問い合わせ」フォームを設定する際に、カスタム投稿で登録されている製品の名前を取得し、それらをチェックボックスの選択肢として動的に表示するというような状況だ。

WordPressでのフォーム開発には有名なプラグイン「Contat Form 7」を使うことも多い。

今回はそのContact Form 7を使用したフォームで、上述の「動的に選択肢を生成する」という仕様を実現するための実装方法を紹介する。

実装方法

手順は至ってシンプル。

• カスタム投稿の情報を吸い出してHTMLを生成する関数を作成する。
• 関数の中身は以下のような内容。
  • WP_Queryで投稿情報を取得してまわす。
  • ob_startでバッファリングを有効にし、その中でHTMLを書く。
    タイトルやカスタムフィールドの値など自由に取得可能。
  • 最後にバッファを返す
• 作成した関数をContact Form7のショートコードに登録。
• 作成したショートコードをContact Form7の編集画面に張り付ける。

コードは以下のようになる。（functions.phpに記載する。）

<?php
function add_original_choices()
{

  ob_start();

  $args = array(
    'post_type' => 'works', //worksというカスタム投稿をもとに動的にinputを生成
    'order' => 'ASC'
  );

  $the_query = new WP_Query($args);
  $i = 0;
  if ($the_query->have_posts()) : while ($the_query->have_posts()) : $the_query->the_post();
?>
      <label for="<?php echo $i; ?>"><?php the_title(); ?></label> <!-- $postのIDをもとに本文やカスタムフィールドの値など自由に取得可能 -->
       <input type="checkbox" id="<?php echo $i; ?>" value="<?php the_title(); ?>">
<?php
      $i++;
    endwhile;
  endif;
  return ob_get_clean();
}
wpcf7_add_form_tag('add_original_tag', 'add_original_choices');
// この場合「add_original_tag」がショートコード名

add_original_choicesという関数でカスタム投稿の情報を吸い出し、HTMLを生成しreturnする。wpcf7_add_form_tagはContact Form7に独自のショートコードを追加する関数なので、それを利用してadd_original_choices関数をadd_original_tagというショートコードにする。

上記で作成したadd_original_tagショートコードをContact Form7の編集画面に張り付ければ完成だ。