WordPress “お問い合わせ” ページの作り方 「Contact Form 7」

目次

WordPressでの「Contact Form 7」のインストールと有効化

STEP
プラグインのインストール
  1. WordPressのダッシュボードにログインします。
  2. 左側のメニューから「プラグイン」を選択し、「新規追加」をクリックします。
  3. 検索ボックスに「Contact Form 7」と入力し、検索結果からプラグインを見つけます。
  4. 「今すぐインストール」ボタンをクリックし、インストールが完了したら「有効化」をクリックします。
Screenshot
STEP
「お問い合わせ」項目が追加

プラグインを有効化すると、WordPressの管理画面に「お問い合わせ」という新しい項目が追加されています。ここから “お問い合わせフォーム” の管理や新規作成が行えます。

基本的なフォームの設定

STEP
サンプルフォームの編集

Contact Form 7はインストール後、自動的にサンプルフォームを作成します。
このサンプル(コンタクトフォーム 1)を利用して作成する方法が便利なので、これを基に編集を行います。

シンプルなお問い合わせフォームであれば、このまま左下の「保存」をクリックして問題ありません。

STEP
WordPress管理画面から

管理画面の左側のメニューから「お問い合わせ」を選択し、サンプルの “コンタクトフォーム 1” を選択します。

STEP
設定・編集

フォームの中身が表示されるので、ここでメールアドレス、名前、メッセージ欄など、必要な設定・編集を行います。
シンプルな「お問い合わせフォーム」であれば、このままで問題ありません。

STEP
保存

左下の「保存」をクリックします。

STEP
自動返信メールの設定

「お問い合わせ」をした方に自動で返信をするようにする場合は、自動返信メールの設定をします。

STEP
「メール(2)」

メールタブの下の方にある「メール(2)」にチェックを入れます。
これが自動返信用の設定です。

STEP
メッセージ内容を作成します。

初期設定では、問い合わせの内容がそのまま送り返されるだけになっています。
「本文」に返信するメッセージを入力します。

たとえば、「お問い合わせありがとうございます。頂いた内容を確認後、追って連絡させて頂きます。」などとしておけば、お問い合わせをした方が「メールが確実に送信された」と確認できます。

また、冒頭に、自動返信により送られたメールであることも記載しておくほうが良いでしょう。

STEP
保存とテスト
  1. 設定が完了したら、「保存」ボタンをクリックします。
  2. 実際にフォームを試して、自動返信メールが意図した通りに機能するか確認します。

「お問い合わせ」をサイトに表示させよう。

フォームを作成したら、サイトに表示させていきましょう。

STEP
固定ページ作成

「お問い合わせ」の固定ページを作っていない場合は、固定ページを作ります。

STEP
WordPressの管理画面

WordPressの管理画面から「固定ページ」を選択し、「新規固定ページを追加」をクリックします。

STEP
固定ページの公開

「お問い合わせ」や「contact」など、お好きな固定ページの名前を入力して、「公開」します。

STEP
ショートコードのコピー、貼り付け
STEP
WordPressの管理画面から

WordPress管理画面の「お問い合わせ」から使用する「フォーム」を選び「編集」をクリックします。

STEP
ショートコードをコピー

開いたフォームの上段にあるショートコードをコピーします。

STEP
固定ページへ移動

先ほど作った「お問い合わせ」の固定ページを開き、貼り付けをして「公開」します。

STEP
「メニュー」を作成してサイトに表示させる

固定ページは作っただけではサイトに表示されません。
ここではサイトのメニューバーに表示をさせる手順を解説していきます。

STEP
「メニュー」を作成

メニューをまだ作っていない場合は「新しいメニューを作成しましょう」から「メニュー」を作成します。

WordPress管理画面の「外観」から「メニュー」を選択します。

「新しいメニューを作成しましょう」から、自分が分かりやすいメニュー名を入れてメニューを作成し「メニューを作成」をクリックします。

STEP
メニューに追加

作ったメニューに、左側の固定ページから「お問い合わせ」を選択し、「メニューに追加」を選択し、表示したい位置にチェックを入れて「メニューを保存」します。

既にお使いのメニーで利用する場合も、同じ方法で「お問い合わせ」を追加し、表示したい位置にチェックを入れて「メニューを保存」します。

STEP
これでサイトに「お問い合わせ」が表示されます。
確認をして見ましょう。

迷惑メール対策

「Contact Form 7」をこのまま使用すると、迷惑メールが高頻度で届く場合があります。
セキュリティの強化をしましょう!!

reCAPTCHAの利用

Googleから提供される「reCAPTCHA」をフォームに組み込むことで、自動化されたスパムを防ぎます。

質問項目の追加

フォームにシンプルな質問を追加し、人間の利用者だけが回答できるようにします。

Akismetの活用

WordPressで広く利用されるAkismetプラグインを使用して、スパム送信をフィルタリングします。

フォームのテスト

フォームを実際に公開する前に、次のテストを実施してください。

全フィールドのテスト
全ての入力フィールドにデータを入力し、フォームが期待どおりに送信されるかを確認します。

異なるブラウザでのテスト
Chrome、Firefox、Safariなど、異なるブラウザでフォームの表示と機能をテストします。

モバイルデバイスでのテスト
スマートフォンやタブレットでフォームが正しく表示され、機能するかを確認します。

これら詳細なステップを踏むことで、サイトに効果的で安全な「お問い合わせフォーム」を設置することができます。
各ステップを丁寧に実行し、ユーザーからの貴重なフィードバックや問い合わせを効率的に管理しましょう。

目次