お問い合わせフォーム作成には欠かせないWordPressプラグイン「Contact Form 7」の機能をまとめました。

Contact Form 7 ダウンロード

まず、こちらからContact Form 7 (日本語)をダウンロードして、プラグインを有効化します。

最初の設定

管理画面「お問い合わせ」→「編集」から設定します。

詳しくはこちらの記事「フォームを設置するプラグイン Contact Form 7[WP]」に初期設定の方法が詳しく説明されていますのでどうぞ。

自動返信メールの設定

Contact Form 7は問い合わせた人に自動返信メールを送ることが出来ます。「メール2」の項目にチェックを入れて、右のエリアに挨拶文などを入力しましょう。

Contact Form 7 カスタマイズ

フォームの内容で使えるタグ

タイプ	置き換わるHTML	タグの意味
text	<input type="text" />	テキストエリア
text*	<input type="text" />	テキストエリア/必須入力
email	<input type="text" />	メールアドレス
email*	<input type="text" />	メールアドレス/必須入力
textarea	<textarea> </textarea>	テキストエリア
textarea*	<textarea> </textarea>	テキストエリア/必須入力
select	<select> </select>	選択メニュー
checkbox	<input type="checkbox" /> …	チェックボックス
radio	<input type="radio" /> …	ラジオボタン
captchac	<img />	キャプチャイメージ
captchar	<input type="text" />	キャプチャ 半角英数記入エリア
submit	<input type="submit" />	送信ボタン

タグの使用例

文字数100まで、サイズ40

1

id名設定、サイズ60、アスタリスク(*)は必須項目

[email* your-email 60/ id:email]

横の数値(cols)80、縦の数値(rows)20

[textarea your-message 80x20]

テキストエリア内にデフォルトで入れる文字をダブルクオーテーション(“”)内に入れる

1

参照: Contact Form 7 (日本語)

Contact Form 7 でAkismetを使う方法

送信者の名前の入力を要求する項目

1

送信者の URL の入力を要求する項目

1

その他カスタマイズ

ファイルアップロードのサイズ上限指定

フォームでファイルアップロードを可能とした場合、とんでもない容量のファイルをアップされない為にも制限をかけることをお薦めします。以下は、kbで制限をかけていますが、mbでもOKです。

[file your-file limit:1000kb]

確認用にメールアドレスを２回入力させ、尚且つチェックする機能

この他にも

「郵便番号を入力すると自動で住所が入力される機能」

が解説されています。Contact Form 7がかなりパワーアップしますね。

参照: wordpress Contactform7をカスタマイズ

送信後、サンキューページに転送させる

編集画面の「その他の設定」に次のコードを入力することで サンキューページに転送させることが出来ます

on_sent_ok: "location.replace('登録後のアドレス');"

Google Analyticsでコンバージョン設定する

先程のサンキューページの設定を使って、Google Analyticsでコンバージョン設定をすることができます。それには、Google Analyticsの設定が必要なのですが、次の記事が分かりやすいのでよろしければご参考ください。

参照: Contact Form 7でコンバージョン設定する方法

Google AdWords – コンバージョントラッキングで費用対効果を検証しよう!

デザインのカスタマイズ

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

CSS設定でデザインをカスタマイズできます。

以上でまとめ終了です。特にカスタマイズしなくても手軽に利用出来る「Contact Form 7」ですが、編集次第では色々な使い道がありそうですね。

最新の記事一覧

• カテゴリ

  • WordPress 基本操作
  • カスタマイズ
  • フリーテーマ配布
  • プラグイン
  • ワードプレス
  • 仕様解説
  • 特集記事

• 月別アーカイブ

  • 2012年3月
  • 2012年2月
  • 2012年1月
  • 2011年11月
  • 2011年10月
  • 2011年9月
  • 2011年7月
  • 2011年6月
  • 2011年5月
  • 2011年4月
  • 2011年3月
  • 2011年2月
  • 2011年1月
  • 2010年12月
  • 2010年11月
  • 2010年10月
  • 2010年9月