WordPressでお問合せフォームが作れるプラグイン

コーポレート用のホームページに欠かせないのがお問合せフォームのページですね。WordPressを使っているならContact Form 7というプラグインで簡単にお問合せフォームを作ることができます。”WordPress お問合せフォーム”で検索すると上位に表示されるのがContact Form 7でいろいろなサイトで紹介されています。

ただ以下の自分が知りたかったこと、やりたかった内容を網羅しているサイトを見つけることができなかったので自分専用のまとめの意味も含めて投稿しておくことにしました。

  • フォームの表示項目の変更の具体的な手順を知りたい。
  • メール設定でメールの送信元って何?
  • 問合わせした人のIPアドレスってわかる?(スパム対応)
  • お問合せフォームに入力した人に送信確認メールは送れる?

Contact Form 7のインストール

まぁこれはインストールから有効化までは管理画面でできる普通の手順です。

WordPressの管理画面から[プラグイン]->[新規追加] で検索ボックスにContact Form 7と入力します。富士山マークのContact Form 7が表示されますから[今すぐインストール]をクリック。[有効化]が表示されたら[有効化]をクリックでインストール完了です。

Contact Form 7のサイトに使い方の詳細が掲載されていますので詳しい内容は、ここを参照すれば詳しい説明が記載されています。

設定内容の編集

インストールと有効化が完了したらWordPressの管理画面にお問合せメニューが表示されますので[お問合せ]->[新規追加]を選択。新規追加しなくても最初からコンタクトフォーム1というのが作られているのでそれを使ってもいいかと思います。

フォームタブの確認

新規追加を選択すると下のような画面が表示されますのでタイトルを好きな名称で入力してください。現在このフォームタブの

  • お名前 (必須)
  • メールアドレス (必須)
  • 題名
  • メッセージ本文

が入力欄の表示タイトルになります。で[xxxxx]のところが入力ボックスを表示させるコードです。[submit “送信”]が送信ボタンを表示させるコードです。

メールタブの編集

メールタブを開くと以下のような表示になります。

ここでの項目は、お問合せフォームの送信ボタンを押したときに送られるメールの設定内容になります。必要な箇所を編集してください。

送信先 お問合せフォームの内容を送る送信先メールアドレスです。デフォルトはWordPressの管理者メールアドレスになっています。変更してもかまいません。ただし実際に存在するメールアドレスである必要があります。基本的にはサイト管理者宛てにするのを目的とした項目です。
送信元 お問合せフォームの内容を送るメールアドレスです。変更してもかまいません。ここのアドレスのドメイン(@マーク以下)は、Contact Form 7をインストールしたサイトのドメインと同じにしておく必要があります。Xserverで確認したところではメールアドレスのローカル側(@より前の文字)は存在しない名前でもいいようです。
題目 送信されるメールのタイトルです。
追加ヘッダー 送信されるメールへの追加ヘッダー文字列です。
メッセージ本文 送信されるメールの本文です。文面は自由に変更してください。ただし[your-message]のコード部を消してはいけません。[your-message]はメール送信時にお問合せフォームのメッセージ本文に置換されて送信されます。
ファイル添付 指定されたコードを記入すっることによって送信メールにファイルの添付ができます。
メール(2) チェックを入れると別のメールアドレスにも送信が可能になる項目です。お問合せフォームに入力した顧客に送信確認メールを送る用途としても使うことが可能です。

メッセージタブとその他の設定タブ

メッセージタブは、送信ボタンを押したときに表示されるメーッセージです。その他の設定タブは、その他Contact Form 7が有する機能をここで設定することができますが今回の内容では触りません。

後は、画面左側の[保存]ボタンを押して保存しておいてください。

個別ページをお問合せフォームにする。

ここまで設定できたらあとはショートコードをページに貼るだけです。

WordPressの管理画面から[固定ページ]->[新規追加]で個別ページを1つ作ります。ここでは、Contact Usという固定ページを作ってみました。

で、またお問合せの設定画面に戻ります。WordPress管理画面より[お問合せ]->[コンタクトフォーム]で下の画面が表示されます。

先ほど保存したお問合せ01のショートコードのところをクリックしたら選択できるようになりますのでそのコードをコピーしてください。メモ帳や別のテキストエディタに貼り付けておいてもいいです。

でまた先ほど作った個別ページContact Usの編集画面に戻り自分の好きな場所にウイジェットからショートコードを選択して追加してください。

ショートコードが入力できるボックスが表示されたら先ほどお問合せ01でコピーしておいたショートコードの文字を貼り付けてください。手で直書きしてもいいです。

これでお問合せフォームページの作成が完了しました。プレビューしてみましょう。こんなように表示されるはずです。

この投稿へのコメント

コメントはありません。

コメントを残す

メールアドレスが公開されることはありません。

この投稿へのトラックバック

トラックバックはありません。

トラックバック URL