【WordPress】コンタクトフォーム7を動的にする方法

2024年2月27日2024年3月3日

お問い合わせをコンタクトフォーム7で作成したいけど動的にもしたい！

というわけで今回はWordPressのプラグイン「Contact Form 7」を使用しつつ、
お問い合わせフォームを動的にする方法をご紹介します。

コンタクトフォーム7を動的にする方法

私はお問い合わせフォームにはプラグイン「Contact Form 7」を使用することが殆どですが、
実案件で、お問い合わせフォームを動的にする必要がありました。

今回の案件はいわゆるご注文フォームで、クライアント様が商品を更新する仕様。
その商品の増減をフォームで動的に対応する･･･、といった感じでした。

こんなイメージです↓

投稿で商品を更新していき、ご注文フォームの注文チェックボックスが
更新内容によって増減する、といった形です。

投稿数に応じてチェックボックスを増やす実装

まずは、コンタクトフォーム7に落とし込む前に
投稿数に応じてチェックボックスを増やす実装をしていきましょう。

今回はカスタム投稿での実装でした！（投稿名は’order’ 10件表示）

<?php
  $args= [
    'post_type' => 'order',
    'posts_per_page' => 10,
    'order' => 'ASC',
  ];

  $the_query = new WP_Query($args);
  $i=1;
  if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
  
?>
  <div class="p-order-form__checkbox">
    <input type="checkbox" name="order_item[]" value="<?php the_title(); ?>" id="order<?php echo $i?>"><label for="order<?php echo $i?>"><?php echo $i?></label>
  </div>
<?php
  $i++;
  endwhile;
  wp_reset_postdata();
  endif;
?>

せっかくなのでポイントで少し解説します。
投稿数に応じてチェックボックスを増やし、数字を1→2→3と増やしたいので
ループを回す前に「$i=1」とします。

そして、一つのループが終わる直前（endwhileの前）に「$i++」とします。
この「++」はインクリメント演算子と呼ばれ、対象の値を1つ増やすというものです。

ここでいうと、$i=1が代入されているので「1+1＝2」となります。
そして2ループ目は「2+1＝3」となり、ループが回る度に「3+1＝4」･･･となります。

これで投稿数分チェックボックスが増えて、数字も1、2、3･･･と動的にすることができます。

コンタクトフォーム7を動的に読み込む

ではここから本題のコンタクトフォーム7を動的に読み込む方法についてご説明します。

コンタクトフォーム7の基本的な説明は省略しますが、
自身で作成したhtmlをコンタクトフォーム7のフォームに移行するだけで
簡単にコンタクトフォームが作成できるプラグインです。

ですが、移行できるのはhtmlだけなのでphpはできません。
では、先程作成したコードはどのように反映させるのか？？？
説明していきます。

wpcf7_add_form_tag関数を使用する

「wpcf7_add_form_tag」はContact Form7に独自のショートコードを追加する関数で
ショートコードの中を動的にして、ショートコードをコンタクトフォーム7に埋め込みます。
ではさっそくコードを見ていきましょう！
コードはfunctions.phpに書いていきます。

functions.php

<?php

 function add_checkbox() {
   ob_start();

  $args= [
    'post_type' => 'order',
    'posts_per_page' => 16,
    'orderby' => 'title',
    'order' => 'ASC',
  ];

  $the_query = new WP_Query($args);
  $i=1;
  if ($the_query -> have_posts()) : while ($the_query -> have_posts()) : $the_query -> the_post();
  
?>
  <div class="p-order-form__checkbox">
    <input type="checkbox" name="order_item[]" value="<?php the_title(); ?>" id="order<?php echo $i?>">
    <label for="order<?php echo $i?>"><?php echo $i?></label>
  </div>
<?php
  $i++;
  endwhile;
  wp_reset_postdata();
  endif;
  return ob_get_clean();
}
wpcf7_add_form_tag('add_original_tag', 'add_checkbox');

まず「add_checkbox」で、カスタム投稿の情報を吸い出します。（関数名は何でも良いです）
次の「ob_start()」は少し難しいのですが、役割としては出力を自在に操作できるバッファリング機能です。
「ob_start()」以下は、「echo」したとしても出力されません。

HTMLをこの中に記入して、その後に「ob_get_clean()」でバッファ取得と既存のバッファ削除を同時に行います。

あとはここで作成したショートコード　[add_original_tag]　をコンタクトフォーム7に入れ込みます。
入れ込む箇所は、上記で使用したHTMLの箇所です。（HTMLの代わりに差し込むイメージ）

これで、意図した通り動的にお問い合わせを作成することができるようになります。