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ファイルを編集後、確認画面を表示してみます。
メールアドレス(確認)の項目が消えており、成功しました！
※反映されない場合、ブラウザのキャッシュを削除してから再度表示してみてください。
まとめ
上記のやり方を応用すれば、お問い合わせフォームで色々な表示切り替えが可能です。
よくあるのが、ステップバー(入力・確認・完了)の表示の切り替えも今回の方法で対応できます。
