Contact Form 7のお問い合わせフォームに条件付きで表示する項目を追加できるWordPressプラグイン「Conditional Fields for Contact Form 7」

Contact Form 7のお問い合わせフォームに条件付きで表示する項目を追加できるWordPressプラグイン「Conditional Fields for Contact Form 7」

Contact Form 7のお問い合わせフォームに条件付きで表示する項目を追加できるWordPressプラグイン「Conditional Fields for Contact Form 7」

Conditional Fields for Contact Form 7は、Contact Form 7のお問い合わせフォームに条件分岐を追加できるWordPressプラグインです。指定した条件を満たす場合にのみ表示する項目を設定できます。

Conditional Fields for Contact Form 7を導入することで、例えば、”その他”にチェックが入っている場合は”その他用のテキストフィールド”を表示する、といったことが可能になります。

スポンサードリンク

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

インストール手順は以下の通りです。

※Contact Form 7がまだ未インストールでしたら、先にContact Form 7をインストールしてください。

ファイルをFTPでアップロードしてインストール

  1. Conditional Fields for Contact Form 7をダウンロードします。
  2. ダウンロードしたファイルを展開し wp-content/plugins にアップロードします。
  3. 管理画面の[プラグイン]ページで、Conditional Fields for Contact Form 7を有効化します。

WordPress管理画面でインストール

  1. [プラグイン] – [新規追加]にアクセスします。
  2. 「Conditional Fields for Contact Form 7」で検索します。
  3. [今すぐインストール]をクリックして、Conditional Fields for Contact Form 7をインストールします。
  4. [有効化]をクリックしてプラグインを有効化します。

Conditional Fields for Contact Form 7の使い方

WordPress管理画面で[お問い合わせ] – [コンタクトフォーム]に移動して、フォームの編集画面を開きます。

[条件付きフィールドグループ]をクリックします。

条件付きフィールドグループ

任意の名前を入力して、[タグを挿入]をクリックします。

タグの挿入

以下のようなタグが挿入されますので、groupタグの中に条件付きで表示したい内容を入れます。

[group group-499][/group]

今回は「メッセージ本文」で試したので、以下のようにしました。

[group group-499]
<label> メッセージ本文 (任意)
    [textarea your-message] </label>
[/group]

続いて、[条件付きフィールド]のタブに移動します。

条件付きフィールド

[新規条件付きルールを追加]をクリックして、条件を追加します。

「show」では表示したいグループを選択し、「if」で条件を指定します。複数の条件を組み合わせることもできるので、複雑な条件分岐も可能です。

今回は以下のように、「your-nameが空じゃなければgroup-499を表示する」という条件にしてみました。

項目の表示条件

お問い合わせフォームを開いてみると、最初はこのように「メッセージ本文」が表示されていません。

「氏名」を入力すると、「メッセージ本文」が現れました。ちゃんと条件付きで表示を切り替えてくれていますね。

あとがき

お問い合わせフォームに条件付きで表示される項目を追加したい時は、ぜひConditional Fields for Contact Form 7をご活用ください。

なお、Conditional Fields for Contact Form 7を無効化すると、groupタグはテキストとしてそのまま出力されてしまいます。無効化/アンインストールする際は、お問い合わせフォームの編集もお忘れなく!

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

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