WordPressプラグインContact Form 7のメールフォームのデザインカスタマイズ

スポンサーリンク

WordPressのプラグインのContact
Form 7というメールフォームプラグイン
を利用しているのですが、デザイン
カスタマイズのチュートリアル記事的な
ものがなかなか見つからなかったので
変更ついでに覚書します。

まずはContact Form 7インストール方法から。ご存知の方はここは飛ばしてください。

Contact Form 7のインストール

  1. Contact Form 7をダウンロードし、解凍
  2. wp-content/wp-plugins/以下にフォルダごとコピーしアップロード
  3. 管理画面で有効化
  4. 設定画面でフォーム作成

ダウンロードのページに使い方も記載されていますが、ミblogさんの記事が分かりやすいです。

メールフォームのスタイリング

僕の方法は多分正しくないと思いますが参考になれば幸いです。Contact Form 7のphpファイルの変更はしていません。

STEP:1

まず、Contact Form 7の設定画面で以下のようにそれぞれの項目にclass属性を付けてあげます。
cont01
既に作成してあるのを変更する時は

[text 1="your-name" language="*"][/text]

[text 1="your-name" 2="class:con" language="*"][/text]

のようにしてあげればclassが加わります。「*」は入力必須項目を指します。※都合上、tだけ大文字にしています。

class名は何でも結構です。僕は「名前」「メールアドレス」「Webサイト」「題名」の入力項目をclass:con、メッセージ本文をclass:messとしました。変更したら一旦保存します。

STEP:2

「名前」「メールアドレス」「Webサイト」「題名」にあてたclass:conをcssでスタイリングします。cssはテーマのcssに記述しました。Contact Form 7のcssに記述するとアップグレードした時に再設定しないといけなくなってしまいます。

記述内容は以下。#wpcf7-f2-p18-o1はメールフォームごとに異なりますのでご自身のメールフォームのソースをチェックしてください。

#wpcf7-f2-p18-o1 .con{
	height:17px;
	padding:0 0 8px 0;
	width:250px;
	border:0;
	font-size:14px;
	background:url(名前やWebサイト項目の背景画像のURLを指定) no-repeat;
	color:#fff;
        align:left;
}

#wpcf7-f2-p18-o1 .mess{
	height:200px;
	padding:0 0 15px 0;
	width:400px;
	border:0;
	font-size:14px;
	background:url(メッセージ本文項目の背景画像のURLを指定) no-repeat;
	color:#fff;
        overflow-y:auto;
       _overflow-y:hidden;  /* IEでスクロールバーを消す為に記述 */
}

サイトに合わせて変更してください。

STEP:3

フォームの背景は画像でも良かったのですが、作るの面倒だったのでcssで噴出しを作りました。

参考:これは驚きの、CSSだけで作れる吹き出しボックス

記述は以下。

#box{
width: 450px;
background: #FBA957;
padding: 25px;
position: relative;

}

#box .arrow{
width: 0;
height: 0;
line-height: 0;
border-bottom: 25px solid #FBA957;
border-right: 50px solid white;
position: absolute;
top: -24px;
left: 20px;
}

さらにContact Form 7の管理画面に以下のように変更を加えます。
cont02

PHPSPOTさんのページの噴出しを作る為のコードは<span class=”arrow” />で終わっていますが、IEでレイアウトが崩れるかもしれない(僕は崩れました)ので<span class=”arrow”></span>としておいたほうがいいと思います。

STEP:4

送信ボタンもついでに変えます。IEだと画像が表示されず使えませんでしたのでハック(html>/**/bodyを使用)。

Contact Form 7の管理画面ではvalue=”送信”が消せなかった(設定画面で消したけどソースには残ってしまう)のでcssでスタイリングします。まず、管理画面で送信ボタンに以下のようにidを加えます。僕は[submit id:b]としました。
cont03

cssで「送信」と出てしまうテキストをtext-indentで飛ばして画像ボタンを指定します。cssの記述は以下。

html>/**/body #b {
border: 0px;
width: 100px;
height: 30px;
background: url(送信ボタンの画像のURL) left top no-repeat;
text-indent: -9999px;   /* 「送信」のテキストを飛ばす */
}

テキストが表示されないようにするのに他にいい方法あるのかな?よく調べてません。。。

実装

こんな感じでカスタマイズ完了です。
cont04

ここまでで画像の作成時間も含めて30分前後です。ちょっとテストなので画像適当。確認したブラウザはFirefox3.5、GoogleChrome、IE6、IE7です。IEは送信ボタンに画像を使っていません。

以上、WordPressプラグインContact Form 7のメールフォームのデザインカスタマイズ方法でした。ご参考までに。
因みに、スパムメールにお悩みならAkismetを使う事も出来るようですので合わせてご参照下さいませ。

URL :
TRB :

Comments & Trackbacks (30)

  1. Takku

    いつも貴重な情報ありがとうございます。

    Contact Form 7 はものすごく便利なプラグインですし、フォームのカスタマイズって楽しいですよね。

    ところで、色盲/色弱の方には赤と黒が同じに見えるらしいので、黒地に赤字はやめたほうがいいかもしれません。

  2. シロ

    Takuさん>

    コメント有難う御座います :D
    Contact Form 7、便利ですねー!僕もこれ以外は今のところ考えていません :mrgreen:

    Takku: ところで、色盲/色弱の方には赤と黒が同じに見えるらしいので、黒地に赤字はやめたほうがいいかもしれません。

    えっ、そうなんですか 8O 始めて知りました・・・貴重な情報有難う御座います!変更しておきますー ;)

  3. カスタマイズ方法に悩んでて検索からたどり着きました!

    参考にさせていただきカスタマイズさせていただきますね^^
    ありがとうございます(^-^)

    • シロ

      おお、それは何よりです!がんばってくださいー!

  4. 人生逆転アフィリエイト

    こんにちは。

    ワードプレスのカスタマイズで悩んでおりました。
    カスタマイズ方法がわかりやすく解説されております。
    とても助かりました。

    参考にさせていただきます。
    ありがとうございます。

    • シロ

      参考にしていただけて何よりですー!

  5. hiro

    text-indent: -9999px;   /* 「送信」のテキストを飛ばす */

    をcssに書かなくても

    [submit id:b " "]

    これでいけるかも?

    • シロ

      そのようですねー!失礼しましたw

  1. Tweets that mention WordPressプラグインContact Form 7のメールフォームのデザインカスタマイズ - かちびと.net -- Topsy.com
  2. » WordPressプラグインContact Form 7のメールフォームのデザインカスタマイズ – かちびと.net My_Room-bookmarks
  3. フォームの追加方法 « おまかせリサイクル
  4. WordPressに導入すべき10(+1)のプラグインと入れておくと便利な21のプラグイン。 | ごみおきば
  5. Wordpressプラグインでメールフォームを追加 - 中国・西安の情報ガイドはセイアンMAP
  6. Webクリエイターボックス
  7. 日刊ウェブログ式
  8. wordpressプラグイン【2010/5/13更新】 | WEBでいこう!
  9. Contact Form 7 - インフォメーション間
  10. WordPressで使える!と思ったプラグイン | SHIROQLO
  11. はじめてのWordpress 初期設定時にインストールと便利なプラグイン | ウェブという選択肢
  12. Contact Form 7 | MCS
  13. 心はいつもAirPucci(空元気でもいいから) » Google Appsで問い合わせフォームを作りました
  14. 私的WordPressプラグインまとめ
  15. 初めて導入したワードプレスプラグイン | 2代Meモ
  16. WordPressのプラグインまとめ2011年 - 京都インデックス
  17. デザインの細部にけっこうこだわる僕が最導入したwordpressのプラグインまとめ。カスタマイズ日記。
  18. 11月といえば自分の好きなブログを告白する月らしいです | creativememomemo
  19. メールフォームを簡単に作るプラグイン「Contact Form 7」 | コスメブログをWordPressで作ろう
  20. TwitterBootstrap+WordPressお問い合わせフォームプラグイン | はじめよう
  21.  Wordpress カスタマイズというかプラグイン 設定方法 » 初心者ちゃんのwebでお小遣い稼ぎ
  22. Contact Form7 の CSS設定 | WordPress and jquery MY Memo
Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services