CONTACT form 7プラグイン（前編） ～WordPressでブログを始める～
前回の「Google Analytics Dashboard for WPプラグイン（後編）」の記事
Contents
CONTACT form 7
Contact Form 7はサイト管理に問い合わせをする時のフォームが作成できるプラグイン。
また自動返信やサンクスページも作成できる。
まずは下記の様な問い合わせページを作成してみる事にする。
インストール方法
WordPressのメニューからプラグインー＞新規追加ー＞検索フィールドでContact Form 7を検索して「今すぐインストール」「有効化」。
コンタクトフォームの編集
WordPressのメニューにお問い合わせメニューが出現するのでお問い合わせー＞コンタクトフォームを選択する。
デフォルトで１件、”コンタクトフォーム１” が作成済みなのでこちらを編集する事にする。
「編集」をクリック。
題名は ”ご質問がある方” に変更。
また問い合わせ内容を記入しても貰う欄のラベルもデフォルトは ”メッセージ内容” で分かりづらいので ”お問い合わせ内容” に変更をして保存をした。
今回は単純な問い合わせフォームなので「テキスト」「テキストエリア」「メールアドレス」「送信ボタン」しか使わなかったが、その他にも色々なタグが使える。
その他のタグ（URL、電話番号、etc）については中編で紹介する。
メールアドレス（必須）の右横に”※サイトに表示される事はありません”の注意書きを追記した。
問い合わせに対する返信の為のメールアドレス欄だが「サイトに表示されてしまうのかも？」との不安を抱かせてしまう可能性があるので注意書きを追記した。
表示イメージ
項目について
以下の５つの項目があるフォームが自動で作成される
- お名前 (必須)
- メールアドレス (必須)
- 題名
- お問い合わせ内容
- 送信（ボタン）
値の意味は以下の通り。
メールの設定
メールタブをクリックしてメールの設定を行う。
送信先 | 送信先のメールアドレスを指定した。 |
送信元 | [your-name] <MailAddress@souichi.club>
ドメイン部はサイトのドメインと同一にしないと以下のエラーが表示される。
ただsouichi.clubはAWS EC2で構築しており、メールサーバーはセットアップしていない。 このままだとメール送信でエラーになってしまうので別途SMTP Mailerプラグインをインストールした。 |
題名 | souichirou “[your-subject]” メールの題名
2018年12月08日 追記 ご質問 “[your-subject]” に変更した 質問が何件か来たのだけれども英語の題名だとスパムにまぎれてしまいかねないので日本語の題名に変更した |
追加ヘッダー | Reply-To: [your-email]
|
メッセージ本文 | 本文に差出人の情報を埋め込んだ後、[your-message]で ”お問い合わせ内容” を埋め込む。 |
空のメールタグを含む行を出力から除外する | チェックしていない。 チェックをするとメール本文中の空の行が削除されてメールが届く。 |
HTML 形式のメールを使用する | チェックしていない。 チェックをするとHTML形式のメールが届く。 どちらでも良かったがデフォルトでチェックがされていなかったのでそのまま。 |
| ファイル添付 | サーバー上のファイルやアップロードされたファイルをメールに添付したい時は対応するメールタグをここに記入する。 ※質問者がファイルの添付をするのとは別 |
メール (2) を使用 | 未チェック 自動返信メールを実現する時などに使用する。 元のメールが送られた後に追加でもう一通のメールを送りたい時に指定する。 チェックをするとメール（２）の設定項目が表示される。
特に自動返信メールは設定しなかったのでこの項目は未指定。 |
メッセージの設定
様々なタイミングで表示されるメッセージの編集をする事ができる。
今回は特にメッセージの編集は行わなった。
メッセージ表示のタイミングとデフォルトのメッセージは以下の通り。
メッセージが正常に送信された | ありがとうございます。メッセージは送信されました。 |
メッセージの送信に失敗した | メッセージの送信に失敗しました。後でまたお試しください。 |
入力内容に不備が見つかった | 入力内容に問題があります。確認して再度お試しください。 |
送信がスパムと見なされた | メッセージの送信に失敗しました。後でまたお試しください。 |
承諾が必要な項目が承諾されていない | メッセージを送信する前に承諾確認が必要です。 |
入力必須の項目が入力されていない | 必須項目に入力してください。 |
ユーザー入力が最大許容文字数を超える項目がある | 入力されたテキストが長すぎます。 |
ユーザー入力が最小許容文字数に満たない項目がある | 入力されたテキストが短すぎます。 |
入力された日付の形式が正しくない | 日付の形式が正しくありません。 |
日付が最小制約日より小さい | 選択された日付は早すぎます。 |
日付が最大制約日より大きい | 選択された日付は遅すぎます。 |
ファイルのアップロードが何らかの理由により失敗している | ファイルのアップロード時に不明なエラーが発生しました。 |
アップロードされたファイルが許可されたファイル形式に適合しない | この形式のファイルはアップロードできません。 |
アップロードされたファイルが大きすぎる | ファイルが大きすぎます。 |
ファイルのアップロードが PHP のエラーにより失敗している | ファイルのアップロード中にエラーが発生しました。 |
入力された数値の形式が正しくない | 数値の形式に間違いがあります。 |
数値が最小制約値より小さい | 入力された数値が小さすぎます。 |
数値が最大制約値より大きい | 数値が最大許容値を超えています。 |
クイズに対する正しい答えが入力されなかった | クイズの答えが正しくありません。 |
入力されたメールアドレスの形式が正しくない | 入力されたメールアドレスに間違いがあります。 |
入力された URL の形式が正しくない | URL に間違いがあります。 |
入力された電話番号の形式が正しくない | 電話番号に間違いがあります。 |
その他の設定
特に設定をしていない。
ここに特定のコードを記述する事により「購読者限定モード（ログインしないと質問できない）」にしたり「デモモード」等にする事ができる。
詳細はプラグイン製作者のヘルプを参照の事
問い合わせページの作成
手順は、
- コンタクトフォームへのショートカットをコピーする
- 固定ページを作成してショートカットをペーストする
まずはショートカットのコピー
WordPressのメニューから固定ページー＞新規追加で問い合わせ様の固定ページを作成する
タイトル | ”ご質問がある方” を設定 |
本文 | 下記の文章を設定。 先程コピーしたショートカットをペーストする。 |
スラッグ | ”contact” を設定 |
メニューへの追加
WordPressのメニューより外観ー＞メニューー＞新規メニューの作成。
「メニュー名」に”固定ページメニュー”を入力して「メニューを作成」ボタンをクリック
メニューに追加したい固定ページをチェックして「メニューに追加」ボタンをクリックすると右側の「メニュー構造」欄に追加される。
トップバーとフッターにチェックをして「メニューを保存」する。
以上で問い合わせページのメニューへの追加は終了
問い合わせのテスト
実際にメールが届くかテストをしてみる。
尚、Contact Form 7の他に別途SMTP Mailerプラグインをインストールしている。手順は別記事で。
１．問い合わせフォームを開いて必要項目に入力して「送信」する。
メールアドレスを修正して再度送信をすると今度は正しく送信された。
実際のメール
こちらが実際に来たメール。
Reply-Toも正しく設定されていた。
基本的な問い合わせフォームの作成はこれで終了。
URL、電話番号、数値、日付など今回使わなかった機能については中編の記事とする。
最近のコメント