Contact Form 7の送信ボタンを画像に変えてマウスオーバーもさせてみよう。

えー、Wordpressのフォームメールと言えば、自動返信設定も出来る簡単プラグインなcontact  form7な訳ですが、送信ボタンがデフォルトのままだと目立たないので、視認性を高める為にもデーハーな画像ボタンにしたいんだぜという場合、実は結構簡単に出来てしまうというお話です。

マウスオーバー時に画像を変更させたい場合も多いと思うので、そっちの記述にしています。マウスオーバーが必要無ければ、ふつうにinput  type=”image”で良いと思います。

<input type="image" src="通常のボタン画像のurl" value="submit" tabindex="1"  onmouseover="this.src='オンマウス時のボタン画像のurl'" onmouseout="this.src='通常のボタン画像のurl'">

上記の記述を任意で変更して、contact form7のフォーム設定の画面で、[submit]部分と入れ替えるだけですね。

うちのサイトの場合は、↑のような感じになってます。画像ボタンにしたいなーって思ってた人がいたら是非どうぞ。

投稿日:2012年 05月 01日 | カテゴリー:WordPress関連

« »