第3回 のんびり研究所構築日記｜Contact Form 7でお問い合わせフォームを作る方法

前回は、WordPressのパーマリンクと画像サイズを確認しました。

今回は、WordPressへ初めてプラグインを追加し、「Contact Form 7」を使ってお問い合わせフォームを作成します。コンタクトフォームは機能が多い為、今回は最低限にとどめています。

プラグインとは、WordPressへ新しい機能を追加するための仕組みです。

Contact Form 7を導入すると、名前、メールアドレス、件名、問い合わせ内容などを入力できるお問い合わせフォームを作成できます。

Contact Form 7とは？

Contact Form 7は、WordPressへお問い合わせフォームを追加できるプラグインです。

プログラムを書かなくても、名前、メールアドレス、件名、問い合わせ内容、送信ボタンなどを組み合わせたフォームを作成できます。お問い合わせフォームは、サイトを見た人が、運営者へ質問や連絡を送るために使用します。
企業サイトや店舗サイトだけでなく、個人ブログでも、記事に関する連絡や修正依頼を受け付けるために設置できます。

プラグインとは？

プラグインは、WordPress本体へ機能を追加するための部品です。
例えば、お問い合わせフォーム、セキュリティー対策、記事の複製、用語集などの機能を追加できます。

スマートフォンへアプリを追加する感覚に近いものですが、プラグイン同士の相性や更新状況にも注意が必要です。

今回の記事ではプラグインの導入方法も詳しく説明します

今回は、このシリーズで初めてプラグインを導入します。
そのため、プラグインの検索、インストール、有効化までを詳しく紹介します。

※今後の記事では、同じ手順になる部分を簡略化する場合があります。

Contact Form 7が必要ない場合でも、初めてWordPressへプラグインを追加する人は、インストール方法だけ確認しておくと、ほかのプラグインを導入するときにも役立ちます。

プラグインの追加画面を開く

WordPressの管理画面へ戻ります。

左側のメニューから、次の順番で進みます。

プラグイン → 新規プラグインを追加

プラグインの追加画面では、WordPressへ登録されているさまざまなプラグインを検索できます。

Contact Form 7を検索する

画面右上にある検索欄へ、次の文字を入力します。

Contact Form 7

入力すると、検索結果にContact Form 7が表示されます。似た名前のプラグインが複数表示される場合があります。プラグイン名だけでなく、作者名や説明も確認しましょう。

Contact Form 7の作者は、rock lobster inc.と表示されます。

似た名前のプラグインに注意

WordPressには、似た名前のプラグインが登録されていることがあります。プラグイン名だけで判断せず、作者名、最終更新日、利用中のWordPressとの互換性なども確認しましょう。

Contact Form 7をインストールする

Contact Form 7の欄にある「今すぐインストール」をクリックします。

インストール中は、ボタンの表示が変わります。

しばらく待つと、「今すぐインストール」が「有効化」に変わります。

Contact Form 7を有効化する

インストールが完了しただけでは、まだプラグインの機能は使用できません。

続いて「有効化」をクリックします。

プラグイン一覧へ移動し、Contact Form 7の背景が薄い色になり、「無効化」という文字が表示されていれば有効化されています。

インストールと有効化の違い

• インストール：プラグインをWordPressへ追加する
• 有効化：追加したプラグインの機能を使える状態にする

プラグインは、インストールしただけでは動作しません。

使用するときは有効化が必要です。

すでにインストールされている場合

利用しているサーバーやWordPressの初期設定によっては、Contact Form 7が最初からインストールされている場合があります。

その場合は、WordPress管理画面の左側から「プラグイン」を開き、Contact Form 7を探します。

Contact Form 7の下に「有効化」と表示されている場合は、それをクリックします。

「無効化」と表示されている場合は、すでに有効になっているため、そのままで大丈夫です。

お問い合わせフォームの管理画面を開く

Contact Form 7を有効化すると、WordPress管理画面の左側に「お問い合わせ」という項目が追加されます。

次の順番で進みます。

お問い合わせ → コンタクトフォーム

Contact Form 7をインストールした直後は、標準のお問い合わせフォームが1つ作成されています。

環境によって表示名は異なる場合がありますが、「コンタクトフォーム1」などの名前で表示されます。

標準フォームの内容を確認する

一覧に表示されている「コンタクトフォーム1」をクリックします。

フォームの編集画面が開きます。

画面上部には、次のようなタブがあります。

• フォーム
• メール
• メッセージ
• その他の設定

まずは「フォーム」タブを確認します。

初期状態では、次のような入力項目が用意されています。

• 氏名
• メールアドレス
• 題名
• メッセージ本文
• 送信ボタン

今回は、まず標準フォームをそのまま使用します。

入力項目の追加や変更は、実際にフォームが動くことを確認してから行います。

フォームの名前を変更する

管理しやすいように、画面上部のフォーム名を変更します。

今回は、次の名前に変更します。

お問い合わせフォーム

フォーム名は、管理画面でフォームを見分けるための名前です。

通常、この名前がそのままお問い合わせページの見出しとして表示されるわけではありません。

名前を変更したら、「保存」をクリックします。

メールの送信先を確認する

続いて「メール」タブを開きます。

この画面では、お問い合わせが送信されたときに、どのメールアドレスへ送るかを設定します。

まず「送信先」を確認します。

初期状態では、WordPressの管理者メールアドレスを表す次の文字が入力されている場合があります。

[_site_admin_email]

これは、WordPressの「設定 → 一般」に登録されている管理者メールアドレスへ送信するという意味です。

お問い合わせを受信したいメールアドレスと一致しているか確認します。

送信元を確認する

「送信元」には、このサイトと同じドメインのメールアドレスを使用します。

例えば、のんびり研究所のドメインが次の場合、

nonbiri-lab.jp

送信元には、次のような同じドメインのメールアドレスを使用します。

wordpress@nonbiri-lab.jp

または、サイトで用意している送信用メールアドレスを使用します。

問い合わせを入力した人のメールアドレスを送信元にしない

問い合わせフォームへ入力されたメールアドレスを、そのまま「送信元」に設定すると、メールが正しく届かなかったり、迷惑メールとして判定されたりする原因になる場合があります。

送信元には、サイトと同じドメインのメールアドレスを設定します。

問い合わせた人へ返信できるようにする設定は、次の「追加ヘッダー」で行います。

返信先を確認する

「追加ヘッダー」に、次のような設定が入っていることを確認します。

Reply-To: [your-email]

「Reply-To」は、このお問い合わせメールへ返信したときの宛先を指定する設定です。

この設定があることで、受信した問い合わせメールへ返信すると、フォームへ入力されたメールアドレス宛てに返信できます。

Contact Form 7公式でも、送信元にはサイトと同じドメインのメールアドレスを使い、問い合わせた人のメールアドレスはReply-Toへ指定する方法が案内されています。

件名と本文を確認する

「題名」には、届いたメールを見たときに、お問い合わせフォームから送られたものだと分かる内容を設定します。

例えば、次のように設定できます。

【のんびり研究所】お問い合わせ：[your-subject]

「メッセージ本文」には、フォームへ入力された内容が記載されます。

初期状態では、次のようなメールタグが使われています。

• [your-name]：入力された名前
• [your-email]：入力されたメールアドレス
• [your-subject]：入力された題名
• [your-message]：入力された問い合わせ内容

メールタグとは？

メールタグは、フォームへ入力された内容をメールの中へ差し込むための目印です。

例えば、フォームの名前欄へ「山田太郎」と入力された場合、メール本文にある「[your-name]」が「山田太郎」に置き換わります。

メール設定を確認または変更したら、「保存」をクリックします。

お問い合わせ用の固定ページを作成する

お問い合わせフォームの設定ができたら、フォームを表示するページを作成します。

WordPress管理画面の左側から、次の順番で進みます。

固定ページ → 固定ページを追加

固定ページのタイトルへ、次のように入力します。

お問い合わせ

Contact Form 7ブロックを追加する

本文を入力する場所で、「ブロックを追加」の「＋」ボタンをクリックします。

検索欄へ、次の文字を入力します。（入力中に出てくる事もあります）

Contact Form 7

検索結果に表示された「Contact Form 7」ブロックをクリックします。

ブロックを追加すると、表示するフォームを選択できます。

先ほど名前を変更した「お問い合わせフォーム」を選びます。

編集画面上に、お問い合わせフォームが表示されます。

ショートコードを使う方法もある（ちょっと寄り道）

Contact Form 7では、ショートコードを使ってフォームを設置することもできます。

「お問い合わせ → コンタクトフォーム」を開くと、各フォームに次のような文字列が表示されています。

この文字列をコピーし、固定ページの「ショートコード」ブロックへ貼り付けても、同じフォームを表示できます。

今回は、操作が分かりやすいContact Form 7ブロックを使用します。

固定ページのスラッグを設定する

お問い合わせページのスラッグを確認します。

今回は、次のスラッグを使用します。

contact

公開後のURLは、次のようになります。
https://nonbiri-lab.jp/contact/

お問い合わせページを公開する

フォームが表示されていることを確認したら、画面右上の「公開」をクリックします。

確認画面が表示された場合は、もう一度「公開」をクリックします。

公開が完了したら、「固定ページを表示」またはURLをクリックして、実際のページを確認します。

実際にお問い合わせを送信する

お問い合わせページを開き、すべての項目へテスト用の内容を入力します。

例えば、次のように入力します。

• 氏名：テスト君
• メールアドレス：自分で受信できるメールアドレス
• 題名：お問い合わせフォームのテスト
• メッセージ本文：これはContact Form 7の送信テストです。

入力したら「送信」をクリックします。

入力した内容がクリアされ、画面下に送信完了のメッセージが表示されることを確認します。

メールが届いたか確認する

お問い合わせフォームから送信したら、設定した送信先メールアドレスの受信箱を確認します。

メールが届いていない場合は、迷惑メールフォルダーも確認します。

届いたメールの中に、次の内容が正しく表示されているか確認します。

• 入力した氏名
• 入力したメールアドレス
• 入力した題名
• 入力した問い合わせ内容

受信したメールへ返信操作を行い、返信先がフォームへ入力したメールアドレスになっているかも確認します。

送信完了と表示されても、メールが届かない場合がある

お問い合わせページに送信完了と表示されても、メールサーバーの設定や迷惑メール判定などにより、実際のメールが届かない場合があります。

そのため、お問い合わせフォームを作成したら、必ず実際に送信テストを行い、受信まで確認します。

メールが届かない場合は、次の項目を確認します。

• 送信先メールアドレスに間違いがないか
• 送信元がサイトと同じドメインのメールアドレスになっているか
• 迷惑メールフォルダーへ入っていないか
• サーバー側でメール送信が制限されていないか
• Contact Form 7の設定画面に警告が表示されていないか

Contact Form 7は送信内容を保存しない

Contact Form 7は、お問い合わせ内容をメールで送信するためのプラグインです。初期状態では、送信されたお問い合わせ内容をWordPressの管理画面内へ保存しません。そのため、メールが届かなかった場合、送信された内容を確認できない可能性があります。

お問い合わせ内容をWordPress内にも保存したい場合は、「Flamingo」という別のプラグインを追加できます。Flamingoは、Contact Form 7と同じ作者が提供しているプラグインです。

今回はまずお問い合わせフォームの作成と送信確認まで行い、Flamingoについては別の記事で扱います。

Contact Form 7が不要な場合

お問い合わせを受け付ける予定がないサイトでは、Contact Form 7を導入しない選択肢もあります。

使用しないプラグインを多数有効にすると、管理項目が増えたり、不具合の原因を特定しにくくなったりする場合があります。

このシリーズで紹介するプラグインを、すべて導入する必要はありません。

自分のサイトに必要な機能だけを選んで導入しましょう。

ただし、今回説明したプラグインの検索、インストール、有効化の手順は、ほかのプラグインを導入するときにも共通して使えます。

今回のまとめ

今回は、Contact Form 7を導入し、お問い合わせフォームを作成しました。

• プラグインはWordPressへ機能を追加する仕組み
• プラグインは「プラグイン → 新規プラグインを追加」から検索できる
• インストール後は有効化が必要
• Contact Form 7は「お問い合わせ」から管理する
• 初期状態のフォームをそのまま使用できる
• メールの送信先と送信元を確認する
• 送信元にはサイトと同じドメインのメールアドレスを使用する
• お問い合わせページは固定ページとして作成する
• Contact Form 7ブロックからフォームを設置できる
• 公開後は実際に送信し、メールが届くところまで確認する
• Contact Form 7だけでは送信内容がWordPress内に保存されない

お問い合わせフォームは、サイト運営者と訪問者をつなぐ大切な連絡手段です。

作成後は、送信完了の表示だけでなく、実際にメールを受信できることまで確認しておきましょう。

次回は、「Confirm Plus Contact Form 7」を使って、送信前の確認画面を追加します。