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

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

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

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

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

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

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

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

最初に、「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]

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

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

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

<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 "送信"]

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