WordPress Contact Form 7にドロップダウンメニューを追加

wordpressイメージWordPress

WordPressでお問い合わせフォームを簡単に作れるプラグインです。

Contact Form 7は簡単に導入でき、HTMLやCSSの専門的な知識がなくてもお問い合わせフォームが作れます。このサイトではデフォルトのまま使用しています。

他のサイト制作でプルダウン(ドロップダウンメニュー)、電話番号などを追加したので、忘備録としてアレンジ方法を説明します。

ドロップダウンメニューの作成方法

ワードプレスContact Form 7
左側の「お問い合わせ」をクリック、次に「コンタクトフォーム」の編集をクリックします。デフォルトは名前、メールアドレス、題名、メッセージ本文のみのシンプルな文面です。

ワードプレスContact Form 7「ドロップダウンメニュー」をクリックします。

  • 項目タイプに必須にする場合はチェックを入れます。
  • 名前はmenu-areaと入力。
  • オプションに大阪府、京都府、兵庫県と1行ことに入力。
  • 空の項目を先頭に挿入するにチェック。(空の項目が要らない場合はチェックを外す。)

タグを挿入をクリックするとプルダウンメニューができます。
ワードプレスContact Form 7
記述は <label>[select menu-area include_blank “大阪府” “兵庫県” “京都府”]</label>

メニューをクリックしたら他のメニューが出る分岐作成方法

上記で作成したプルダウンメニューをクリックすると、さらにメニューが出てくると活用も増えますし、スッキリとしたレイアウトが作成できます。

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

ワードプレスContact Form 7プラグイン
プラグインの新規追加から「Contact Form 7 – Conditional Fields」をインストールします。有効化をクリック。

グループを作成

有効化すると項目が増えています。「Conditional Fields Group」をクリックします。
ワードプレスContact Form 7
グループ名はosakaにしています。タグを挿入をクリックします。

記述は[group osaka][/group]です。次に[group osaka]と[/group]の間にプルダウンメニューを作成します。

ワードプレスContact Form 7

分岐するドロップダウンメニューの作成

[group osaka]と[/group]の間にカーソルを入れて「ドロップダウンメニュー」クリックします。ワードプレスContact Form 7

  • 名前はmenu-osakaと入力。
  • オプションに大阪市、堺市、豊中市と1行ことに入力。

タグを挿入をクリック、保存します。記述は[group osaka][select menu-osaka “大阪市” “堺市” “豊中市”][/group] です。

プルダウンメニュー条件の設定方法

「Conditional fields」をクリックし、グリーンの「add new conditional rule」をクリックします。
ワードプレスContact Form 7

Show「osaka」if 「menu-area」「equals」「大阪府」と記入します。
もし「menu-area」で「大阪府」を選択したら「group osaka」が出現しますという意味です。

保存をクリックします。

ワードプレスContact Form 7メニューこのように、「大阪府」を選択した時に、「大阪市・堺市・豊中市」のプルダウンメニューが新たに出現します。

京都府・兵庫県も作成

ワードプレスContact Form 7
大阪府と同様にグループ名はkyoto、hyogoにします。タグを挿入をクリックします。[group kyoto]と[/group]、[group hyogo]と[/group]の間にカーソルを入れて「ドロップダウンメニュー」クリックします。

  • 名前はmenu-kyoto、menu-hyogoと入力。
  • オプションに京都府が京都市、宇治市、兵庫県が神戸市、西宮市と1行ことに入力。

タグを挿入をクリック、保存します

ワードプレスContact Form 7
「Conditional fields」をクリックし、グリーンの「add new conditional rule」をクリックします。大阪府同様に記入します。
Show「kyoto」if 「menu-area」「equals」「京都府」
Show「hyogo」if 「menu-area」「equals」「兵庫県」 保存します

以上で3種類のエリアから、3種類の市が選択できるようになります。

コメント