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. ul、liのドット部分をアイコンでリスト化する方法

    ulやolで箇条書きにする際に、ドットや数字の代わりにアイコンを使いたい時ってありますよね。…

  2. サムネイルを活したセンスが良いTCDのテーマVIEW!使用感をレ…

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

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

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

  4. WordPressを始める初心者におすすめ!テーマ選びの5つのポ…

    これから、Wordpressを始める人にとって、Wordpressテーマを決めるのは、重要ですよね。…

  5. お名前.comから独自ドメインを取得してwordpressをイン…

    これからwordpressの運営をやっていこうと思っている方、必見です。wordpressを…

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

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

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

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

  8. WordPress初心者でも安心してCSSを編集できる子テーマ作…

    Wordpressのレイアウトを変更したいんだけど、CSSをそのままにしている方はいらっしゃ…

スポンサーリンク

さくらとXサーバーの速度比較

3/31までドメイン無料キャンペーン

最近の記事

PAGE TOP