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(ボタンマルシェ)のサイトlLmAfksBNk3g2cn1448813224_1448813465

※ちなみにこのボタンもボタンマルシェから使用させていただきました。

contact form 7のカスタマイズ

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

最新情報をお届けします

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

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

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

関連記事

  1. 簡単すぎる!wordpressで初めてのCSS編集これで画像装飾はお手のもの

    簡単すぎる!wordpressで初めてのCSS編集これで画像装飾…

    wordpressを使っていて、画像を装飾をする際にCSSを編集したい時ってありますよね。じ…

  2. 簡単!TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    TCDテーマの標準搭載SNSボタンのシェア数を表示させる方法

    最近、TCDのVIEWというテーマに変更しまして、TCDテーマのSNSボタンはデザインが良くて使いた…

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

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

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

  4. wordcamp

    wordpressど素人がWordCamp Kansai 201…

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

  5. スライダー表示可!wordpressでサイドバーを固定するQ2W3 Fixed Widget

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

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

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

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

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

  7. thumb-575033_1280

    絶対できる!アイキャッチ画像付きfacebookのいいねボタンを…

    上の画像のようなバイラルメディア風facebookいいねボタンを記事の下に設置したい方は必見…

  8. wordpressでテキストにアイコン付き背景をワンクリックで挿入する方法(コピペできます)

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

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

PAGE TOP