【WordPress】お問い合わせフォームの設置方法(Contact Form 7)

サイトにお問い合わせフォームを設置したい!

という方向けに、この記事ではプラグイン:「Contact Form 7」を使って、WordPressにお問い合わせフォームを設置する方法を紹介します。

お問い合わせフォームの設定方法

1.WordPress管理画面にログインする

お問い合わせフォームを設置したいサイトのWordPress管理画面にログインしてください。

2.固定ページを作成する

お問い合わせフォームを設置するために固定ページを作成します。
WordPressの管理画面の左側メニューから「固定ページ」を開き、「固定ページを追加」をクリックします。

固定ページの編集画面が開いたらタイトルを入力し、「下書き保存」をクリックして固定ページを保存します。

3.プラグインを新規追加する

メニューから「プラグイン」を開き、「新規プラグインを追加」をクリックします。
プラグインを新規追加

4.「Contact Form 7」を検索する

右上の検索フォームに「Contact Form 7」と入力して検索してください。

5.インストールして有効化する

検索結果から「Contact Form 7」を探し、「今すぐインストール」ボタンをクリックしてください。

ボタンが「有効化」へと変わるので、再びクリックしてください。

6.お問い合わせフォームを作成する

メニューから「お問い合わせ」を開き、「新規追加」をクリックします。

まず、画面上部の「ここにタイトルを入力」欄にフォームのタイトル(名前)を入力します。

次にフォームの内容を設定します。
初期状態では、画像の入力フィールドが用意されています。必要に応じて、入力フィールドの追加やカスタマイズを行ってください。
設定が完了したら、「保存」ボタンをクリックします。

7.固定ページ(お問い合わせフォーム)を公開する

フォームを保存するとフォームの上部にショートコード(例:[contact-form-7 id="123" title="お問い合わせ"])が表示されるので、ショートコードをコピーしておきます。

メニューから「固定ページ」を開き、先ほど作成した固定ページ「お問い合わせ」をクリックします。

固定ページの編集画面に「ショートコードブロック」を追加し、先ほどコピーしたショートコードをブロック内にペーストします。
ショートコードの設置が完了したら、「公開」ボタンをクリックし、固定ページを公開します。

これで、サイトの訪問者がお問い合わせフォームにアクセスできるようになります。

8.ヘッダーメニューにお問い合わせページを追加する

メニューから「外観」を開き、その中にある「メニュー」をクリックし、新しいメニューを作成します。

すでに他のメニューが存在する場合

すでに他のメニューが存在する場合、「新しいメニューを作成しましょう」をクリックし、新しいメニューを作成してください。

まず、「メニュー構造」の「メニュー名」を入力します。
次に「メニュー設定」の「メニューの位置」ヘッダーメニュー/ヘッダーモバイルメニューにチェックを入れます。
以上が完了したら「メニューを保存」ボタンをクリックします。

すでにサイトにヘッダーメニューが存在する場合

すでにヘッダーメニューが存在する場合、「編集するメニューを選択:」のプルダウンメニューから「ヘッダーメニュー」を選択してください。

画面左の「メニュー項目を追加」の「固定ページ」から「お問い合わせ」にチェックを入れ、「メニューに追加」ボタンをクリックします。

メニュー構造に「お問い合わせ」が追加されます。
追加されたことを確認したら「メニューを保存」ボタンをクリックします。

メニューの保存が完了すると、サイトのヘッダーメニューに追加した「お問い合わせ」が表示されます。これで、ヘッダーメニューからサイト訪問者がお問い合わせフォームにアクセスできるようになります。
フォームを公開したら、実際に自分で送信テストをしてみましょう。
送信後に「メッセージは送信されました」と表示され、指定したメールアドレスに通知が届くことを確認してください。

よくある質問

A.お問い合わせフォームから送信された内容は、デフォルトではサイト管理者のメールアドレス(WordPress設定で指定されたアドレス)に送られます。

A.メニューのお問い合わせから、作成したフォームの編集画面を開き、上部タブ「メール」をクリックします。「送信先」欄のデフォルト[_site_admin_email]を希望するメールアドレスに変更し、保存してください。
複数の送信先にメールを送りたい場合は、カンマで区切って複数のメールアドレスを入力してください。
例:info@example.com, support@example.com

関連記事

お問い合わせフォームを設置したら、スパム対策も忘れずに!