福田 お役立ち

メールフォームでユーザーの目的に合わせて、項目を表示/非表示にする

メールフォームでユーザーの目的に合わせて、項目を表示/非表示にする

 

こんにちは、福田です。

今日はWORDPRESSの定番プラグイン「Contact Form 7」に条件分岐機能を追加するプラグインを使ってみたので紹介します。

ラジオボタンやセレクトボックスで、選択した項目によって、追加で入力項目を表示させるプラグインです。

 

その名も、
「Conditional Fields for Contact Form 7」

 

WEBサイトにコンタクトフォームを設置する目的は様々です。

●お問い合わせフォーム

●求人応募用のフォーム

●予約フォーム

などなど。

 

目的によって、住所が必要なのか、年齢や性別が必要なのか変わってきます。

ただの問い合わせフォームで年齢や性別なんてほとんどの場合は必要ないですからね。

また入力必須項目でなくても、表示されてる項目が多いと何となく入力するのが億劫になってしまいます。

だからと言って、1つのサイト内にいくつもフォームを作るのは面倒だったり、メンテナンス上、更新の漏れなどにも繋がります。

 

ではまず「Conditional Fields for Contact Form 7」をインストールして有効化します。

有効化すると「Contact Form 7」の使えるタグに「Conditional Fields Group」というタグが増えていますので、ここをクリックします。

 

 

任意の名前を付けてタグを生成します。

 

 

そして条件分岐で表示/非表示にしたい部分を生成したタグで囲ってやります。

※この時、<table>タグを使用している場合、[group]の前で一度閉じてあげないとダメです。
[group]は<div>に置き換わるので、<tr>とかの前に置いちゃうとおかしなことになります。

 

 

「Conditional fields」タブをクリックして、条件分岐の条件を指定してやります。

 

 

これで簡単に条件分岐で項目を変更するフォームができました。

 

 

ではでは、これから本格的に寒くなりますが、体調崩さないように年末年始を乗り切りましょう。