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. サムネイルを活したセンスが良いTCDのテーマVIEW!使用感をレ…

    私がブログを始めて1年経ち、研究のために他のブログを参考にすることがあるんですが、余計な文字が多いと…

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

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

  3. 誰でもできる!jQueryを使ってwordpressでもスクロー…

    wordpressを使っていてスクロール時に画像に動きをつけたい時ってありますよね。投稿記事内はプラ…

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

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

  5. ul、liのドット部分を画像でリスト化する方法

    ul,olのドットや数字部分に画像を挿入したい時ってありますよね。画像を挿入できれば、自分の…

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

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

  7. 【動画版】wordpress初心者でもバックアップし復元する方法…

    wordpressを使ってブログを運営していると、カスタマイズして画面が真っ白になったり、ウィルスに…

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

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

PAGE TOP