誰でもできるcontact form 7にボタン画像を設定する方法

wordpress

contact form 7の送信ボタンを画像に変えて印象を良くしたいですよね。
以前、contact form 7のカスタマイズについて説明したのですが、今回は、フリーの素材を利用することで誰でも簡単にボタンの見栄えを良くする方法にについてご紹介します。

得られるメリット

  • 他のサイトと差別化できる。
  • 問い合わせされる方から信頼を得られる。
  • 記事に貼るボタンとしても利用できる。

目標設定

下の写真のとおりに送信ボタンを変更することを目標にして説明したいと思います。

2015-11-27_23h23_53

 

送信ボタンの作り方

今回は、フリーのボタン素材を提供して下さっているボタンマルシェというサイトからダウンロードした素材を使ってボタンを作成しました。その作成要領を動画で説明していますので参考にしていただけたらと思います。
なお、この動画ではphotoshopというソフトを使って説明しています。

ボタンの作成方法

ご覧いただけでしょうか?素材がボタンとして仕上がっているので、名称を入力して、マウスオーバーの素材も同じように作るだけだったかと思います。

お問い合わせフォームの設定

まず、先ほど作ったボタン素材をメディアライブラリに取り込みます。
次に、お問い合わせフォームに入り、送信ボタンの部分にコードを貼り付けます。
2015-11-27_23h26_20
下のコードを貼り付けます。

2015-11-27_23h26_47

貼り付けたら、メディアライブラリからボタンのURLをコピーして貼り付けます。
2015-11-27_23h24_47
送信ボタンとマウスオーバーした時の送信ボタンのURLを貼り付けたら、保存します。
2015-11-27_23h32_22
次に、以前、当ブログで紹介していた中央寄せを設定します。私はcustom CSSというプラグインをインストールし、そこにCSSを入力しています。レイアウトについて詳しく知りたい方は、当ブログで紹介しているcontact form 7のカスタマイズを参照下さい。
2015-11-27_23h35_23

以上で送信ボタンの完成になります。いかがでしたでしょうか?作成ポイントとして

  • マウスオーバー用を含めて2種類ボタンを作成すること。
  • 送信用ボタンのコードを貼り付けること。
  • 中央寄せすること。

大まかにこの3点をポイントにして作成しました。実際のマウスオーバーの確認は当ブログの問い合わせたページで確認できます。誰でも簡単にできますのであなたにも参考にして作成していただけたらと思います。

使用したコード

補足情報

使用した素材のサイトであるButton-Marche(ボタンマルシェ)↓
ボタンマルシェ - ButtonMarche

contact form 7のカスタマイズ

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

Twitterでshare lifeをフォローしよう!

中川 憲治

467,182 views

動画編集やWEB関連などを当ブログに書き出して2年後、12年間働いていた消防士を辞め、自分のやりたいことを仕事にしたいと考えてWEB業界に転職する。 自身の...

プロフィール