コンタクトフォームのドロップダウンメニューに条件分岐をつける方法【Conditional Fields for Contact Form 7】

みーちゃん
コンタクトフォームのドロップダウンメニューに、条件分岐をつける方法ないのかな??

 

そんな疑問に答える本記事です!

 

こんにちは。未経験から稼げるエンジニアになった、いちかわともや(@tomochan8282)です。本日は、コンタクトフォームのドロップダウンメニューに、条件分岐をつける方法をご紹介したいと思います。

 

 

条件分岐というのは、このようなものです。

 

本記事を読めば、コンタクトフォームのドロップダウンメニューに、条件分岐をつける方法がわかります。

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?

 

コンタクトフォームのドロップダウンメニューに条件分岐をつける方法【Conditional Fields for Contact Form 7】

◆もくじ

コンタクトフォームのドロップダウンメニューに条件分岐をつける方法【Conditional Fields for Contact Form 7】

  1.  プルダウンメニューを作る
  2.  Conditional Fields for Contact Form 7をインストール
  3.  グループを作る
  4.  条件分岐の設定をする
  5.  同様に




プルダウンメニューを作る

 

最初に、「Contact Form 7」を使って、このようなプルダウンメニューを作ります。

 

<label>メニュー
    [select menu-menu "たこ焼き" "焼きそば"] </label>
[submit "送信"]

このように記述をすれば、プルダウンメニューが作れます。

 

 

▼Contact Form 7の使い方はこちら

 

Conditional Fields for Contact Form 7をインストール

次に、「プラグイン」>「新規追加」より「Conditional Fields for Contact Form 7」をインストールします。

 

「有効化」を押します。

 

グループを作る

「お問い合わせ」>「コンタクトフォーム」より、「Conditional fields Group」をクリックします。

 

グループ名を入力します。ここではグループ名を「takoyaki」としました。「タグを挿入」をクリックします。

 

<label>メニュー
    [select menu-menu "たこ焼き" "焼きそば"] </label>

    [group takoyaki][/group]
[submit "送信"]

このような記述になります。

 

そして、

[group takoyaki][/group]

の間に、新しいプルダウンメニューを作ります。

 

この位置で、「ドロップダウンメニュー」をクリックします。

 

「ソース味・しょうゆ味・明石焼き」のプルダウンメニューを作ります。オプションに、1行ずつ記入しましょう。「タグを挿入」をクリックします。

 

<label>メニュー
    [select menu-menu "たこ焼き" "焼きそば"] </label>

    [group takoyaki][select menu-takoyaki "ソース味" "しょうゆ味" "明石焼き"][/group]
[submit "送信"]

このような記述になります。

 

ここで「保存」をしましょう。

 

条件分岐の設定をする

ここから、条件分岐の設定をしていきます。「Conditional fields」をクリックします。

 

「add new conditional rule」をクリックします。

 

【Show「takoyaki」if 「menu-menu」「equals」「たこ焼き」】と記入しましょう。

 

これは、【①もし「menu-menu」で「たこ焼き」を選んだら、、②「group takoyaki」が出現します】という意味です。

 

「保存」を押します。

 

このように、「たこ焼き」を選んだ時に、「ソース味・しょうゆ味・明石焼き」のプルダウンメニューが新たに出現するようになりました。

 

同様に

同様に、「焼きそば」のメニューも作ってみましょう。「Conditional fields Group」をクリックします。

 

グループ名を「yakisoba」にします。「タグを挿入」をクリック。

 

 

<label>メニュー
    [select menu-menu "たこ焼き" "焼きそば"] </label>

    [group takoyaki][select menu-takoyaki "ソース味" "しょうゆ味" "明石焼き"][/group]
    [group yakisoba][/group]
[submit "送信"]

このような記述になります。

 

そして、

[group yakisoba][/group]

の間に、新しいプルダウンメニューを作ります。

 

<label>メニュー
    [select menu-menu "たこ焼き" "焼きそば"] </label>

    [group takoyaki][select menu-takoyaki "ソース味" "しょうゆ味" "明石焼き"][/group]
    [group yakisoba][select yakisoba "豚入り" "イカ入り" "エビ入り"][/group]
[submit "送信"]

このような記述になります。

 

ここで「保存」をしましょう。

 

「Conditional fields」より、「And」をクリックします。

 

【Show「yakisoba」if 「menu-menu」「equals」「焼きそば」】と記入しましょう。

 

これは、【①もし「menu-menu」で「焼きそば」を選んだら、、②「group yakisoba」が出現します】という意味です。

 

「保存」を押します。

 

このように、「焼きそば」を選んだ時に、「豚入り・イカ入り・エビ入り」のプルダウンメニューが新たに出現するようになりました。

 

最後までお読みいただきありがとうございました!

未経験から
稼げるエンジニアになる
正しい方法

侍エンジニア塾なら、わずか6ヶ月で稼げるエンジニアを目指せます。IT業界が人手不足の今、思い切ってエンジニアになってみませんか?

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA