コーポレートサイトやサービスサイト、ランディングページなどでは、お客様や閲覧者とのコンタクトのために入力フォームを用意することが必須だと思います。今回は、日本語のWordPress環境でよく使われているコンタクトフォーム管理プラグイン『Contact Form 7』を紹介します。
コンテンツ
ビジネスでは必須の入力フォーム、WordPressならば設置は簡単
ホームページには必須といえる入力フォームですが、WordPressなどのCMSが一般的になるまでは、ホームページ初心者ではハードルが高いものでした。
CGIの入手から設置まで困難は多かったです。すんなり設置できればよいのですが、CGIをアップロードしてもエラーで動かない、動いているのにメールが届かない、文字コードの問題で文字化けを起こすなど、トラブルは絶えませんでした。
今回、ご紹介する『Contact Form 7』は、そんな面倒だったコンタクトフォームの作成・設置をプラグインの設定画面で簡単に行う事ができます。
日本人の方が開発しているという事もあり、日本語の解説も多く出回っているので、多くの方が利用していると思います。
但し、『Contact Form 7』を使えば、かなり簡単に入力フォームの作成・設置が行えますが、最低限、HTMLの知識が必要になります。
フォームのパーツはボタンで追加できますが、配置についてはHTMLで行います。デザイン要素も加える場合は、スタイルシート(CSS)の知識も必要です。
Contact Form 7のインストール
『Contact Form 7』は、WordPressの『プラグイン』メニューの『新規追加』から検索してインストールすることができます。
『新規追加』画面の『キーワード』に『Contact Form 7』と入力すると、富士山のイメージアイコンの『Contact Form 7』が表示されます。【今すぐインストール】ボタンを押して、インストールしましょう。
通常であれば、数秒から十数秒程度でインストールが完了します。早速、【有効化】ボタンを押して、プラグインを有効化しましょう。
有効化されると、『コメント』の下に『お問い合わせ』というメニューが新しく追加されます。こちらが『Contact Form 7』のメニューになります。
入力フォームを新規追加する
新規のフォームは、『コンタクトフォーム』のメイン画面の【新規追加】ボタンか、『お問い合わせ』メニューの『新規追加』から行います。
上の方に『ここにタイトルを入力』と表示されている入力欄がありますので、これから設定するフォームの名前を付けます。こちらは管理様ですので任意の名前でOKです。
設定画面には、よく利用される入力項目がすでに設定されていますので、こちらを参考に設定を行う事も可能です。
右側の『お困りですか？』の欄に『FAQ』と『使い方』、『サポートフォーラム』のリンクがあります。いずれも日本語が用意されているので、困ったときにはこちらも参照してみて下さい。
『フォーム』タブ
『新規追加』を押すと、最初に表示されるのが『フォーム』タブの画面です。
こちらで、入力フォームの内容を設定します。
既に、デフォルトの入力項目が設定されていますので、こちらを参考に編集することも可能です。
入力項目については、それぞれボタンが用意されていますので、入力欄の挿入したい場所にカーソルを移動し、追加したいボタンをクリックしてください。
ダイアログボックスが表示されるので、必要項目を入力して【タグを挿入】ボタンを押すと、カーソルの場所に角括弧形式の『Contact Form 7』のタグが追加されます。
設置する入力項目より、若干の違いはありますが、基本的な入力内容は以下の通りです。
- 項目タイプ：チェックすると「入力必須」になります
- 名前：入力項目の名前。任意の文字列を設定します。トラブルを防ぐため、英数字で設定します。
- デフォルト値：入力項目のデフォルト値を設定できます。
- このテキストを項目のプレースホルダーとして使用する：チェックすると「デフォルト値」で入力した内容を「プレースホルダー」として表示します。
- Akismet：Akismetと連携してスパムチェックを行います。
- ID属性：HTMLのID属性を設定します。
- クラス属性：HTMLのクラス属性を設定します。
入力フォームに必要な項目について、この作業を繰り返し行います。
こちらの作業は手間はかかりますが、ダイアログボックスの内容を埋めるだけなので、簡単に設定することができます。
入力項目は、『Contact Form 7』のタグを直接書くことでも追加することができます。慣れてきたら、こちらの方が早いかもしれません。（ただし、入力ミスにはご注意を！）
また、ダイアログボックスには表示されないオプションもありますので、詳しくは各入力項目のダイアログボックスの上部のリンクから、サポートページを確認しましょう。
『メール』タブ
『メール』タブでは、フォームに入力された内容をメールで送信するための設定を行います。
『フォーム』タブで入力項目の設定を終えている場合は、一旦、【保存】しておくと、「以下の項目にて、これらのメールタグを利用できます:」の下に、利用できるタグとして表示されます。『メール』タブの設定は、『フォーム』タブで入力項目を設定してからの方が良いでしょう。
デフォルトでは、お客様・閲覧者が入力した内容を管理者アドレス宛に送る設定になっています。
以下が設定項目とデフォルトの設定内容となります。
- 送信先：入力フォームの送信内容を受信するメールアドレスとなります。デフォルトでは、WordPressの管理者アドレスが入力されています。
- 送信元：送信元のメールアドレスを設定します。デフォルトでは、送信者の名前と
- 題名：メールのタイトルを入力します。デフォルトでは、「WordPressのサイト名」と送信者が入力した「題名」が入力されています。こちらは、自分で受信するメールなので、わかりやすいタイトルにしても良いでしょう。
- 追加ヘッダー：CcやBccなどの追加ヘッダーを入力します。デフォルトでは送信者宛の「Reply-To: [your-email]」が設定されています。わからない場合は、空欄で構いません。
- メッセージ本文：受信するメールの本文を設定します。入力項目はそれぞれ『Contact Form 7』のタグで設定します。『Contact Form 7』のタグは、入力した値だけしか表示しないので、項目名については、テキストで入力します。（例：差出人: [your-name]）その他、テキストは任意に設定することができますので、わかりやすい様に編集します。
- 空のメールタグを含む行を出力から除外する：入力項目が空の場合、その行をメール本文に表示しないでメールを送信します。
- HTML 形式のメールを使用する：メースをHTML形式で送信します。
- ファイル添付：添付ファイルの入力項目を設定した場合、その『Contact Form 7』タグを入力します。
以上が、送信者から管理者宛のメールの設定になります。
送信者宛に控えのメールを送る事が多いと思いますが、その場合は、設定画面の下の方の『メール (2) を使用』のチェックボックスをチェックすると、同様のメール設定欄が表示されるので、送信者宛のメールとして設定を行います。
送信先、送信元が逆になりますので注意してください。また、お客様・閲覧者宛のメールとなりますので、本文にあいさつ文を入れる、フッターに会社情報や連絡先情報を入れるなど、受け取った方が戸惑う事のない内容にしましょう。
『メッセージ』タブ
『メッセージ』タブでは、送信完了時やエラー発生時に表示するメッセージを編集します。
ほとんどそのまま使える文章が入力されていますが、念のため確認の上、必要に応じて書き換えるようにしましょう。
特に、送信完了時のメッセージは大切です。デフォルトのままですとかなりあっさりしていますので、適宜、文章を編集しましょう。
現時点（バージョン 5.0.2）のメッセージは以下となります。
- メッセージが正常に送信された
- メッセージの送信に失敗した
- 入力内容に不備が見つかった
- 送信がスパムと見なされた
- 承諾が必要な項目が承諾されていない
- 入力必須の項目が入力されていない
- ユーザー入力が最大許容文字数を超える項目がある
- ユーザー入力が最小許容文字数に満たない項目がある
- 入力された日付の形式が正しくない
- 日付が最小制約日より小さい
- 日付が最大制約日より大きい
- ファイルのアップロードが何らかの理由により失敗している
- アップロードされたファイルが許可されたファイル形式に適合しない
- アップロードされたファイルが大きすぎる
- ファイルのアップロードが PHP のエラーにより失敗している
- 入力された数値の形式が正しくない
- 数値が最小制約値より小さい
- 数値が最大制約値より大きい
- クイズに対する正しい答えが入力されなかった
- 入力されたメールアドレスの形式が正しくない
- 入力された URL の形式が正しくない
- 入力された電話番号の形式が正しくない
『その他の設定』タブ
『その他の設定』タブには、カスタマイズのためのコードを記述します。
詳しくはサポートページ「その他の設定」に記載があります。
主な設定内容は以下の通りです。
- 購読者限定モード：WordPressにログインしているユーザだけがフォームを送信できるようにします。
［記述内容］subscribers_only: true - デモモード：デモモードの指定。この指定をすると、「送信」ボタンを押してもメールは送信されず、「送信完了」のメッセージが画面に表示されます。
［記述内容］demo_mode: on - メールをスキップする：デモモードとほぼ動作は同じ。Flamingoなど他のプラグインと連携してない場合はあまり使いません。
［記述内容］skip_mail: on - 検証としての承諾確認：送信時の検証エラーメッセージを表示するようになります（通常は他項目の検証とは別に動作する）
［記述内容］acceptance_as_validation: on - メッセージ保存の抑制：Flamingo 等のメッセージ保存モジュールを利用している際、このオプションが指定されていると、このフォームからのメッセージを保存しない様にします。
［記述内容］do_not_store: true - JavaScript コード：on_sent_ok：メール送信が成功した際に実行するJavaScriptコードを指定できます。例えば、送信後は通常は『メッセージ』タブで指定した簡単なメッセージが表示されて送信完了となりますが、「送信完了」ページを別途用意して、送信完了時にJavaScriptで「送信完了」ページを表示するように指定すると、送信者にわかりやすくなります。
on_submit：フォーム送信が実行された後に実行するJavaScriptコードを指定できます。
［記述内容］on_sent_ok: “alert(‘sent ok’);”
［記述内容］on_submit: “alert(‘submit’);”
作成したフォームを表示する
以上、各タブの設定を終えたら、一旦保存します。
『Contact Form 7』のショートコードが表示されますので、コードをコピーしてフォームを表示する場所に貼り付けます。
『Contact Form 7』のショートコードは、以下の場所に貼り付けることができます。
- 投稿ページ
- 固定ページ
- テキストウィジット
固定ページに貼り付けてみます。
固定ページを表示します。
まとめ
いかがでしょうか？
『Contact Form 7』は非常に使いやすく、ほとんどデフォルトの設定でも利用できます。
『フォーム』タブと『メール』タブの設定をしっかし行えば、他は必要に応じて設定すればよいでしょう。
