プラカンブログ
プラカンブログ

プラカンブログ

WordPressのお問い合わせフォームの表示内容を出し分けたい

去年の記事の締切を大いにオーバーランしてて大慌てで記事を書いたNAGATOMIです。

今回はWordPressのサイトでお問い合わせフォームの内容を条件に応じて出し分けるというのを実装したので忘れないようにメモがてら記事にしようと思います。


実装条件

使うプラグインは以下の2つ。

やりたいことは何か項目を選ぶとフォームの表示がかわる的なこと。

まずはContact Form 7をインストールします。

786db9e0049bb8737d21541ee41438a8567adca5.png

https://ja.wordpress.org/plugins/contact-form-7/

そしてContact Form 7 を機能拡張する『Conditional Fields for Contact Form 7』をインストールします。

320dfb801e21cca12d4d04f75255fa30d622dc77.png

https://ja.wordpress.org/plugins/cf7-conditional-fields/

両方のプラグインをインストールするとフォームの編集画面に【Conditional Fields 】のタブなど(下図のピンク枠の部分)が追加表示されるようになります

5cc0c94c34c64505e513997ab9648c066f0fb574.png

実装

やりたいこと

チェックボックスにチェックがはいったら非表示にしていた入力用テキストフィールドが表示される。

例:

「担当者から連絡が必要ですか?→はい」
にチェックを入れると、非表示にしていたメルアド入力フィールドを表示。

やってみた

まずフォームの編集画面で

  1. 「担当者から連絡が必要ですか?」の文言の下に「はい」のチェックボックスを作成。
  2. メルアドのテキストフィールドを作成。

9ebccba46643299eaf801b17ec7a1793c24b295b.png

そしてデフォルトで設定されていたダミーの項目で不要なものを削除します。

上記のフォームを設置するための固定ページ(お問い合わせページ)を作成し、固定ページのエディタにショートコードを貼り付けて(下図ピンク枠)表示の確認をします。

7a44d526362808b5bbaf24c0a4ff90d63058f6d8.png

次にチェックが入ったときに非表示だったメルアド入力エリアを表示させる設定をします。

584b62df9016bd32d118bfe503e408b80d79391b.png

[Conditional fields Group]のボタンを押してグループ用のタグを挿入して、最初に非表示にしたい部分のタグを囲います。

2534c414201a9af8f14d707ac7336ce23af81872.png

そして「チェックが入ったときに非表示にしていたメルアドを表示させる」設定を編集画面でします。

【Conditional fields】タブをクリックしてConditional fieldsの編集画面を開きます。
そして[+ add new conditional rule]ボタンをクリックして下のように条件を入力します。

3def1b5cf4e7209b6cffc63757242432b430e802.png

設定内容:
checkbox-91
の値が「はい」(とイコール)の場合group-913 の内容を表示(show)させる

84cceff0b26156ac25359492fb8ea3ec44074172.png

動作確認

実際にページをブラウザで確認してみます。

チェックボックスにチェックが入ったときにだけ、メルアドの入力エリアが表示されるようになりました。

この記事は NAGATOMI が書きました。

プラカン(PLUS DESIGN COMPANY)が目指す3つの顧客満足

  1. ホームページのできあがりに
    満足していただく

    • お客様のご要望、目的の達成
    • ホームページの利便性や満足度の向上
    • ブランドイメージの向上 など
  2. 仕事の進め方に
    満足していただく

    • スケジュール遅延のないスムーズな進行
    • お客様の理解度、知識、経験に応じた親切で分かりやすい進行
    • セキュリティ意識の高い安全な進行管理 など
  3. サポート・フォーローに
    満足していただく

    • 公開後も安心なサーバー保守、CMS保守、コンテンツの保守管理
    • 集客、コンバージョンを強化するためのアクセスログ解析
    • 集客、コンバージョンを強化するためのコンテンツの改善 など

詳しくはWEBコンサルティングをご覧ください

WEBコンサルティング

ホームページに関するご要望がございましたら、お気軽にご相談ください。

Contact Us

お問い合わせをお考えの方

お問い合わせ

Estimate

お見積りをご希望の方

お見積り

お電話でのお問い合わせ