MW WP Formでフォームのボタンを画像化する方法！

みなさん、こんにちは。
MEGIDO(メギド)です。

ワードプレスには便利なプラグインがたくさんあります。
その中でもお問い合わせフォームのプラグインにはお世話になっている人が多いのではないでしょうか。

お問い合わせフォームのプラグインで確認画面を表示させる必要がある時によく利用されるのが「MW WP Form」！

直近、「MW WP Form」でボタンを画像化させたい時がありその方法について調べ実装しました。
地味にコーディング初心者だとどうやって画像化させれば良いか分からなくて詰まりそうな感じ。

そこで今回は自分の備忘録も兼ねて、コーディング初心者に向けて「MW WP Form」でボタンを画像化する方法を紹介します！

「MW WP Form」でボタンを画像化する方法

結論から言うとMW WP Formで生成されるフォームのクラス名を確認し、
「background」で背景画像を指定することでボタンをデザイン通りに表示させることが可能です。

MW WP Formで生成されたフォームは

入力画面⇒「mw_wp_form_input」
確認画面⇒「mw_wp_form_confirm」

上記のクラス名が指定されます。

なので下記のようにボタンを指定することでそれぞれのボタンを画像化することが可能です。

入力画面⇒「.mw_wp_form_input .btn input」
確認画面⇒「.mw_wp_form_confirm .btn input」

また確認画面で戻るボタンを画像化するには下記のようにクラス名を指定してください。

確認画面の戻るボタン⇒「#submitback input」

これで背景画像を表示させるcssを指定すればボタンを画像化してcssでは表現できないボタンであっても
デザイン通りに表示させることが可能になります！

入力画面のcssの例

かなり簡単な例ですが、こうすることでボタンを画像化が実現可能です！

まとめ

今回は自分の備忘録も兼ねて、コーディング初心者に向けて「MW WP Form」でボタンを画像化する方法を紹介しました。
「MW WP Form」に限らず、他のプラグインでボタンなどを画像化する時もプラグインで指定されているクラス名を確認してcssを当てれば大丈夫だと思います。
けっこうボタンのデザインが複雑で画像にせざるを得ない時は少なくないかなあと思うので覚えて損はないテクニックでしょう。

では今回はこの辺で。
最後までお読みいただきありがとうございました！