ワードプレスContact Form 7の送信ボタンのカスタム

ワードプレスでお問い合わせフォームと
言えば「Contact Form 7」ですよね。


デフォルトの状態の送信ボタンが
いまいちサイト全体のデザインと一致しない
ってことないですか?


今日は誰でも
簡単にボタンを変更できる
方法を紹介します。


作業に入る前に送信ボタンの
画像を準備をしておきましょう。


送信ボタンをカスタムする方法



管理画面のサイドメニューから
「お問い合わせ」を送信ボタンを変更したい
フォームを選択します。


この時、フォームがデフォルトの状態でだと
下記のコードが表示されています。


<p>お名前 (必須)<br />
 </p>

<p>メールアドレス (必須)<br />
[email* your-email] </p>

<p>題名<br />
 </p>

<p>メッセージ本文<br />
[textarea your-message] </p>

<p>[submit "送信"]</p>


今回は送信ボタンのカスタムなので


<p>[submit "送信"]</p>


の部分に下記
ソースコードを入れます。


<input type="image" src="ボタン通常時の画像URL"
 value="submit" tabindex="1"
 onmouseover="this.src='マウスが画像の上に来た時に表示する画像URL"
 onmouseout="this.src='ボタン通常時の画像URL">


とコードを変更するだけで、
送信ボタンを変更する事ができます。


マウスが乗った時と
通常時の画像を変える事によって、


ロールオバーも可能です。


面倒だという方は同一URLを記入したらOKです。
これで、送信ボタンのカスタムは終了です。


カスタム後の表示



Copyright(c) 2013 MNT All Rights Reserved.