WordPressのお問合わせフォームプラグインで1・2を争う程有名なプラグイン

Contact Form 7は、WordPressのお問合わせフォームプラグインの中でもとても有名なプラグインです。特に日本では、開発者が日本人ということもあり、たくさんのサイトで使われています。

Contact Form 7の機能

Contact Form 7はお問合わせフォームを作るためのプラグインです。ではどんなお問合わせフォームができるのでしょうか?

  • テキストやメール、テキストエリア、セレクト、ラジオボタンなど基本的なフォーム機能
  • メール送信機能(送信先は複数可能)
  • 承認確認、reCAPTCHAなどのロボットフィルタリング
  • クイズやファイルの送信なども可能です
  • 必須項目の設定、バリデーション(検証)機能
  • さらに細かい設定(送信後リダイレクトなど)

などが可能です。ショートコードみたいなものを触ったり、多少なりHTMLを触るので、初心者には少し難易度の高いプラグインかもしれません。

Contact Form 7の使い方

Contact Form 7は他のとても簡単なプラグインよりも少しだけ難しいかもしれません。まずはインストールですが、インストールは以下の記事を参考にして下さい。

WordPressの初心者向け、プラグインのインストール・有効化の方法

Contact Form 7をインストールしたら、いよいよお問合わせフォームを作っていきます。
インストール・プラグインを有効化後に管理画面の左側に「お問合わせ」という項目が出ていることを確認してください。

その中で、コンタクトフォームという項目があるのでクリックして下さい。

既存のフォームを元に編集してみます

既に「コンタクトフォーム 1」というお問合わせフォームが作られています。初めて使う方が「だいたいこんな感じなんだ」と大まかに使い方を掴んでもらうためにも、新規ではなく、既存のフォームを元に使い方を解説していきます。

フォーム部分を編集

「コンタクトフォーム 1」という名前はわかりにくいので、名前を変更してみましょう。「リンク」もしくは「編集」をクリックするとフォームの編集画面に移動します。一番上のタイトル部分の入力欄に「お問合わせフォーム」と訂正し、右側の保存ボタンをクリックして下さい。これで名前が「お問合わせフォーム」に変更されました。

次にフォームを編集していきます。

いきなり独自のショートコードが出てきて戸惑うかもしれませんが、覚えれば簡単です。
いきなり独自のショートコードが出てきて戸惑うかもしれませんが、覚えれば簡単です。

「フォーム」という文字の下にボタンが複数並んでいます。これを押すと、ウィンドウが開いて設定後、テキストエリアにショートコードが入ります。試しに「ご職業」という項目を追加してみましょう。

まず、「テキスト」ボタンをクリックして以下のような画面を開き、名前の部分に「your-job」という項目名を入力します。これは他とかぶらなければ何でも構いません。半角英数字で入力するようにして下さい。

タグを追加ボタンを押すと、your-jobという入力欄が追加されます。
タグを追加ボタンを押すと、your-jobという入力欄が追加されます。

入力後、タグを挿入ボタンをクリックすると、タグが挿入されます。ただ、それだけでは入力欄だけ入ってしまうので、タイトルなども入るように以下の画像のように調整します。入力が終わりましたら、保存ボタンのクリックをお忘れなく。

ショートコードの「*」は必須項目

ちなみに、ショートコードのtextやemailの右側に記載されている「*」は必須項目を表しています。

メール部分を編集

先程編集した内容はフォーム部分です。次にメール部分を編集していきます。

メールタブをクリックして、内容を表示させて下さい。
メールタブをクリックして、内容を表示させて下さい。

メールタブをクリックすると入力欄が複数表示されます。

送信先:このメールを送るメールアドレス(フォーム受信者)
送信元:このメールを送り主(フォーム送信者)
題名:メールの件名
追加ヘッダー:追加ヘッダーに「Reply-To: [your-email]」などとして、送信者にもメールを送信します。
メッセージ本文:メールの本文に記載する内容

を入力していきます。
今回変更するのは「ご職業」をフォームに追加したのに、この解答がメールには記載されていませんので、追加します。

メッセージ本文に「ご職業」を追加。これでフォームに入れた内容がメールにも反映される。
メッセージ本文に「ご職業」を追加。これでフォームに入れた内容がメールにも反映される。

変更したら、必ず保存ボタンをクリックして内容を保存して下さい。

フォームをページに追加

フォームもメールも設定できました。では、このお問合わせフォームをページに追加させるためにはどうしたら良いでしょうか。とても簡単です。

このショートコードをコピペしてページや投稿に貼るだけで、フォームが表示される。
このショートコードをコピペしてページや投稿に貼るだけで、フォームが表示される。

「contact-form-7 …」から始まるショートコードを、ページにコピペするだけで、フォームが表示されます。

先ほど追加した「ご職業」という項目も追加されている。
先ほど追加した「ご職業」という項目も追加されている。

こんな感じで表示されます。


他のプラグインとも連携

他にもContact Form 7は、メッセージ保存プラグイン「Flamingo 」やスパムフィルタプラグイン「 Akismet」とも連携しています。

特に「Flamingo」は作者が一緒なので、親和性はとても高いです。また、プラグインではありませんが「reCAPTCHA」というテキスト画像を表示して、ロボットか人かをフィルタリングするサービスも、APIを指定すれば導入可能です。