トップページ > ブログ > ContactForm7のチェックボックスを動的に作成する方法

BLOG

ブログ

UPDATE:2024.7.25

CATEGORY

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で投稿の名前を取得したり等、汎用的に使えるのでカスタマイズして使ってみてください。
また、今回紹介したコードは任意選択のコードなので、そのうち必須項目での作り方もご紹介出来ればと思います。


おわり!

それでは。

Happiness in Design

シアワセをデザインする会社

営業ゼロで年間600件以上
お問い合わせをいただいている
ノウハウを惜しみなく。

アプリコットデザインには創業当初から営業マンはいません。
創業当初からWEBを活用することに重点を置いて、これまで試行錯誤してきました。その結果、年間600件以上の問い合わせををこのホームページから得ています。ホームページという集客ツールを提供している私たち自身が、自社のホームページで集客できないのでは、お客様に自信を持ってオススメすることはできません。自社の実験から「WEBを活用して集客するためのノウハウを蓄積」した上で、誰よりもホームページの素晴らしさを知り、自信をもってお客様にご提供していきたいと考えます。

VIEW MORE

CONTACT

お問い合わせ・ご相談は
お気軽にどうぞ。

tel.0120-622835

営業時間/10:00〜18:00 
定休日/土日祝日

プロジェクト

それぞれの
らしさ溢れる日常を。

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ、トリミングサロン、ネイルサロン、スクール「tone village(トーンビレッジ)」

カフェ/ドッグサロン/
ネイルサロン/スクール

tone village

We're open.

採用情報

recruit info

豊かで彩りのある社会をつくる!

私たちは仕事を通して、一人でも多くの人が未来に対する希望を描けるような、そんなワクワクする社会をつくっていきたいと思っています。

VIEW MORE