WordPress

MW WP Formの入力・確認・完了画面で表示内容を変える方法

MW WP Formを使用し、お問い合わせフォームを実装したとき、入力画面と確認画面で表示内容を出し分けたいことがあります。

例えば、以下のようなケースで、
確認画面ではメールアドレス(確認)の内容は表示したくないとします。

【入力画面】

【確認画面】

MW WP Formのフォームを編集する

MW WP Formの編集画面を開き、表示したくない場所のHTMLタグにクラスを付与します。
今回はメールアドレス(確認)のinputタグの祖先要素trタグに「input-show」というクラスを付けました。

CSSに要素を非表示にするプロパティを追加する

MW WP Formは入力画面、確認画面、完了画面を実装できますが、画面によって別々のクラスが自動的に付与されます。

ブラウザのデベロッパーツールを開くとソースコードを確認できるのですが、フォームの親要素に「mw_wp_form」「mw_wp_form_input」という2つのクラスが付いています。入力画面では「mw_wp_form_input」クラスが付きます。
MW WP Formで出力されるクラスをまとめると以下のようになります。

mw_wp_form 全画面共通
mw_wp_form_input 入力画面
mw_wp_form_confirm 確認画面
mw_wp_form_complete 送信完了画面

※補足:デベロッパーツールの開き方
Mac→option + command + i
Windows→Ctrl + Shift + i または F12

今回は確認画面で「input-show」クラスの内容を非表示にしたいのでCSSに以下を記載します。

.mw_wp_form_confirm .input-show {
  display: none;
}

CSSファイルを編集後、確認画面を表示してみます。

メールアドレス(確認)の項目が消えており、成功しました!
※反映されない場合、ブラウザのキャッシュを削除してから再度表示してみてください。

まとめ

上記のやり方を応用すれば、お問い合わせフォームで色々な表示切り替えが可能です。
よくあるのが、ステップバー(入力・確認・完了)の表示の切り替えも今回の方法で対応できます。