Freebie
この記事の読了時間:約3分5秒
WordPressでコンタクトフォームを作る際の王道プラグインといえば「Contact Form 7」ですが、デフォルトでは画像の送信ボタン(<input type="image" />)を挿入するタグがありません。
しっかりフォームをデザインするんなら、送信ボタンもシャレオツに決めたいところですし、無いなら作ればよかろーもん!とゆーワケで、作りましたのでシェアさせて頂きますよ。
JavaScriptでのマウスオーバー/マウスアウトにも対応させてるので、より印象的な送信ボタンを配置できるようになります。
目指せ!コンバージョン率UP!
まずは下記よりモジュールのファイルをダウンロードしちゃいなよYOU!
Contact Form 7に<input type="image" />を追加するモジュール
落として解凍したら、中にある「submit-image.php」を、Contact Form 7のmudulesディレクトリ(wp-content/plugins/contact-form-7/modules)にアップロードすればおk。
簡単やで!
管理画面の左部メニューにある「お問い合わせ」をクリックすると、Contact Form 7の設置設定画面に進みます。
その中段右部にある「タグの作成」というボタンを押してみてください。
あら、「画像送信ボタン」ですって♪
ソイツをポチッとな!すると、画像送信ボタン用の設定画面が現れます。
id、classおよびマウスオーバー用画像は任意、「通常時の画像パス(マウスオーバーしてない時に表示される、デフォルトとするボタン画像)」だけ必須です。
で、通常時・マウスオーバー時ともに、「画像パス」は「使用するテーマを基準ディレクトリとした場合のパス(アタマにスラッシュを付けない)」を記述して下さい!
具体的に言うと、例えば使用しているテーマの画像ディレクトリ名が「images」、その中にある画像送信ボタンの画像名が「submit.jpg」、マウスオーバー時の画像名が「submit_on.jpg」とした場合、
と記述して下さい。アタマのスラッシュは要らないですよー!
で、「このコードをコピーして~~~」の下に書き出されたコードをコピーして、左部の入力画面にペーストして、保存したら一件落着です☆
コレ作り終わった後で知ったんですが、フォームに下記を直接書いてもイケるみたいです。
<input type="image" value="送信" class="wpcf7-form-control" src="通常のボタン画像のURL" onmouseover="this.src='マウスオーバー時のボタン画像のURL'" onmouseout="this.src='通常のボタン画像のURL'" />
む、無駄足だったのか、、、っ!
ご近所みんな出てきて、わーきゃー言いながら一様に空を見上げる景色は、なんか暖かいモノがありました。
関連する記事
同じカテゴリーの記事
でっちくん より:
2012/12/04 10:57 AM
こんにちは。すごい参考になりました。
ずっと Contact Form 7の画像送信ボタン探してました。
あとIDを発行するタグってあるでしょうか
アドバイスお願いいたします