Own products

  • 新規事業のアイディア創造機

Freebie

2012
05/21

Contact Form 7に画像の送信ボタン(<input type=”image” />)を追加するモジュールを配布します♪

この記事の読了時間:約35

  • このエントリーをはてなブックマークに追加

WordPressでコンタクトフォームを作る際の王道プラグインといえば「Contact Form 7」ですが、デフォルトでは画像送信ボタン(<input type=”image” />)を挿入するタグがありません。

しっかりフォームをデザインするんなら、送信ボタンもシャレオツに決めたいところですし、無いなら作ればよかろーもん!とゆーワケで、作りましたのでシェアさせて頂きますよ。

JavaScriptでのマウスオーバー/マウスアウトにも対応させてるので、より印象的な送信ボタンを配置できるようになります。

目指せ!コンバージョン率UP!

Contact Form 7に画像の送信ボタンを追加するモジュール

導入方法

まずは下記よりモジュールのファイルをダウンロードしちゃいなよ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」とした場合、

  • 【通常時の画像パス】 → images/submit.jpg
  • 【マウスオーバー時の画像パス】 → images/submit_on.jpg

と記述して下さい。アタマのスラッシュは要らないですよー!

で、「このコードをコピーして~~~」の下に書き出されたコードをコピーして、左部の入力画面にペーストして、保存したら一件落着です☆

モジュール入れるのめんどくさいよ!という方へ。

コレ作り終わった後で知ったんですが、フォームに下記を直接書いてもイケるみたいです。

<input type="image" value="送信" class="wpcf7-form-control" src="通常のボタン画像のURL" onmouseover="this.src='マウスオーバー時のボタン画像のURL'" onmouseout="this.src='通常のボタン画像のURL'" />

む、無駄足だったのか、、、っ!

金環日食、すごかった!

ご近所みんな出てきて、わーきゃー言いながら一様に空を見上げる景色は、なんか暖かいモノがありました。

  • このエントリーをはてなブックマークに追加

コメント一覧

2 Responses to [Contact Form 7に画像の送信ボタン(<input type=”image” />)を追加するモジュールを配布します♪]

でっちくん より:

2012/12/04 10:57 AM

こんにちは。すごい参考になりました。
ずっと Contact Form 7の画像送信ボタン探してました。
あとIDを発行するタグってあるでしょうか
アドバイスお願いいたします

コメントを投稿する

お名前

ご連絡先メールアドレス※非公開

コメント

  • このブログのRSSを購読する
  • このブログをtwitterでつぶやく
  • このブログをFacebookで共有する
  • このブログをはてなブックマークで共有する

Contact

お名前※必須

ご連絡先メールアドレス

お問い合わせ内容※必須

CAPTCHA

captcha

Blog parts

Affiliate