MW WP Form のスタイルの基礎 – MW WP Form カスタマイズ

MW WP Form では、入力、確認、完了の3つの表示状態があります。本記事は、表示状態によるスタイルや、フォーム別のスタイルについて変更方法などを解説します。

MW WP Form のフォームの id と class について

最初に、MW WP Form のフォームは次のような div タグによって囲われています。

<div id="mw_wp_form_mw-wp-form-**" class="mw_wp_form mw_wp_form_****">

id の仕様

テネーブル

mw_wp_form_mw-wp-form-** の最後の ** となっている部分は、フォームID が記載されています。例えば、フォームIDが 1 であれば、div タグの id は、mw_wp_form_mw-wp-form-1 となります。この id によってフォーム別のスタイルを別々に付与させることができます。

class の仕様

ルミェール

classmw_wp_form は、MW WP Form のすべてのフォームで付与されるよ。

テネーブル

mw_wp_form_**** の部分の **** の部分は、表示状態によって異なります。詳しくは、次の項をご参照ください。

フォームの表示状態による class の変化

MW WP Form では

  • 入力時、mw_wp_form_inputclass の付与
  • 確認時、mw_wp_form_confirmclass の付与
  • 完了時、mw_wp_form_completeclass の付与

となります。

テネーブル

先程の mw_wp_form_**** の部分の **** の部分は 入力時では mw_wp_form_input となると言うことですね。

表示状態に合わせて表示を変更するスタイルの例

次のようにスタイルを記述することで、フォームの表示状態に合わせて要素の表示も変更できます。

.適当なクラス名 {
    display: none;
}

/* 入力時のみ、適当なクラス名が付与されている HTML要素を表示 */
.mw_wp_form_input > .適当なクラス名 {
    display: block;
}

最後に

ケミ

制作現場では、お問い合わせフォームに、入力などのステップを表示したいと言うケースをよく依頼されます。そう言った場合でも、本記事で解説している通り、MW WP Formの idclass の仕様に合わせてスタイルを適用すれば、ステップ表示も可能です。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。