CONTACT form 7プラグイン(前編) ~WordPressでブログを始める~ | そう備忘録

CONTACT form 7プラグイン(前編) ~WordPressでブログを始める~

前回の「Google Analytics Dashboard for WPプラグイン(後編)」の記事

CONTACT form 7

Contact Form 7はサイト管理に問い合わせをする時のフォームが作成できるプラグイン。

また自動返信やサンクスページも作成できる。

まずは下記の様な問い合わせページを作成してみる事にする。

Contact Form 7 お問い合わせページ

インストール方法

WordPressのメニューからプラグインー>新規追加ー>検索フィールドでContact Form 7を検索して「今すぐインストール」「有効化」。

Contact Form 7 インストール

コンタクトフォームの編集

WordPressのメニューにお問い合わせメニューが出現するのでお問い合わせー>コンタクトフォームを選択する。

デフォルトで1件、”コンタクトフォーム1” が作成済みなのでこちらを編集する事にする。

「編集」をクリック。

コンタクトフォームの編集

題名は ”ご質問がある方” に変更。

また問い合わせ内容を記入しても貰う欄のラベルもデフォルトは ”メッセージ内容” で分かりづらいので ”お問い合わせ内容” に変更をして保存をした。

今回は単純な問い合わせフォームなので「テキスト」「テキストエリア」「メールアドレス」「送信ボタン」しか使わなかったが、その他にも色々なタグが使える。

その他のタグ(URL、電話番号、etc)については中編で紹介する。

コンタクトフォーム ご質問がある方

2018年10月5日 追記

メールアドレス(必須)の右横に”※サイトに表示される事はありません”の注意書きを追記した。

問い合わせに対する返信の為のメールアドレス欄だが「サイトに表示されてしまうのかも?」との不安を抱かせてしまう可能性があるので注意書きを追記した。

メールアドレスはサイトに表示されない旨を追記

表示イメージ

表示イメージ

項目について

以下の5つの項目があるフォームが自動で作成される

  • お名前 (必須)
  • メールアドレス (必須)
  • 題名
  • お問い合わせ内容
  • 送信(ボタン)

値の意味は以下の通り。

Contact Form 7 項目の説明

メールの設定

メールタブをクリックしてメールの設定を行う。

Contact Form 7 メールの設定

送信先

送信先のメールアドレスを指定した。

送信元

[your-name] <MailAddress@souichi.club>

  • MailAddressは任意
  • [your-name]はフォームの ”お名前(必須)”で入力した値 がセットされる

ドメイン部はサイトのドメインと同一にしないと以下のエラーが表示される。

サイトのドメインと異なる時はエラー

ただsouichi.clubはAWS EC2で構築しており、メールサーバーはセットアップしていない。

このままだとメール送信でエラーになってしまうので別途SMTP Mailerプラグインをインストールした。

SMTP Mailerプラグインについては別記事で。

題名

souichirou “[your-subject]”

メールの題名

  • souichirou は固定値
  • [your-subject]にはフォームの ”題名” で入力した値がセットされる
2018年12月08日 追記

ご質問 “[your-subject]”

に変更した

質問が何件か来たのだけれども英語の題名だとスパムにまぎれてしまいかねないので日本語の題名に変更した

追加ヘッダー

Reply-To: [your-email]

  • Reply-To : メールの返信先
  • [your-email]にはフォームの”メールアドレス (必須)”で入力した値がセットされる

メッセージ本文

差出人: [your-name] <[your-email]>
題名: [your-subject]

メッセージ本文:
[your-message]

--
このメールは souichirou (http://www.souichi.club) のお問い合わせフォームから送信されました

本文に差出人の情報を埋め込んだ後、[your-message]で ”お問い合わせ内容” を埋め込む。

空のメールタグを含む行を出力から除外する

チェックしていない。

チェックをするとメール本文中の空の行が削除されてメールが届く。

HTML 形式のメールを使用する

チェックしていない。

チェックをするとHTML形式のメールが届く。

どちらでも良かったがデフォルトでチェックがされていなかったのでそのまま。

ファイル添付サーバー上のファイルやアップロードされたファイルをメールに添付したい時は対応するメールタグをここに記入する。

※質問者がファイルの添付をするのとは別

メール (2) を使用

未チェック

自動返信メールを実現する時などに使用する。

元のメールが送られた後に追加でもう一通のメールを送りたい時に指定する。

チェックをするとメール(2)の設定項目が表示される。

Contact Form 7 追加メール(2)

特に自動返信メールは設定しなかったのでこの項目は未指定。

メッセージの設定

様々なタイミングで表示されるメッセージの編集をする事ができる。

今回は特にメッセージの編集は行わなった。

メッセージ表示のタイミングとデフォルトのメッセージは以下の通り。

メッセージが正常に送信された

ありがとうございます。メッセージは送信されました。

メッセージの送信に失敗した

メッセージの送信に失敗しました。後でまたお試しください。

入力内容に不備が見つかった

入力内容に問題があります。確認して再度お試しください。

送信がスパムと見なされた

メッセージの送信に失敗しました。後でまたお試しください。

承諾が必要な項目が承諾されていない

メッセージを送信する前に承諾確認が必要です。

入力必須の項目が入力されていない

必須項目に入力してください。

ユーザー入力が最大許容文字数を超える項目がある

入力されたテキストが長すぎます。

ユーザー入力が最小許容文字数に満たない項目がある

入力されたテキストが短すぎます。

入力された日付の形式が正しくない

日付の形式が正しくありません。

日付が最小制約日より小さい

選択された日付は早すぎます。

日付が最大制約日より大きい

選択された日付は遅すぎます。

ファイルのアップロードが何らかの理由により失敗している

ファイルのアップロード時に不明なエラーが発生しました。

アップロードされたファイルが許可されたファイル形式に適合しない

この形式のファイルはアップロードできません。

アップロードされたファイルが大きすぎる

ファイルが大きすぎます。

ファイルのアップロードが PHP のエラーにより失敗している

ファイルのアップロード中にエラーが発生しました。

入力された数値の形式が正しくない

数値の形式に間違いがあります。

数値が最小制約値より小さい

入力された数値が小さすぎます。

数値が最大制約値より大きい

数値が最大許容値を超えています。

クイズに対する正しい答えが入力されなかった

クイズの答えが正しくありません。

入力されたメールアドレスの形式が正しくない

入力されたメールアドレスに間違いがあります。

入力された URL の形式が正しくない

URL に間違いがあります。

入力された電話番号の形式が正しくない

電話番号に間違いがあります。

その他の設定

特に設定をしていない。

ここに特定のコードを記述する事により「購読者限定モード(ログインしないと質問できない)」にしたり「デモモード」等にする事ができる。

詳細はプラグイン製作者のヘルプを参照の事

問い合わせページの作成

手順は、

  1. コンタクトフォームへのショートカットをコピーする
  2. 固定ページを作成してショートカットをペーストする

まずはショートカットのコピー

コンタクトフォームへのショートカットのコピー

WordPressのメニューから固定ページー>新規追加で問い合わせ様の固定ページを作成する

タイトル

”ご質問がある方”

を設定

本文

下記の文章を設定。

先程コピーしたショートカットをペーストする。

このブログについて質問がある方は下記の問い合わせフォームをご利用下さい。

[contact-form-7 id="82" title="ご質問がある方"]

よろしくお願いします。

スラッグ

”contact”

を設定

問い合わせ様の固定ページの作成

メニューへの追加

WordPressのメニューより外観ー>メニューー>新規メニューの作成。

「メニュー名」に”固定ページメニュー”を入力して「メニューを作成」ボタンをクリック

メニューの新規作成

メニューに追加したい固定ページをチェックして「メニューに追加」ボタンをクリックすると右側の「メニュー構造」欄に追加される。

固定ページをメニューに追加

トップバーとフッターにチェックをして「メニューを保存」する。

フッターにメニューを追加

以上で問い合わせページのメニューへの追加は終了

問い合わせのテスト

実際にメールが届くかテストをしてみる。

尚、Contact Form 7の他に別途SMTP Mailerプラグインをインストールしている。手順は別記事で。

1.問い合わせフォームを開いて必要項目に入力して「送信」する。

この時メールアドレスのフォーマットが不正だったのに気が付かずに送信した

問い合わせフォームテスト

エラーメッセージが表示された

問い合わせフォーム エラーになる

メールアドレスを修正して再度送信をすると今度は正しく送信された。

問い合わせフォーム 送信完了

実際のメール

こちらが実際に来たメール。

Reply-Toも正しく設定されていた。

問い合わせフォーム 受信メール

基本的な問い合わせフォームの作成はこれで終了。

URL、電話番号、数値、日付など今回使わなかった機能については中編の記事とする。

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。