1. まとめトップ

【WordPress】「Contact Form7プラグイン」のカスタマイズまとめ

WordPressのメールフォームプラグイン「Contact Form7」で、確認画面を出す方法や、メール送信テストを行う際に知っておくと便利なデモモードの設定方法などをご紹介。

更新日: 2014年11月25日

11 お気に入り 28839 view
お気に入り追加

この記事は私がまとめました

T.Ohkiさん

目次

■スパムメールを防止したい
■透かし文字を表示させたい
■確認用メールアドレスの項目を設置したい
■送信前に確認画面を表示させたい
■郵便番号を入力すると自動で住所が表示されるようにしたい
■メールを送信せずに動作確認を行いたい
■メールフォームのデザインをかっこよくしたい
■Contact Form7についてもっと詳しく学びたい

■スパムメールを防止したい

Contact Form7で簡単なコードを追記するだけでAkismetと連携が可能に。これで、強力なスパムメールフィルターが実装できちゃいます。

http://yossense.com/contact-form-spam/

この「Akismet」は、「スパムコメント」を分別してくれるステキなプラグインなんですが、これを使ってコンタクトフォームからのスパムメッセージを防ぐ方法です。

■透かし文字を表示させたい

上記、●●●の部分が透かし文字として表示させる文字列の個所です。文字色を変更したい場合は、CSSで「.watarmark」クラスに対して「color」指定すればOkです。

※透かし文字を入れる場合は
[email* your-email]
[email* your-email_confirm watermark"確認のため再度ご入力ください"]

これでOK

■確認用メールアドレスの項目を設置したい

入力されたメールアドレスに記述ミスがないかを確認するために、メールアドレスを2度入力させるフォームは多いですよね。それと同等のことを行う場合はfunctions.phpに専用コードを追記すれば準備完了です。

確認用にメールアドレスを2回入力させ、尚且つチェックする機能 こちらはとても簡単に実装出来ます。

■送信前に確認画面を表示させたい

Contact Form7ってデフォルトだと確認画面が存在せず、すぐに送信されてしまいます。確認画面を追加したい場合は、「contact-form-7-confirm」プラグインを追加すればOKです。

http://www.eyeta.jp/archives/908

お問い合わせフォームを設置してくれるプラグインなのですが、入力画面の後、すぐに送信されてしまい、確認画面がありません。

■郵便番号を入力すると自動で住所が表示されるようにしたい

郵便番号を入力すると都道府県・市区町村が表示される。そんな機能も「ajazxip3」というJSライブラリを使えば簡単に実装できます。サンプルページを公開されている以下リンク先記事がオススメです。

サンプルページを用意しましたので、実際の動きを確認したい方は以下からどうぞ。

■メールを送信せずに動作確認を行いたい

プラグイン設置中、動作確認をしたい場合がありますが、設定しているアドレスにいちいちメールが送信されるのって面倒ですよね。そんな時は、デモモードをONにしちゃいましょう。

http://foom.in/2012/04/cf7-checkbox/

demo_mode: on はメール送信を偽装する(送信をしないようにする)機能ですので、メールは送信されません。

■メールフォームのデザインをかっこよくしたい

以下リンク先にて、HTML、CSS、ショートコードの記述例を紹介されているページを以下にご紹介されています。こういうサイトやブログ様には感謝感謝ですね。

■Contact Form7についてもっと詳しく学びたい

以下の「Contact Form7 よくあるカスタマイズ」がとても参考になると思います。スライドショーで見やすいのはもちろん、本当に細部まで解説されています。

1