誰でもできるcontact form 7にボタン画像を設定する方法
contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。
以前、contact form 7のカスタマイズについて説明したのですが、今回は、フリーの素材を利用することで誰でも簡単にボタンの見栄えを良くする方法にについてご紹介します。
得られるメリット
- 他のサイトと差別化できる。
- 問い合わせされる方から信頼を得られる。
- 記事に貼るボタンとしても利用できる。
目標設定
下の写真のとおりに送信ボタンを変更することを目標にして説明したいと思います。
送信ボタンの作り方
今回は、フリーのボタン素材を提供して下さっているボタンマルシェというサイトからダウンロードした素材を使ってボタンを作成しました。その作成要領を動画で説明していますので参考にしていただけたらと思います。
なお、この動画ではphotoshopというソフトを使って説明しています。
ご覧いただけでしょうか？素材がボタンとして仕上がっているので、名称を入力して、マウスオーバーの素材も同じように作るだけだったかと思います。
お問い合わせフォームの設定
まず、先ほど作ったボタン素材をメディアライブラリに取り込みます。
次に、お問い合わせフォームに入り、送信ボタンの部分にコードを貼り付けます。
下のコードを貼り付けます。
|
1 |
<input type="image" value="送信" class="wpcf7-form-control" src="通常のボタン画像のURL" onmouseover="this.src='マウスオーバー時のボタン画像のURL'" onmouseout="this.src='通常のボタン画像のURL'" /> |
貼り付けたら、メディアライブラリからボタンのURLをコピーして貼り付けます。
送信ボタンとマウスオーバーした時の送信ボタンのURLを貼り付けたら、保存します。
次に、以前、当ブログで紹介していた中央寄せを設定します。私はcustom CSSというプラグインをインストールし、そこにCSSを入力しています。レイアウトについて詳しく知りたい方は、当ブログで紹介しているcontact form 7のカスタマイズを参照下さい。
以上で送信ボタンの完成になります。いかがでしたでしょうか？作成ポイントとして
- マウスオーバー用を含めて２種類ボタンを作成すること。
- 送信用ボタンのコードを貼り付けること。
- 中央寄せすること。
大まかにこの３点をポイントにして作成しました。実際のマウスオーバーの確認は当ブログの問い合わせたページで確認できます。誰でも簡単にできますのであなたにも参考にして作成していただけたらと思います。
使用したコード
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<div class="C6"><div class="C1"><p id="C2">お名前 (必須)</p> [text* your-name] </div> <div class="C1"><p id="C3">メールアドレス (必須)</p> [email* your-email] </div> <div class="C1"><p id="C4">題名</p> [text your-subject] </div> <div class="C1"><p id="C5">メッセージ</p> [textarea your-message] </div> <div class="C1"><p id="C7">スパム防止のために設定しています<br /> チェックして送信を押して下さい</p> [recaptcha id:C9 size:compact]</div> <div class="C8"><input type="image" value="送信" class="wpcf7-form-control" src="通常のボタン画像のURL" onmouseover="this.src='マウスオーバー時のボタン画像のURL'" onmouseout="this.src='通常のボタン画像のURL'" /></div></div> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 |
.wpcf7 input[name="your-name"], .wpcf7 input[name="your-email"], .wpcf7 input[name="your-subject"] { width: 80%; height: 45px !important; } .wpcf7 textarea[name="your-message"] { width: 80%; height: 350px !important; } .wpcf7 input[type="submit"] { font-size: 100%; padding: 0.2em 0.4em; background: #eee; color: #333; border-radius: 4px; cursor: pointer; box-shadow: 0 0 1px rgba(0,0,0,.2); border: 1px solid #ccc; text-shadow: -1px 1px 0 rgba(255,255,255,1); } .wpcf7 input[type="submit"]:hover { box-shadow: 0 0 1px rgba(0,0,0,.2) inset; background: #BC8F8F; } .C1 { text-align: center; } #C9 { margin-right:auto; margin-left:auto; width: 160px; } .C8 { margin-right:auto; margin-left:auto; width: 150px; margin-top: 20px; } #C2,#C3,#C4,#C5{ padding-bottom: 0px; margin-bottom: 0px; text-align: left; margin-left: auto; margin-right: auto; width: 80%; } .C6 { background-image: url("http://nakagawablog.com/wp-content/uploads/2015/10/fzm-Denim.Jeans_.Texture-07-600x600.jpg"); background-size:contain; border-radius: 10px; padding-top: 50px; padding-bottom: 50px; width: 100%; } #C2,#C3,#C4,#C5,#C7 { color: #ffffff; } |
補足情報
使用した素材のサイトであるButton-Marche(ボタンマルシェ）↓
contact form 7のカスタマイズ
この記事が気に入ったら
いいね！しよう
最新情報をお届けします
Twitterでshare lifeをフォローしよう！
Follow share life