Contact Form 7 (日本語)

October 22, 2007

この投稿は更新されません。Contact Form 7 公式サイトを参照してください。


(このページの日本語版です)

概要

screenshot

Contact Form 7 はシンプルかつ柔軟なコンタクトフォームを提供する WordPress プラグインです。

  • 複数のコンタクトフォームを管理できます。
  • フォームとメールの内容を簡単なマークアップでカスタマイズできます。
  • jQuery Form Plugin による AJAX の動的送信が可能。
  • Akismet によるスパムフィルタリングをサポート。
  • CAPTCHA によるボット防止をサポート。

ダウンロードとインストール

WordPress.org のプラグインディレクトリ から最新版をダウンロードしてください。

  1. contact-form-7 フォルダを /wp-content/plugins/ ディレクトリに丸ごとコピーします
  2. WordPress の ‘プラグイン’ メニューでプラグインの有効化を行います

使い方

  1. [オプション] – [Contact Form 7] [管理] – [Contact Form 7] を開く。

    Update: WordPress 2.7 以降でお使いの場合は [ツール] – [Contact Form 7] にあります。

  2. デフォルトの “Contact form 1″ を編集するか新規のコンタクトフォームを追加して編集後それを保存する。
  3. [contact-form ...] のコードをコピーして、コンタクトフォームを表示させたい投稿の本文にそれをペーストする。

FAQ

Contact Form 7 FAQ (日本語) を参照してください。

フォームとメールのカスタマイズ

Contact Form 7 では「タグ」をさまざまなフィールドで使用します。タグというのは角カッコ [] で囲まれた定まった形式の文字列のことです。

フォームの内容の中で使われるタグは <input><textarea> などのフォーム要素に置換されます。

メールのテンプレートの中で使われるタグは、タグと同じ name を持つフォーム要素のユーザ入力値に置換されます。

wpcf7-desc

上の図を例に説明すると、フォームの内容に挿入された [textarea your-message ...] というタグは name="your-message" の属性を備えた <textarea> 要素で置換されます。

訪問者がこのフォームに入力して送信すると、Contact Form 7 はメールのテンプレートをもとにメールの生成を行います。メールのメッセージ本文に [your-message] タグが使われているので、このタグの部分がユーザの入力したメッセージによって置換されます。


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

フォームの内容では以下の種類のタグが使えます。

タイプ 置き換わる 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>
select+ <select> </select>
checkbox <input type="checkbox" /> ...
checkbox+ <input type="checkbox" /> ...
radio <input type="radio" /> ...
captchac <img /> CAPTCHA
How to use CAPTCHA 参照
captchar <input type="text" />
submit <input type="submit" />

タグの構文はそんなに簡単ではありませんが、フォーム テキストエリアの下にある タグを作成 メニューで構文を知らなくてもタグを作成することができます。

いくつかタグの使用例を紹介します。

  • [text your-name 40/100 "John Smith"]

    This tag is replaced with:
    <input type="text" name="your-name" size="40" maxlength="100" value="John Smith" />

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

    <input type="text" name="your-email" id="email" size="60" />

  • [textarea your-message 80x15 "Write message here."]

    <textarea name="your-message" cols="80" rows="15">Write message here.</textarea>

  • [select your-country "China" "India" "other"]
    <select name="your-country">
      <option value="China">China</option>
      <option value="India">India</option>
      <option value="other">other</option>
    </select>


Contact Form 7 で Akismet を使うには

1. Akismet プラグイン が必要です。もしまだ有効化していないなら、まずはじめにそれを有効化します。
2. Contact Form 7 の管理ページを開き、フォーム の項目を以下の要領で編集します:

  • 送信者の名前の入力を要求する項目のタグに akismet:author オプションを追加する。
    例: [text* your-name akismet:author]
  • 送信者のメールアドレスの入力を要求する項目のタグに akismet:author_email オプションを追加する。
    例: [email* your-email akismet:author_email]
  • 送信者の URL の入力を要求する項目のタグに akismet:author_url オプションを追加する。
    例: [text your-url akismet:author_url]

Akismet プラグインが有効化されていて、かつ少なくとも1つの akismet: オプションが使われていれば、Contact Form 7 は送信者の入力内容すべてとそのほか入力行動に関係した情報を Akismet のサーバに送ります。Akismet はそれを見てスパムの疑いがあるか判断します。

Akismet がスパムと判断すると、Contact Form 7 はメールの送信を中止し、オレンジ色のボーダーラインがついた応答メッセージ(下の画像のうちの3番目)を画面に表示します。

スパムフィルタリングが正しく機能しているか確かめたい場合は、送信者の名前の項目に “viagra-test-123″ と入力してみてください。これはかならずスパムと判断されるはずです。

Changelog

0.9 (2007/04/30)
最初のリリース。
1.0 (2007/05/20)
タグ作成ツール導入。
1.1 (2007/08/02)
ディレクトリとファイルの再構成。
1.2 (2007/08/16)
jQuery Form Plugin を導入。
1.3 (2007/08/26)
[select] タグを導入。
1.3.1 (2007/08/26)
JavaScript のローディングに関する重大なバグを修正。
1.3.2 (2007/09/03)
jQuery まわりのバグを修正。
1.4 (2007/09/07)
Akismet スパムフィルタの導入。
1.4.1 (2007/09/11)
スペイン語とカタルーニャ語の言語ファイルを追加。
1.4.2 (2007/09/13)
ドイツ語の言語ファイルを追加。
1.4.3 (2007/09/15)
ポーランド語の言語ファイルを追加。
1.4.4 (2007/09/17)
フランス語の言語ファイルを追加。
1.5 (2007/10/07)
CAPTCHA を導入。
1.6 (2007/10/17)
メール (2) と管理ページのインタフェイス改善。
1.6.1 (2007/10/27)
サイドバーウィジェットをサポート。
1.7 (2007/11/27)
[select+][checkbox][checkbox+][radio] タグを導入。
1.7.1 (2007/12/06)
グローバルな wpcf7 変数。ポーランド語言語ファイルのアップデート。
1.7.2 (2007/12/13)
バグフィックスとチェコ語言語ファイルの追加。
1.7.3 (2007/12/23)
default:label-first オプションの新規追加。
1.7.4 (2007/12/30)
select+checkbox+ タグタイプを廃止。multipleexclusive オプションを追加。
1.7.5 (2008/01/26)
二つの修正と include_blank オプション。
1.7.6 (2008/03/02)
acceptance タグを追加。

224 Responses to “Contact Form 7 (日本語)”

  1. RYU Says:

    はじめまして
    タグ表示はなんとか使用で来たのですが

    メール設定のところに入れるタグがわかりません。

    フォームのタグとメールのタグ とわかりやすく説明している資料などないでしょうか?

    教えてください。よろしくお願いします。

  2. fuji Says:

    7/10 12:05に書き込みをしたfujiと申します。
    wordpressを再インストールしてみたところ、解決いたしました。
    現在、借りているサーバではwordpressが上手く動かない事があるので、
    もしかしたらそれの影響があるのかもしれないですが、原因はよくわかりません。
    やっぱり有料のサーバの方が、安定するのかもしれませんね。
    メールフォームのカスタマイズも無事できました。
    これからもずっと使っていこうと思っております。
    ご迷惑をおかけいたしました。

  3. fuji Says:

    7/10 12:05に投稿しましたfujiと申します。
    連投で申し訳ございません。

    wordpressを再インストールしたところ、
    書き込みしたような状態から正常な状態に元に戻りました。
    ご迷惑をおかけいたしました。
    レンタルしている無料のサーバではwordpressの動きが良くないようなので、
    それの影響があるのかもしれません。
    原因はわかりませんが、とにかく解決いたしました。

    contact formは一番使いやすいメールフォームなので、
    これからも使っていきたいと思っております。
    ありがとうございました。

  4. pcafe Says:

    はじめまして
    今度wordpressを使用したサイトを作ることになり
    お問合せフォームにContact Form 7を使用させていただこうと
    思っています。
    すごく使いやすくていいのですが、携帯から送信すると入力した内容が、表示されません。
    文字コードの問題かと思い、formatting.phpを変えてみたりもしたんですけど、かわらづでした。

    携帯表示にはKtaistyle 確認用のメーラーはBeckyを使っています。

    もし解決方法があるようでしたら、教えていただけないでしょうか?
    よろしくお願いします。

  5. pokpok Says:

    僕も携帯から送信する場合で文字化けしてしまって困っています。
    Contact Form 7のバージョンは1.10.1
    Ktaistyleのバージョンは1.74です。
    http://web.wagokorotei.net/2009/07/07/15.html

    http://moon21.bex.jp/?p=1
    を参考にやってみたのですが、エラー?が出てしまいまして
    うまくいきませんでした。
    Parse error: syntax error, unexpected ‘^’ in wp-content/plugins/contact-form-7/includes/classes.php on line 464

    って感じです。記述する場所がよくないのでしょうか?
    プログラムは素人なので、さっぱりわかりません。
    どなたか詳しい方いましたらよろしくお願いいたします。

  6. ぽめ Says:

    お世話になります。
    wp2.82jaにアップグレードし、Contact Form 7 1.10から2.0にアップグレードしたのですが、有効化すると下記のエラーが出て有効化出来ません。
    Fatal error: Cannot redeclare wpcf7_plugin_url() (previously declared in /home/******/public_html/wp-content/plugins/contact-form-7/wp-contact-form-7.php:64) in /home/*****/public_html/wp-content/plugins/contact-form-7/wp-contact-form-7.php on line 76

    試しにwpを2.71jaに手動で戻しても同じでした。
    また 2.82jaを手動でアップ後に Contact Form 7 2.0も手動でアップしても同じ。
    プログラムはさっぱり解りませんので、ご教授頂ければ幸いです。

  7. ぽめ Says:

    先ほどの続きになります。
    他のプラグインで、HeadSpace2を使用しているのですが、それを無効化→Contact Form 7 2.0を有効化→HeadSpace2を有効化にしたら直りました。

    これは バグなのかは不明です^^;

  8. deanToto Says:

    今回Wp2.6.*からWp2.8.2jaへアップグレードしたのに合わせて、CF7も1.9からver2に変更しました。
    そこで気づいた点をご報告させていただきます。

    問い合わせフォームを表示しているページを、ブラウザでリロードすると、captcha画像が表示されません。(IE6,7,8、FF3)
    IEは右クリックで画像を表示させれば再表示します。またはcaptchaに気づかず送信すればエラーメッセージが表示され、同時にcaptcha画像も表示されます。

    IEの場合エラーメッセージの表示位置が、テーマによってずれるようです。CSSに_top:と_left:を追加して対応は出来ましたが・・・
    以上です。

    私自身は、とても気にっているプラグインなので、これからも使っていこうと思っています。


  9.  どんどん使いやすくなっています。ありがとうございます。
    tableを使った表組みでもキレイに表示してくれました。

    次回以降のオプションとして送信者への確認メール(自動配信)があると便利かと思います。「送信されました」と下に表示されても見ない人が多く、送られたのか送られないのかが直感的に分かり辛いようです。
     「送信に成功しました」の文字を暗いバックをレイヤーにしてアラートウィンドウにして出すというのも一手かと思いますが、確認メールのほうがベター(一般的?)かもしれません。

  10. ユキマレ Says:

    WPバージョン 2.8.3jaにアップグレードした直後から、以前と異なる挙動をするようになりました。
    Contact Form 7は、現在1.9.1を使用(2.0.1で確認しても同様でした)、設置サーバはコアサーバです。

    Contact Formの設定で、差出人を [your-name]:[your-email] としており、
    今まで受信時は「入力された名前:入力されたメールアドレス」というように表示されていたのですが、
    WP2.8.3jaを使い始めてから、差出人の名前が「WordPress」になってしまいます。

    また、受信したメールを見ると差出人情報が、

    「 WordPress 」

    このようになり、「@」マーク以前にダブルクォーテーションが挿入され、
    メールアドレスが「@」マーク前・後で分割されています。

    場違いな質問でしたら申し訳ありませんが、
    アップグレードは自動で、特に手動で変更した点がなく、原因がわかりません。

    お心当たりのある方がいましたら、ご教授いただけたら幸いです。

  11. ユキマレ Says:

    連続投稿すみません、ひとつ前の記事の記号を全て全角に修正しました。

    受信したメールを見ると差出人情報が、

    「 WordPress <”フォームに入力した名前:フォームに入力したアドレス”@フォームに入力したアドレス> 」

    このようになります。ご迷惑をおかけします;


  12. [...] 以下のページも参照してください。 Contact Form 7 (日本語) 関連しているかもしれない記事:[WordPress] [...]

  13. sr Says:

    はじめまして
    ひとつお伺いしたいのですが、
    フォーム中のselectの選択項目を、固定ではなく投稿内容などから動的に生成するようなことは可能でしょうか?
    たとえばループで配列を作ってそれを読み込むとかが出来ればうれしいんですが。。


  14. [...] 使用方法を書く時間がないのですが、作者の方のページに詳しく説明されています。 Contact Form 7 (日本語) « iDeasilo [...]

  15. ユキマレ Says:

    8月9日11:50 am に投稿した者です。

    フォーラムに似たような記事が投稿されたので参考に、
    http://ja.forums.wordpress.org/topic/2319

    名前とメールアドレスを、ダブルクォーテーションとカッコで明確に区切ることで解決できました。
    お騒がせして申し訳ありません。

    Contact Form 7、今後とも末永く愛用させていただきたいと思います。
    ありがとうございました。

  16. natsume Says:

    お世話になります。
    少々要望がありますので、こちらに書かせていただきます。

    XHTML1.1でWebサイトを作っていますが、Another HTMLにてチェックを行いますと、textarea内に初期値を設定するように言われます。
    また、divと/divの間が空と言われます。

    今後この辺りの対応をされて頂けませんでしょうか。

  17. nobonobo Says:

    初めまして
    WP2.8.4にContactForm7のプラグインをいれて下記のタグでフォームを設定しましたが
    「お名前」「メールアドレス」「タイトル」「題名」「メッセージ本文」以外が届きません(デフォルトの項目以外送信されない状態です)
    タグの書き方に問題があるのでしょうか?教えていただければたすかります
    —以下タグ—
    お名前 (必須)
    [text* your-name 50/]

    メールアドレス (必須)
    [email* your-email 50/]

    題名
    [text your-subject]

    出身地
    [select your-menu "北海道" "青森県" "岩手県" "秋田県"]

    性別
    [checkbox your-checkbox exclusive "男性" "女性"]

    おさかな
    [radio your-radio "さんま" "いなだ" "さば" "かれい" "さけ"]

    メッセージ本文
    [textarea your-message]

    [submit "送信"]

    —以上タグ—

  18. nobonobo Says:

    いま質問しましたnobonoboです
    いまの質問内容がFAQにありました
    調査不足で申し訳ありませんでした
    こんどはちゃんと送信されました。
    ただ記入欄のみの送信でしたのであとは項目がつけれるか調べてみます。
    ありがとうございます
    それから、エラーチェックなどしてくれてとても良く出来たフォームだと思います。

  19. youko Says:

    2.0.2を使っています。
    簡単に設定できるので、非常に助かっています。

    1つ質問があります。

    記入内容の送信は、問題なく行えているのですが、
    送信完了画面で、
    「該当する投稿は見つかりませんでした。」
    というメッセージが表示されてしまいます。
    ※設定では、「送信が完了しました」というような文章にしています。

    原因や直す方法があるでしょうか?

  20. きゃらんと Says:

    こんにちは。Contact Form 7を愛用しています。
    今後の要望として記載したく失礼いたします。

    お問い合わせ一覧が見られるページを作っていただくと嬉しいです。メールがどこかに行ったりして結局お問い合わせを紛失することがあるので、誰がいつどんな内容を一覧にして、そこからメールを返せる(できればこれも掲載)管理ページができると、ものすごい機能になると思います。

    ぜひ将来的に導入をお願いします!

  21. mueue Says:

    はじめまして、よろしくお願いします。

    問い合わせフォームにContact Form 7を使用しようとテストしております。

    試用していて、送信ボタンを押した後に「送信されました」というメッセージが出力されますが、問い合わせフォームの画面は変わりません。

    そこで、送信ボタンを押した後に、「ご送信ありがとうございました」というメッセージを別画面で作りそこに遷移できるようにしたいと考えております。

    Webで調べておりますが、そのような事が出来るような情報を見付けることができませんでした。

    お手数ですが、もしやり方等があればその情報を教えていただけると幸いです。

    すでにWebでそのような情報を公開しておりましたら、お手数ですがそのサイトのURLを教えていただけると幸いです。


  22. [...] Contact Form 7 で作成したお問い合わせフォームで、スパム対策を行う方法です。Akismet が有効になっていることが条件です。 [...]


Leave a Reply