menu

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

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をフォローしよう!

スポンサーリンク

こんなに簡単でいいの?パスワード付きホームページの作り方

たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの使い方

関連記事

  1. たった2分でできる!ボタン画像をサイトに設置するボタンマルシェの…

    リンクを設定する時、クオリティーが高いボタン画像を使ってリンクさせたいですよね。私もボタン画…

  2. 【動画解説】wordpressをさくらからエックスサーバーへ引っ…

    当ブログはさくらインターネットのスタンダードプランに契約していたのですが、80記事を超えてきてから、…

  3. facebook投稿のリンク画面をアイキャッチ画像にする設定方法…

    ブログ記事をfacebookに投稿したけど、アイキャッチ画像が表示されないって時って悩ましい…

  4. wordpressのドメインを変更しGoogleに通知する方法

    wordpressを始めてから、ドメインを変更したいなと思ったことありますよね。だけど、変更…

  5. wordpressど素人がWordCamp Kansai 201…

    平成28年7月9、10日の2日間、WordCamp Kansai 2016のスタッフとして参加しまし…

  6. 初心者必見contact form 7基本操作からカスタマイズ方…

    contact form 7でお問い合わせページ作成したけど、レイアウトだけでも変更したいと…

  7. wordpressでテキストにアイコン付き背景をワンクリックで挿…

    ブログを書いて、強く訴えたい部分ってありますよね。目立たせたいけどどうすればいいか悩みますよ…

  8. スライダー表示可!wordpressでサイドバーを固定するQ2W…

    スクロールする際に、サイドバーのウィジェットを常に表示させたい時ってありますよね。いろいろ探した…

PAGE TOP