POSTED | 2024.07.25

ContactForm7のチェックボックスを動的に作成する方法

WWEBのこと

WRITER : アプリコットデザインスタッフ

アプリコットデザインのスタッフが綴っています。

こんにちは。
ニッチな記事しか脳がない男、かずです。

今回も汎用性があるのかないのか微妙だけど便利なコードをご紹介します！！

たとえば資料請求なんかでパンフレットやカタログの画像をチェックボックスに表示させて対応したい事ありますよね！
さらにそれをカスタムフィールドで動的に簡単に編集出来たらいいですよね！

そうですよねわかります！

というわけで今回は表題の通り、コンタクトフォーム7を使って動的にチェックボックスを作っていきます。

カスタムフィールドはACFやCFSなんかをよく使っていますが、お好きなものをご利用ください。

今回はCFSのリピートフィールドを使った場合でご紹介します。
カスタムフィールドでは、名前と画像を登録しています。
とりあえず完成形からどうぞ。

add_action( ‘wpcf7_init’, ‘custom_add_form_tag_original’ );
function custom_add_form_tag_original() {
wpcf7_add_form_tag( ‘original_tag’, ‘custom_original_form_tag_handler’ );
}
function custom_original_form_tag_handler( $tag ) {
$pageId = カスタムフィールドの固定ページid;
$fields = CFS()->get(‘リピートフィールド’, $pageId);
$html = ”;
if( $fields ){
$i = 0;
foreach( $fields as $field ){
$html .= ‘<label for=”‘. $i .'”>’;
$html .= ‘<input type=”checkbox” id=”‘. $i .'” value=”‘. $field[‘name’] .'” name=”catalog[]”><span>’. $field[‘name’] .'</span>’;
$html .= ‘<img src=”‘. $field[‘image’] .'”>’;
$html .= ‘</label>’;
$i++;
}
}
return $html;
}