MW WP Formのボタンを画像化する方法

posted 5月 20 2014

WordPressのメールフォーム MW WP Form

フォームに入力して「送信」した際に、確認画面があることに慣れている日本人には、なんとなく違和感がある「確認画面なし」のWordpressのお問い合わせフォームプラグイン「ContactForm7」。世界的にはこの日本製のContactFomr7が圧倒的に有名です。

しかし、お客様からすると「え?確認画面なしですか?」ということになります。ContactFomr7で確認画面を出す方法もあることは知っていますが、いろいろ改造したり、他のプラグインを入れずにできる方法はないの?と考え、もう少しいろいろとカスタマイズできるフォームが欲しくて、MW WP Formを使ってみることにしました。これも日本製です。日本人、すごい!

MW WP Formのボタンを画像化したい!

動作は申し分ないのですが、「確認」「戻る」「送信」のボタンを画像をせよというデザイナーさんの要望をかなえるべく、いろいろと実験したのですが、うまくいかず…

SMILEWORKSさんの送信確認・完了画面を出せる問い合わせフォームプラグイン MW WP Formに画像化する方法が紹介されていました。(元ネタはリンクが切れてしまいました。)

以下、転載いたします。助かりました <(_ _)>

MW WP Formで生成されたフォームは入力、確認、完了画面がそれぞれ「mw_wp_form_input」「mw_wp_form_confirm」「mw_wp_form_complete」というクラスで囲まれるようですので、各ボタンの画像を用意して、

CSS

/*確認画面へ進むボタン用*/
.mw_wp_form_input .btn input{
background:url(img/input_btn.png) no-repeat;
width:150px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}
 
.mw_wp_form_confirm .btn input{
/*送信ボタン用*/
background:url(img/confirm_btn.png) no-repeat;
width:150px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}
 
#submitback input{
/*戻るボタン用*/
background:url(img/form_back_btn.png) no-repeat;
width:80px;
height:30px;
text-indent:-9999px;
overflow:hidden;
border:none;
cursor:pointer;
}

とCSSで装飾し、
ボタンの記述を

HTML

<ul>
<li><span id="submitback">[mwform_backButton]</span></li>
<li class="btn">[mwform_submitButton]</li>
</ul>

としてやると実現できました。
※ボタンサイズやliタグの並びなどは環境に合わせて書き換えてください。

Leave a Comment


Your email address will not be published. Required fields are marked *

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください