お問い合わせフォームの作り方

お問い合わせフォームの作り方（PDF）

今回は、WordPressで作成したサイトに「お問い合わせフォーム」を設置する方法をお伝えします。

難しく感じる方もいらっしゃるかもしれませんが、WordPressで作成したサイトであれば、「Contact Form 7」というプラグインを使って、簡単にお問い合わせフォームを設置することができます。

このテキストでは、Contact Form 7のインストールから、お問い合わせフォームの基本的な作成手順、さらには自動返信メールの設定やセキュリティ対策まで解説していきます。

Contact Form 7でできること

まずはじめに、Contact Form 7を使ってできることを簡単にお伝えしておきます。

・お問い合わせフォームの作成
名前やメールアドレス、メッセージ本文といった基本的な項目を備えたフォームを簡単に作れます。

・フォーム項目のカスタマイズ
テキスト入力欄だけでなく、チェックボックスやドロップダウンメニュー、ファイル添付など、様々な項目を自由に追加できます。

・通知メールの設定
フォームから問い合わせがあった際に、サイト管理者宛にメールで通知を送ることができます。

・自動返信メールの設定
問い合わせてくれたユーザーに対し、「お問い合わせを受け付けました」という内容の確認メールを自動で送信できます。

お問い合わせフォームの基本的な作り方

それでは、実際にお問い合わせフォームを作成していきましょう。

まずは、Contact Form 7をWordPressにインストールします。WordPressの管理画面にログインし、左側のメニューから「プラグイン」→「プラグインを追加」をクリックします。

プラグインの追加画面が表示されたら、検索窓に「Contact Form 7」と入力します。すると、Contact Form 7が検索結果に表示されるので、「今すぐインストール」をクリックします。

インストールが終わるとボタンが「有効化」に変わるので、クリックしてプラグインを有効にします。

これで、Contact Form 7を使う準備が整いました。管理画面の左メニューに「お問い合わせ」という項目が追加されます。

管理画面の「お問い合わせ」をクリックすると、コンタクトフォームの一覧画面が表示されます。「コンタクトフォーム1」というサンプルが最初から用意されていますが、今回は新しく作ってみましょう。「コンタクトフォームを追加」をクリックします。

フォームの編集画面が開きます。タイトルに「お問い合わせフォーム」など、分かりやすい名前を入力しましょう。

フォームの各項目は、初期設定（デフォルト）のままでも「氏名」「メールアドレス」「題名」「メッセージ本文」「送信ボタン」といった基本的なフォームとして十分機能します。まずはそのまま画面を下にスクロールし、「保存」ボタンをクリックします。

保存すると、フォームタイトルの下に青い背景のコード（ショートコード）が表示されます。このコードをコピーしてください。

次に、管理画面の左側メニューから「固定ページ」→「固定ページを追加」をクリックします。

「タイトルを追加」と書かれた入力エリア（ページタイトル）に、「お問い合わせ」などと入力します。

次に、本文の入力エリアの「＋」ボタンをクリックします。

「ブロック」を選択するためのメニューが表示されるので、「すべて表示」をクリックします。

画面左側にブロックの一覧が表示されるので、下にスクロールして「ショートコード」ブロックを探します。

「ショートコード」ブロックを選択します。

「ショートコード」の入力欄に、先ほどコピーしたコードを貼り付けます。

次に、画面右上の「固定ページ」と書かれたタブをクリックします。

画面右側「スラッグ」の横に表示されている青文字（あなたがタイトルに入力した文字）をクリックします。

スラッグの入力欄に、ページのURLとして使いたい文字列を、英数字で入力します。ページの内容を表すものがよいとされていますので、今回は「contact」と入力します。

スラッグの入力が終わったら、画面右上の「公開」をクリックします。

確認画面が表示されるので、そのまま「公開」をクリックします。

これで、お問い合わせフォームが設置されたページが完成しました。「コピー」ボタンをクリックしてページのアドレス（URL）をコピーし、メモ帳などに控えておくと、プロフィールページやプライバシーポリシーにリンクを貼る際に便利です。

「固定ページを表示」をクリックして、実際のページを確認してみましょう。

このように、お問い合わせフォームが設置されました。

「お問い合わせフォーム」などの「固定ページ機能」で作成するページは、通常、シェアされることはほとんどないので、表示されるシェアボタンが邪魔に感じる方もいらっしゃるかもしれません。

使用しているテーマが「Cocoon」であれば、「Cocoon設定」→「SNSシェア」で固定ページのシェアボタンを非表示にできます。

「表示ページ」という項目で、「固定ページ」のチェックをはずせば、シェアボタンは表示されなくなります。

また、シェアボタンの設定画面は「トップシェアボタン設定」と「ボトムシェアボタン設定」の2つに分かれています。

「トップシェアボタン設定」が反映されるのが画面上部のシェアボタンで、「ボトムシェアボタン設定」が反映されるのは画面下部のシェアボタンという仕組みになっています。

ページ下部のシェアボタンもはずしたい場合は、さらに「ボトムシェアボタン設定」の「表示ページ」項目まで画面を下にスクロールさせて、「固定ページ」のチェックをはずしておきましょう。

「トップシェアボタン設定」「ボトムシェアボタン設定」、両方ともシェアボタンを非表示にする設定を行うと、このように、すっきりとしたお問い合わせフォームになります。

さらに、画面下の「フォローボタン」も非表示にすることができます。

「SNSフォロー」→「表示ページ」のチェックをはずすと非表示になります。

なお、画面右下には、このページを作成した人を意味する「投稿者名」が表示されていますが、こちらも非表示にすることができます。

「投稿者名」を非表示にするには、まず「本文」のタブを選択して、画面を下にスクロールさせます。

画面の下の方にある「投稿関連情報」という項目で、「投稿者名を表示する」のチェックをはずせば非表示になります。

ただし、「シェアボタン」や「フォローボタン」の場合と異なり、この設定は「固定ページ」機能で作ったページだけでなく、「投稿」機能で作ったページにも反映されます。つまり、メインで更新しているブログ記事やコラム記事、レビュー記事などに「投稿者名」が表示されなくなるのです。

ただ、私は「投稿者名」だけを表示させることに有用性を感じていませんし、別の方法で投稿者の情報を表示させることはできるので、ここではいつも非表示にしています。

最後に、画面右上の「日付」ですが、こちらも非表示にできます。

設定場所は、先ほどの「投稿者名」と同じく、「本文」→「投稿関連情報」にあります。

こちらも「投稿者名」と同じく、非表示にすると「投稿」機能で作成するブログ記事やコラム記事、レビュー記事なども日付が表示されなくなります。

記事に日付を表示するかどうかは考え方が分かれるところですが、私は基本的に非表示でも良いと考えています。というのも、場合によっては、日付があることで「古い情報」と見なされてしまい、せっかく内容がよいものであっても読まれずに終わってしまう可能性があるからです。

もちろん、情報の鮮度が大事な記事を主に発信しているのであれば、日付を表示すべきです。ご自身のサイトの運営スタイルによって、日付を表示するしないを決めるとよいと思います。

なお、「追加CSS」という機能を使うと、「投稿ページには日付を表示させ、固定ページには日付を表示させない」ということもできます。

「追加CSS」の機能を使うには、まず画面左側「外観」→「カスタマイズ」をクリックします。

次に「追加CSS」をクリックします。

「追加CSS」の画面が表示されたら、画面左側を下にスクロールさせます。

画面左側を下にスクロールさせると、左側に数字の「1」と書かれた入力欄があります。

この入力欄に、「CSSコード」を入力することで、固定ページの日付だけを非表示にするなど細かい設定が行えます。

具体的な手順としては、以下のCSSコードを入力して、「公開」ボタンをクリックすると、固定ページの投稿日、更新日、投稿者名が非表示になります。

投稿ページでは日付や投稿者名を表示させ、固定ページは日付や投稿者名を表示させたくない場合は、以下のCSSコードを、そのままコピーしてお使いください。

「日付だけ非表示にさせて投稿者名は表示させる」といったことも可能なので、いくつかのパターンのCSSコードも記載しておきます。必要に応じて使い分けてください。

/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}

/*固定ページの投稿日、更新日、投稿者名を非表示にする*/
.page .date-tags,
.page .author-info {
    display: none;
}

/*固定ページの投稿日、更新日を非表示にする*/
.page .date-tags {
    display: none;
}

/*固定ページの投稿日、更新日を非表示にする*/
.page .date-tags {
    display: none;
}

/*固定ページの投稿日を非表示にする*/
.page .post-date {
    display: none;
}

/*固定ページの投稿日を非表示にする*/
.page .post-date {
    display: none;
}

/*固定ページの更新日を非表示にする*/
.page .post-update {
    display: none;
}

/*固定ページの更新日を非表示にする*/
.page .post-update {
    display: none;
}

/*固定ページの投稿者名を非表示にする*/
.page .author-info {
    display: none;
}

/*固定ページの投稿者名を非表示にする*/
.page .author-info {
    display: none;
}

フォームのセキュリティ設定を行う

お問い合わせフォームを設置すると、残念ながら海外からの迷惑メール（スパム）が届くことがあります。原因の多くは、人間ではなく自動で動くプログラムがフォームに入力して送信してくるためです。

こうした不正なアクセスを防ぐために設定しておきたいのが「Cloudflare Turnstile（クラウドフレア ターンスタイル）」です。これは、サイトに訪れたユーザーが人間か、それとも迷惑メールを送りつけるようなプログラムかを判別してくれる、Cloudflare社が提供する無料のセキュリティサービスです。

Cloudflare TurnstileをWordPressに導入する手順

まずはじめに、Cloudflareの公式サイト（https://dash.cloudflare.com/sign-up）にアクセスし、アカウントを登録します。

Googleアカウントをお持ちであれば、入力の手間なく簡単に登録できますので、今回はその方法をご紹介します。

すでにブラウザでGoogleアカウントにログインしている場合は、そのまま使いたいアカウントを選択するだけで登録が完了します。

もしログインしていない場合は、メールアドレスとパスワードを入力してログインしましょう。

続いて、CloudflareがGoogleアカウントの基本情報（名前やメールアドレスなど）にアクセスするための許可画面が表示されますので、「次へ」をクリックします。

これで登録が完了し、自動的にCloudflareの管理画面に移動します。

次に、画面左側メニューの「Turnstile」をクリックします。

「ウィジェットを追加」をクリックします。

「ウィジェット名」に任意の名前を入力します。自分でわかりやすければ何でも大丈夫です。（例：サイト名＋お問い合わせフォーム）

続いて、「ホスト名の追加」をクリックします。

Turnstileを導入したいWordPressサイトのドメイン名を入力し、「追加」ボタンをクリックします。

補足：入力するのは「ドメイン名」なので、URLをそのまま入力するとエラーが出ます。

先ほど追加したドメイン名にチェックを入れ、「追加」をクリックします。

「ウィジェット名」と「ホスト名」が設定されているのを確認して、「作成」をクリックします。（ウィジェットモードや事前クリアランスはデフォルトのままで問題ありません）

「サイトキー」と「シークレットキー」が発行されます。

このあと、WordPressで入力をするので、どちらもコピーしておきましょう。

続いて、WordPressで設定を行います。画面左側「お問い合わせ」→「インテグレーション」をクリックします。

「外部APIとのインテグレーション」という画面が表示されるので、下にスクロールさせます。

「Turnstile」について書かれている場所の「インテグレーションのセットアップ」をクリックします。

先ほどコピーしておいた「サイトキー」と「シークレットキー」を入力して、「変更を保存」をクリックします。

以上で設定は完了です。画面上には「Turnstileはこのサイト上で有効化されています。」と表示されます。

お問い合わせフォームを設置したページを開き、Turnstile のウィジェット（バッジ）が表示されていれば、正常に設定できています。

デフォルトでは、フォームの上部にウィジェットが表示されるのですが、デザインが気になるという場合は、このウィジェットを移動させることもできます。

管理画面左メニュー「お問い合わせ」をクリックして、コンタクトフォームの一覧画面を開き、設定したいフォームの「編集」をクリックします。

Turnstile のウィジェット（バッジ）を表示させたい場所に、[turnstile]と入力して、
「保存」をクリックします。

今回は、[submit “送信”]（送信ボタン）の下に配置してみました。

実際に、お問い合わせフォームを設置したページを開くと、このようにTurnstile のウィジェット（バッジ）がページ下部に表示されます。個人的には、このほうがデザイン的にすっきりしてよいと思っています。

自動返信メールを設定する方法

Contact Form 7は簡単な設定を行うことで、自動返信機能もつけることができます。

フォームから問い合わせをしたユーザーに「無事に送信できましたよ」と知らせる自動返信メールは、相手に安心感を与えるために設定しておくと親切です。

自動返信メールを設定する手順

画面左メニューから「お問い合わせ」→「コンタクトフォーム」をクリックします。

設定したいフォームの「編集」をクリックします。

コンタクトフォームの編集画面が表示されたら、「メール」タブをクリックします。

画面を下にスクロールし、「メール（2）を使用」にチェックを入れます。

自動返信用の設定項目が表示されます。

さまざまな設定ができるのですが、今回は、必要最低限の設定だけをお伝えいたします。

①送信先（自動返信メールの送り先）
[your-email] には、ユーザーがお問い合わせフォームに入力したメールアドレスが反映されます。つまり、ユーザーが入力したメールアドレスがメールの送信先となるので、自動返信設定の場合は、ここはそのままにしておきます。

②送信元（自動返信メールの送信者名）
ここには、自動返信メールの送信者名としたい内容を記載します。デフォルトでは、[_site_title] となっており、[_site_title]には、一般設定で指定した「サイトのタイトル」が反映されます。つまり、何も設定をしなければ、送信者名は「サイト名」となります。

仮に、本名でサイト運営している場合は、このように記載すると、本名が送信者名となります。ハンドルネームや会社名なども、wordpress@example.comの前に記載すれば、送信者名とすることができます。

なお、このように、名前だけを記載するとエラーメッセージが出ますので、送信元として書かれているは、そのまま残しておきましょう。

また、このように自分のGメールアドレスなどを入力してしまうケースもよくあるのですが、WordPressのドメインと違うドメイン（例：gmail.com）を記載すると、このようなエラーが出ます。

もし、あなたが WordPress サイトと同じドメインのメールアドレスをすでに設定・利用している場合は、そのアドレスを記載して問題ありません。しかし、そうでなければ、初期設定で記載されている　は、そのまま残しておきましょう。

ここは初心者の方が、よくつまづくところで、私も過去につまづいたことがあるので、ご注意いただければと思います。

③題名（メールの件名）
ここに入力した内容が、自動返信メールの件名となります。デフォルトでは、[_site_title] “[your-subject]”となっています。

そのままだと、「サイト名」と「お問い合わせフォームの件名にユーザーが入力した内容」となり、こちらからの返信文の件名にはそぐわないものとなります。そのため、この部分は、「お問い合わせありがとうございました」のように変更しておくことをおすすめします。

④追加ヘッダー
特に変更する必要はありません。[_site_admin_email]には、WordPress の管理者のメールアドレスが反映されます。

⑤本文
「この度はお問い合わせいただき、誠にありがとうございます。」といった挨拶文や、返信には数日かかる場合がある旨などを追記しておくと、より丁寧な印象になります。

設定が終わったら、忘れずに「保存」ボタンをクリックしましょう。

お問い合わせフォームをサイトに設置する

お問い合わせフォームを固定ページとして公開しただけでは、サイト訪問者はアクセスできません。フッター（サイト最下部）やヘッダー（サイト上部）などに設置することで初めて機能します。

まずは、一般的に設置されることが多いフッターメニューへの追加方法をお伝えします。

管理画面左メニュー「外観」→「メニュー」をクリックします。

「メニュー」画面が表示されます。この画面でメニューを作成していきます。まず、「メニュー名」の入力欄に、作成するメニューの名前を入力します。自分がわかりやすいものであれば何でもよいのですが、今回は「フッターメニュー」と入力します。

次に、「メニュー設定」の項目の「フッターメニュー」にチェックを入れます。

「メニューを作成」をクリックします。

「メニュー項目を追加」の項目に表示されている「お問い合わせ」にチェックを入れ、「メニューに追加」をクリックします。

外面右側に「お問い合わせ」という項目が表示されます。「メニューを保存」をクリックすると、フッターメニューに「お問い合わせ」が表示されます。

実際のサイト上では、このように表示されます。

続いて、ヘッダーメニューも作成してみましょう。画面上部に表示されている「新しいメニューを作成しましょう」というテキストリンクをクリックします。

先ほど「フッターメニュー」を作成したときと同じ要領で、「ヘッダーメニュー」を作成していきます。今回、メニューの位置は「ヘッダーメニュー」と「ヘッダーモバイルメニュー」にチェックを入れています。入力が終わったら「メニューを作成」をクリックします。

「フッターメニュー」を作成したときと同じ要領で、「お問い合わせ」をメニューに追加したら、「メニューを保存」をクリックします。

ここまでの作業で、ヘッダーメニューが作成されます。

実際の画面上では、このように表示されます。まだメニューが１つしかないので、中央に表示されていますが、今後、メニューが増えてくると位置も変わってきます。

続いて、トップページに戻るための「TOP」というメニューも追加してみましょう。

「TOP」メニューは、「カスタムリンク」を利用して作成します。

「カスタムリンク」の「URL」の入力欄には、自分のサイトのトップページのURLを入力します。

リンク文字列には「TOP」と入力します。

入力が終わったら、「メニューに追加」をクリックします。

右側の「メニュー構造」の欄に、「TOP」が追加されます。

ここに並んでいるメニューは、上に位置しているものが左側に表示されます。

「TOP」は、一番左に表示させたいので、ドラッグ＆ドロップで一番上に移動させます。

配置の設定が終わったら「メニューを保存」をクリックします。

「TOP」メニューが追加され、ヘッダーメニューの項目が２つになりました。

おわりに

ここまで、WordPressに「お問い合わせフォーム」を設置する手順を一通りご紹介してきました。

最初は「なんだか難しそう…」と感じる方もいるかもしれませんが、Contact Form 7を使えば、基本的なフォームは意外とシンプルに作成できます。慣れてくると、通知メールや自動返信メールの設定、スパム対策なども自然と扱えるようになり、ぐっと安心感のあるサイトに仕上がっていきます。

お問い合わせフォームは、サイトを訪れてくれた方との大切なやり取りの入り口です。ちょっとした工夫を加えるだけで「きちんと対応してくれそう」という信頼につながり、結果的にサイト全体の印象を良くすることにもつながります。

ぜひ今回の内容を参考にしながら、ご自身のサイトに合ったお問い合わせフォームを整えてみてください。