お問い合わせ・無料相談
WEBのこと 2024.07.25

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

WRITER
Hirabayashi Kazuaki コーダー
Hirabayashi Kazuaki

コーダー。WordPressでのオリジナルテーマ作成・カスタマイズが得意。

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

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

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

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

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

というわけで今回は表題の通り、コンタクトフォーム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;
}

カスタムフィールドのリピートフィールドやコンタクトフォーム7のショートコード作成については以下からどうぞ。

ここまで出来ればあとはフォームのテンプレートに

資料:[original_tag]

と記述すれば表示されます。
あとはcssで見た目を整えて完成!

今回はリピートフィールドでご紹介しましたが、wp_queryで投稿の名前を取得したり等、汎用的に使えるのでカスタマイズして使ってみてください。

また、今回紹介したコードは任意選択のコードなので、そのうち必須項目での作り方もご紹介出来ればと思います。

おわり!

それでは。

JOURNALが気に入ったら「いいね」してね!

Contact

ブランディング・WEB制作・運用まで、まずは一度お話を聞かせてください。 初回のご相談は無料で承っています。

お電話

0120-622835

10:00〜18:00 / 土日祝休

メールフォーム

お問い合わせはこちら