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

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タグの並びなどは環境に合わせて書き換えてください。

プロフィール

荒岩 理津子
荒岩 理津子株式会社アールジャパン 代表取締役
株式会社東芝にてソフトウェア開発11年、サスペンションメーカーの広報6年、国立大学情報システムセンター非常勤職員、個人事業主を経て、2016年9月に株式会社アールジャパンとして法人化。WordPressに特化したWEBシステムの開発に携わる。Microsoft Visual Basic®のプログラミングに関する著書が9冊、そのうち一部は国立図書館に寄贈されている。色彩検定1級、Shoplifyパートナー。趣味は手芸一般。編み物歴、洋裁歴は四半世紀以上。神奈川県中小企業家同友会 広報委員会副委員長・編集長。