Web Design Leaves

フォーム

フォームタブでフォームを作成します。

申し込むクラスを選択してもらい、選択されたクラスにより表示内容を変えるようにします。

この例の場合、いずれを選択しても名前、メールアドレス、電話番号は必須で入力するようにします。

後からでも良いのですが、取り敢えず、名前、メールアドレス、電話番号を入力する以下のようなフォームを作成しておきます。

<p>ご希望のクラスを選択してください。</p>


<label> お名前 (必須)
    [text* your-name] </label>

<label> メールアドレス (必須)
    [email* your-email] </label>

<label> お電話番号 (必須)
[tel* your-tel]</label>

[submit "送信"]

この例の場合は選択するクラスは複数選択可能にするため、チェックボックスを使ってみます。チェックボックスのボタンをクリックして挿入します。

チェックボックスのボタンをクリックすると、以下のようなフォームタグ生成の画面が表示されます。

フォームタグのショートコードには自動的に名前が付けられていますが、重複しない名前であれば任意の名前に変更できるので、わかりやすい名前に変更すると良いです。この例では「checkbox-class-selection」としています。

必須項目にしたいので必須項目にチェックを入れ、わかりやすい名前に変更し、チェックボックスのオプション（選択肢）を1行に1つずつ記述して、「タグを挿入」をクリックします。

以下のようなショートコードがコンタクトフォームに挿入されます。

[checkbox* checkbox-class-selection "Web デザイン" "ネットワーク管理" "データベース"]

「*」は必須項目を表し、「checkbox-class-selection」がこのチェックボックスの名前で条件設定の際にこの部品を識別する名前です。

ショートコードの書き方がわかっていれば、ボタンを使わずに直接ショートコードを記述することができます。

グループの作成

グループとして作成した領域は、選択された項目（条件）によって表示・非表示にすることができます。条件を設定するまでは、グループの部分は非表示になります。

グループとするには、ショートコード [group グループ名] 〜 [/group] でその領域を囲みます。

グループ名は重複しない任意の名前を指定することができます。

但し、グループ名は group-xxxx のように「group-」を先頭に付けた名前にします（ルールやメールの設定の際グループであることが識別しやすくなります）。

グループのショートコードは直接記述することも、「Conditional fields Group」ボタンをクリックして作成することもできます。

この例の場合、選択肢は3つあるので、それぞれが選択された場合に表示する3つの領域をグループとして作成します。

以下は、最初の選択肢「Web デザイン」が選択された場合に表示するグループを「Conditional fields Group」ボタンを使って作成する例です。

グループを挿入する位置にカーソルを置いて「Conditional fields Group」ボタンをクリックします（挿入する位置はカットアンドペーストなどで変更できます）。

以下のようなフォームタグ生成の画面が表示されます。グループ名が自動で付与されますが、重複しないわかりやすい名前に変更することができます。

「タグを挿入」をクリックすると、この例の場合は以下のようなタグが挿入されます。

[group group-web][/group]

[group group-web]と[/group]の間に、チェックボックスで「Web デザイン」が選択された場合に表示する内容を記述します。

この例では、フォームの「ドロップダウンメニュー」ボタンを使って以下のような入力が必須のセレクトメニューを表示するようにします。

セレクトメニューの場合、「空の項目を先頭に挿入」というオプションを選択すると、初期状態では何も選択されていないようにすることができます。

「タグを挿入」をクリックすると、以下のようなショートコードが挿入されます。（ドロップダウンメニューボタンを使わずに、直接以下のようなショートコードを入力することもできます。）

[group group-web]
該当する項目を選択してください。
[select* menu-web-level include_blank "初心者" "中級者" "上級者"]
[/group]

ドロップダウンメニュー生成の際に「空の項目を先頭に挿入」というオプションを選択した場合、初期状態では「---」のような空のの項目が表示されます。

「---」の代わりに「-- 選択ください --」のように表示するには、「include_blank」の代わりに「first_as_label」を使って以下のように記述します。

[group group-web]
該当する項目を選択してください。
[select* menu-web-level first_as_label "-- 選択ください --" "初心者" "中級者" "上級者"]
[/group]

必要であれば、グループの中に更にグループを作成（ネスト）することができます。

例えば、ドロップダウンメニューで「上級者」を選択した場合に、更にグループを表示するには以下のように[group group-web]と[/group]の間にグループを挿入（ネスト）することができます。

以下は [group group-web] の中に、「上級者」が選択された場合に表示するチェックボックス「menu-web-skills」を含むグループ [group group-advance] を追加した例です。

以下では見やすいようにネストしたグループをインデント（字下げ）していますが、実際にはインデントする必要はありません。

また、実際のフォームで表示される際にわかりやすいようにタイトルタグを追加しています。

[group group-web]
  <h4>Web デザイ クラス</h4>
  該当する項目を選択してください。
  [select* menu-web-level first_as_label "-- 選択ください --" "初心者" "中級者" "上級者"]
  [group group-advance]
    習得しているスキルを選択してください。
    [checkbox* menu-web-skills "JavaScript" "PHP" "MySQL"]
  [/group]
[/group]

同様に、チェックボックスで「ネットワーク管理」や「データベース」が選択された場合に表示する内容を記述します。

「保存」をクリックしてフォームを保存します。

以下は、これまでに記述（挿入）した　Contact Form 7 Conditional Fields のショートコードの例です。

ご希望のクラスを選択してください。
[checkbox* checkbox-class-selection "Web デザイン" "ネットワーク管理" "データベース"]

[group group-web]
<h4>Web デザイン クラス</h4>
  該当する項目を選択してください。
  [select* menu-web-level first_as_label "-- 選択ください --" "初心者" "中級者" "上級者"]
  [group group-advance]
    習得しているスキルを選択してください。
    [checkbox* menu-web-skills "JavaScript" "PHP" "MySQL"]
  [/group]
[/group]

[group group-nw]
<h4>ネットワーク管理 クラス</h4>
対象のOSを選択してください。
[select* menu-nw-os first_as_label "-- 選択ください --" "Unix" "Windows" "Others"]
[/group]

[group group-db]
<h4>ネットワーク管理 クラス</h4>
お使いのデータベースを選択してください。
[checkbox* checkbox-db-type "MySQL" "PostgreSQL" "Oracle"]
[/group]

条件（ルール）の作成

「Conditional fields」というタブを選択して条件（ルール）を作成します。

「add new conditional rule」をクリックすると、以下のような条件（ルール）作成の行が表示されるのでルールを設定します。

show --Select group（表示するグループ）

Select group のプルダウンをクリックすると作成したグループのリストが表示されるので、条件が合致した場合に表示するグループの名前を選択しす。

この例の場合は、チェックボックスで「Web デザイン」を選択した場合に、「group group-web」というグループを表示するので「group-web」を選択します。

if --Select field--（対象のフォームのフィールド）

Select field のプルダウンをクリックすると、グループを表示する条件となるチェックボックスやセレクトメニューなどのフィールドのリストが表示されます。

条件として使うフィールドの名前を選択します。

この例の場合は、「checkbox-class-selection」という名前のチェックボックスを選択した場合に表示するので、「checkbox-class-selection」を選択します。

equals（条件）

equals のプルダウンをクリックすると、「not equals」が選択できるようになっています。このプルダウンは「等しい場合（equals）」か「等しくない場合（not equals）」かという条件を指定することができます。

この例の場合は、デフォルトの「equals」のままにします。

value（選択された値）

value には「Select field」で選択したフィールドの値を入力します。

この例の場合、「checkbox-class-selection」というチェックボックスで「Web デザイン」という値の選択肢が選択された場合の条件を設定するので「Web デザイン」と入力します。

作成した以下のルールは、「checkbox-class-selection」というチェックボックスで「Web デザイン」という値の選択肢が選択された場合には「group-web」というグループを表示すると言うルールになります。

show [group-web] if [checkbox-class-selection] equals "Web デザイン"

この状態で保存して、コンタクトページをプリビューすると以下のようになります。

チェックボックス（checkbox-class-selection）で「Web デザイン」を選択すると、「group-web」に記述された内容が表示されます。

「add new conditional rule」をクリックするとルールを追加することができます。

続いて、ネストになっているグループ[group group-advance]を表示するルールを設定してみます。

グループ「group-advance」を表示するのは、「menu-web-level」で「上級者」が選択された場合なので、以下のような条件を作成して保存します。

上記のルールを追加すると、「menu-web-level」で「上級者」を選択すると、「group-advance」のチェックボックスが表示されます。

同様に「add new conditional rule」をクリックして、必要なルールを追加して保存します。

この例では以下のようなルールを追加しました。

show [group-web] if [checkbox-class-selection] equals "Web デザイン"
show [group-advance] if [menu-web-level] equals "上級者"
show [group-nw] if [checkbox-class-selection] equals "ネットワーク管理"
show [group-db] if [checkbox-class-selection] equals "データベース"

また「remove」をクリックすれば作成したルールを削除できます。

「And」をクリックすると更に追加の条件を設定することもできます。「not equals」と組み合わせる等、いろいろな条件を設定できます。

メール設定

送信されるメールの内容はメールタブで設定します。

フォームで生成したメールタグが上部に表示されているので、それらを使ってメールの内容を設定します。

メールタグでグレイ（薄い色）になっているものは、すでに題名やメッセージ本文などに使用されていることを表しています。それ以外はまだ使われていないタグになります。

メールの中でも、条件で設定したルールを適用することができます。

例えば、フォームに設定した内容が以下の場合、

//フォームに設定した内容
[checkbox* checkbox-class-selection "Web デザイン" "ネットワーク管理" "データベース"]

[group group-web]//"Web デザイン"が選択されたら表示
  <h4>Web デザイン クラス</h4>
  該当する項目を選択してください。
  [select* menu-web-level first_as_label "-- 選択ください --" "初心者" "中級者" "上級者"]
  [group group-advance]//"上級者"が選択されたら表示
    習得しているスキルを選択してください。
    [checkbox* menu-web-skills "JavaScript" "PHP" "MySQL"]
  [/group]
[/group]

[group group-nw]//"ネットワーク管理"が選択されたら表示
  <h4>ネットワーク管理 クラス</h4>
  対象のOSを選択してください。
  [select* menu-nw-os first_as_label "-- 選択ください --" "Unix" "Windows" "Others"]
[/group]

[group group-db]//"データベース"が選択されたら表示
  <h4>データベース クラス</h4>
  お使いのデータベースを選択してください。
  [checkbox* checkbox-db-type "MySQL" "PostgreSQL" "Oracle"]
[/group]

以下のようにメールを設定すると、チェックボックスで選択されたグループがメール本文に表示されます。

メールでは [グループ名] 〜 [/グループ名]で囲んだ部分が条件に合致した場合に表示されます。

//メール（メッセージ本文）の設定例
参加ご希望クラス：[checkbox-class-selection]  //選択された値 
[group-web]//"Web デザイン"が選択された場合に表示
ご希望クラス：Web デザイン
該当する項目（初級・中級・上級）： [menu-web-level] //選択された値
[group-advance]//"上級者"が選択された場合に表示
習得しているスキル： [menu-web-skills] //選択された値
[/group-advance]
[/group-web]

[group-nw]//"ネットワーク管理"が選択された場合に表示
ご希望クラス：ネットワーク管理
対象のOS：  [menu-nw-os] //選択された値
[/group-nw]

[group-db]//"データベース"が選択された場合に表示
ご希望クラス：データベース
お使いのデータベース：  [checkbox-db-type] //選択された値
[/group-db]

この例では、以下のようにメールを設定してみました。

以下は見やすいようにインデントしています。メールタブに記述するインデントや改行、スペースは送信するメールにも反映されます。

差出人: [your-name] <[your-email]>
題名: お申し込みフォーム
参加ご希望クラス：[checkbox-class-selection]
[group-web]
ご希望クラス： Web デザイン
  該当する項目（初級・中級・上級） ：[menu-web-level]
  [group-advance]
    習得しているスキル： [menu-web-skills]
  [/group-advance]
[/group-web]
[group-nw]
  ご希望クラス： ネットワーク管理
  対象のOS：  [menu-nw-os]
[/group-nw]
[group-db]
  ご希望クラス： データベース
  お使いのデータベース：  [checkbox-db-type]
[/group-db]

お名前：[your-name] 
メールアドレス：[your-email]
電話番号：[your-tel]

以下のようにフォームが選択されてメールが送信された場合、

以下のようなメールが送信されます。

差出人: 上部太郎 <xxxxx@xxxx.com>
題名: お申し込みフォーム
参加ご希望クラス：Web デザイン, データベース

ご希望クラス： Web デザイン
該当する項目（初級・中級・上級） ：上級者
習得しているスキル： JavaScript, PHP

ご希望クラス： データベース
お使いのデータベース：  MySQL

お名前：上部太郎 
メールアドレス：xxxxx@xxxx.com
電話番号：123-4567-8901

[your-name]様
当クラスにお申し込みいただきありがとうございました。
以下の内容で承りました。
参加ご希望クラス：[checkbox-class-selection]
[group-web]
ご希望クラス： Web デザイン
該当する項目（初級・中級・上級） ：[menu-web-level]
[group-advance]
習得しているスキル： [menu-web-skills]
[/group-advance]
[/group-web]
[group-nw]
ご希望クラス： ネットワーク管理
対象のOS：  [menu-nw-os]
[/group-nw]
[group-db]
ご希望クラス： データベース
お使いのデータベース：  [checkbox-db-type]
[/group-db]
-- 
このメールは xxxx のお申し込みフォームから自動送信されました

上部太郎様
当クラスにお申し込みいただきありがとうございました。
以下の内容で承りました。

ご希望クラス： Web デザイン
該当する項目（初級・中級・上級） ：上級者
習得しているスキル： JavaScript, PHP

ご希望クラス： データベース
お使いのデータベース：  MySQL
-- 
このメールは xxxx のお申し込みフォームから自動送信されました

問い合わせ項目の追加

この例のような申し込みフォームの場合、問い合わせの項目は必須ではない場合があります。

そのような場合にデフォルトでは問い合わせ用の入力欄は表示せず、ユーザが希望する場合のみ入力欄を表示する例です。

フォーム

以下はフォームの設定例です。

ラジオボタンを使い、デフォルトでは2つ目の「いいえ」を選択状態にしています。

「はい」を選択すると、問い合わせの入力欄（テキストエリア）を表示するようにします。

ご質問等ございますか？
[radio radio-questions default:2 "はい" "いいえ"]
[group questions]
以下に内容をご記入ください。
[textarea* your-inquiry] 
[/group]

条件（ルール）

以下がルール（Conditional fields タブ）の設定例です。

フォームのラジオボタン「radio-questions」の値が「はい」の場合に、テキストエリアのグループ「questions」を表示します。

show [questions] if [radio-questions] equals "はい"

メール設定

以下がメールの設定例です。

ユーザが「はい」を選択して問い合わせ内容を入力した場合のみこの部分が表示されるので、問い合わせを見落とす可能性が低くなるかも知れません。

[questions]
###### お問い合わせがあります！ ######
お問い合わせ内容:
[your-inquiry]
[/questions]

「はい」を選択した場合に、入力欄を表示します。