Contact Form 7をカスタマイズ!コピペ可能の設定サンプルとDBバックアップ

Contact Form 7をカスタマイズ!コピペ可能の設定サンプルとDBバックアップ

ウェブサイトはただページを作成しただけでは見てもらうのを待つだけのウェブサイトになってしまいます。

ユーザーからのアクションは是非とも受け取りたいですよね。
そんな時に必要なツールが『お問い合わせフォーム』だと思います。

WordPressを利用していれば、プラグインの『Contact Form 7』をインストールすれば簡単に使えてしまいます。

そんな便利な『Contact Form 7』ですが、ただインストールしただけではちょっと物足りないところがありました。
今回は『Contact Form 7』に足りないと思った機能を、実際に実現した方法について実際のコードも交えながら綴ります。

便利な『Contact Form 7』をカスタマイズしてもっと便利にする

僕が『Contact Form 7』をインストールしてみて、デフォルトでは実装されていないがどうにか実現したい要望は下記のようなものでした。

  1. 入力画面⇒確認画面⇒送信完了画面の構成にしたい
  2. お問い合わせ内容をDBに登録したい(できれば管理画面で確認したい)
  3. メールアドレスは確認も含め2度入力させるようにしたい
    また、2つのメールアドレスが同じものであるかのチェックをかけたい

それぞれ最終的に実現できたので、その方法についてまとめていきます。

まずは基本設定

Contact Form 7をダウンロードして設定していきます。
http://contactform7.com/

Contact Form 7をカスタマイズ!コピペ可能の設定サンプルとDBバックアップ

先に最終的なフォームのコードを下記に記します。

下記はメールのテンプレートです。

メールメッセージ本文内など、設定画面では指定した項目の値を変数で代入できます。
[last_name] [first_name] などがそうですね。

その他、
追加ヘッダーに書き込むのは、

などを書き込んでBccの設定をしたりします。

Reply-To: に問い合わせ者のメールアドレスがはいるようにしておけば、返信の際に楽だったりします。

通常のメール設定には管理者への設定、
メール(2)には問い合わせ者への設定をするのが一般的かと思います。

メール送信完了時やエラー発生時などのメッセージも簡単にカスタマイズできますよ。

Contact Form 7をカスタマイズ!コピペ可能の設定サンプルとDBバックアップ

設定方法は本家のサイトの使い方がわかりやすいです。
http://contactform7.com/ja/docs/

では、基本設定ができたらカスタマイズをしていきます。

1. 入力画面⇒確認画面⇒送信完了画面の構成にしたい

Contact Form 7をカスタマイズ!コピペ可能の設定サンプルとDBバックアップ

『Contact Form 7』には確認画面がないんですね。
つまり、送信ボタンを押したらすぐに送信されてしまうのです。
ぜひとも一回確認画面をはさみたいところ。

これについては簡単で、『Contact Form 7 confirm』というプラグインをインストールするだけで簡単にできました。
http://www.eyeta.jp/archives/908

『Contact Form 7 confirm』をインストールして有効化後、『Contact Form 7』の設定画面のフォームのコードに、

という形で入力するだけで終ります。

2.お問い合わせ内容をDBに登録したい(できれば管理画面で確認したい)

こちらも便利なプラグインがありました。

『Contact Form DB』というプラグインです。
https://wordpress.org/plugins/contact-form-7-to-database-extension/

こちらはインストールして有効化するだけで問い合わせ内容がDBに登録されるようになりました。

DBの内容は管理画面から見れるようになっており、CSVなどでダウンロードも可能です。

Contact Form 7をカスタマイズ!コピペ可能の設定サンプルとDBバックアップ

便利ですね。

メールアドレスは確認も含め2度入力させるようにしたい。また、2つのメールアドレスが同じものであるかのチェックをかけたい

これがちょっと面倒でした。

まずは『Contact Form 7』の設定画面のフォームのコードから確認用メール登録欄の設置をします。

その後、その確認用メールアドレスと通常入力のメールアドレスが一致しているかをチェックするコードを、function.phpに書き込みます。

僕は子テーマのほうのfunction.phpに書き込みました。

動作チェックして問題なければ大丈夫です。

おまけ:郵便番号から住所を書き出す

この機能、最近は当たり前のようになってきましたよね。
ちょっと難しいそうに思えるかもしれませんが、ajaxzip3を使用すれば簡単に実装できます。

上記のコードでは冒頭の、

で読み込んでいます。

設定する際は郵便番号のinputに少し記述するだけなので簡単です。
設定方法は本家を確認してください。
https://code.google.com/p/ajaxzip3/

httpsでajaxzip3が動かないことがある

通常見られる、

というコードはhttp用なのでhttpsでは動きません。

httpsの場合は、

と設定しましょう。

まとめ

wordpressにはたくさんプラグインがあって便利ですが、カスタマイズとなると結構難しかったりします。
今回は希望を叶えてくれる追加プラグインがあったことで助かりました。
プラグイン作った方に感謝が尽きないです。

カテゴリ別記事一覧(全カテゴリ一覧
WordPress ウェブ制作・運用

筆者について

筆者について


1982年、東京下町生まれ。
高校卒業後、アメリカへ留学。その後、「アートが根付いた国では絵だけで食えるのか」を確認するため、ドイツベルリンにてアート活動をおこなう。

日本に戻ってからは、コーディング・オーサリング・プログラミングなんかを経て、ウェブディレクターを肩書きにしておりました。現在は独立し、ブログやサイトの運用を軸に、ウェブサイトの企画提案からデザイン・構築まで手広く活動しております。何でも屋です。
制作のご依頼はお問い合わせフォームよりお願いします。

isLog〜イズログ〜では『日々生きること自体が旅』をモットーに、日々の旅を中心に綴っています。

詳しいプロフィールはこちら


feedly

コメントを残す

*