UPDATE:2024.7.25
- CATEGORY
ContactForm7のチェックボックスを動的に作成する方法
こんにちは。ニッチな記事しか脳がない男、かずです。
今回も汎用性があるのかないのか微妙だけど便利なコードをご紹介します!!
たとえば資料請求なんかでパンフレットやカタログの画像をチェックボックスに表示させて対応したい事ありますよね!
さらにそれをカスタムフィールドで動的に簡単に編集出来たらいいですよね!
そうですよねわかります!
というわけで今回は表題の通り、コンタクトフォーム7を使って動的にチェックボックスを作っていきます。
カスタムフィールドはACFやCFSなんかをよく使っていますが、お好きなものをご利用ください。
今回はCFSのリピートフィールドを使った場合でご紹介します。
カスタムフィールドでは、名前と画像を登録しています。
とりあえず完成形からどうぞ。
カスタムフィールドのリピートフィールドやコンタクトフォーム7のショートコード作成については以下からどうぞ。
ここまで出来ればあとはフォームのテンプレートに
あとはcssで見た目を整えて完成!
今回はリピートフィールドでご紹介しましたが、wp_queryで投稿の名前を取得したり等、汎用的に使えるのでカスタマイズして使ってみてください。
また、今回紹介したコードは任意選択のコードなので、そのうち必須項目での作り方もご紹介出来ればと思います。
おわり!
それでは。
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;
}