【Contact Form 7】お問い合わせページを10分で設置する方法

お問い合わせページの設置方法とカスタマイズの方法について解説します。

WordPressではプラグインの「Contact Form 7」を使えば簡単に作成することができます。

WordPressに慣れていれば5分で設置できます

また、別の方法としてGoogle フォームを使用する方法についても紹介します。

お問い合わせページの設置方法

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

WordPressの管理画面で「プラグイン → 新規追加」で「Contact Form 7」を検索し、「インストール → 有効化」します。

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

WordPressのメニューに「✉お問い合わせ」ができているので、「お問い合わせ → 新規追加」をクリックします。

コンタクトフォームの編集画面になります。

このコンタクトフォームの名前を設定してください。

ここでつける名前はブログに表示されないので、自分がわかりやすい名前でOKです。

私の場合は「お問い合わせ」にしました。

下記の赤枠の部分をコピーします。

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

WordPressの管理画面のメニューで「固定ページ → 新規追加」をクリックします。

新規記事の作成ページになるので、以下の作業を行います。

  1. タイトルを入力する(お問い合わせページに表示されます)。
  2. 先ほどコピーしたコードを貼り付ける。コンタクトフォームを選択は先ほど自分でつけたお問い合わせページの名前を選択する。
  3. パーマリンクを設定する(パーマリンク設定を変更している場合のみ)。
  4. 公開する。

これでお問い合わせページができました。

パーマリンク設定とは何かわからない方、パーマリンクの決め方については、以下のページを参考にしてください。

WordPressで適切にパーマリンクを設定する

お問い合わせページを設置する

ブログに作成したお問い合わせページを設置します。

今回は、ブログのフッター(最下部)に設置します。

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

メニューを作ったことのない場合は、「メニュー名」に任意の名前を入力し、「メニューを作成」をクリックします。

「メニュー項目を追加」で、「固定ページ → お問い合わせ(先ほど作った固定ページのタイトル)」にチェックを入れて、「メニューに追加」をクリックします。

「メニュー設定」で「フッターメニュー(ページ最下部)」にチェックを入れて、「メニューを保存」をクリックします。

これで、フッターにお問い合わせが表示され、お問い合わせページの作成は完了です。

完成したお問い合わせページは以下です。

完成したお問い合わせページ

お問い合わせページのカスタマイズ

上記で作成したデフォルトのお問い合わせページでも十分ですが、少しだけカスタマイズしていきます。

必須入力 ⇔ 任意入力 を変更する 

デフォルトの設定では、「メッセージ本文」のみ「任意」になっており、その他の項目は「必須」となっています。

メッセージ本文を「必須」に、題名を「任意」に変更します。

まずWordPressの管理画面でメニューから「お問い合わせ」をクリックし、上記で作成したお問い合わせフォームの編集画面に入ります。

フォームのデフォルト設定は、以下のようになっています。

題名はtextの後の*を削除します。

メッセージ本文はtextareaの後に*を追加します。

これで必須 ⇔ 任意 の切り替えができました。

お問い合わせページに表示される内容をわかりやすくするために、氏名(必須のように追加しておきます。

入力が完了したら、忘れずに「保存」を押してください。

試しに、お問い合わせページからメールアドレスを空白で送信をクリックすると、「必須項目に入力してください。」と表示されます。

ちなみに、メールアドレスもきちんと入力しないと、「入力されたメールアドレスに間違いがあります。」と表示されて、問い合わせを送信することはできません。

試しにお問い合わせページからメッセージを送信してみる

以下のように、入力項目をきちんと入力して、試しに問い合わせを送信してみます。

送信をクリックすると、ページ下部に下記のようなメッセージが送られます。

自分がWordPressに登録しているメールアドレスにメッセージが届きます。

項目を追加する

問い合わせフォームの項目を追加します。

今回は電話番号の入力項目を追加してみます。

まずお問い合わせフォームの編集フォームに入り、電話番号を追加したい場所をクリックします。

下記のような画面になるので、名前に「your-tel」と入力します。

この名前は英数字であれば何でも良いです(日本語はだめです)。

必須項目にしたければ、必須項目にチェックをつけます。

入力が完了したら、「タグを挿入」をクリックします。

すると、下記のように[tel your-tel]が追加されています。

このままでは入力欄のみ追加されるので、下記の用に追加します。

入力できたら、忘れずに「保存」をクリックします。

お問い合わせページを見てみると、電話番号が追加されています。

自分に送信されるメールの内容を変更する

電話番号の入力フォームを追加できましたが、このままでは自分に送信されるメールに電話番号が入っていないので変更します。

お問い合わせページの編集画面で「メール」タブをクリックします。

編集画面は下記のようになっています。

今回は、メッセージ本文の題名の下に電話番号を追加します。

題名の下に、電話番号:[your-tel]を追加します。

入力が完了したら、忘れずに「保存」をクリックします。

試しにお問い合わせページからメッセージを送信してみる

下記のようなお問い合わせを送信してみます。

下記のようなメッセージが自分のメールアドレスに送信されてきました。電話番号もきちんと入っています。

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

お問い合わせをしていただいても、すぐに返信できる時ばかりではないと思います。

お問い合わせを送っていただいた方に少しでも安心いただけるように、自動返信メールを設定しておきます。

上記の「メール」タブの下の方に下記のようなチェック項目があります。

「メール(2)を使用」にチェックを入れることで、自動返信メールを設定できます。

デフォルトの設定は下記のようになっています。

メールの内容は問い合わせ内容をそのまま返信するのみになっているので、下記の内容を自動返信メールに追加します。

  • 題名に「お問い合わせありがとうございます。」を追加する。
  • メッセージ本文に、自動返信メールであることと、返信が遅れるかもしれない旨を追加する。

下記の黄色の部分を追加します。

これで自動返信メールの設定は完了です。

試しにお問い合わせページからメッセージを送信してみる

下記のような内容をお問い合わせページから送信してみます。

自動返信メールを確認するために、メールアドレスは自分のメールアドレスにしています(画像ではメールアドレスは消しています)。

下記のようなメールが自動返信されてきました。

送信ボタンのデザインを変える

SANGOでは、送信ボタンのデザインを簡単に変更できます。

変更前
変更後

お問い合わせフォームの編集画面から、下記の部分を変更します。

変更前
[submit "送信"]
変更後
[submit class:raised class:blue-bc "送信する"]

もっとフォームをカスタマイズする

Contact Form 7 にはたくさんの機能が備わっているので、もっとフォームをカスタマイズしたい場合は、 Contact Form 7 の公式ページを見るとたくさん情報が載っています。

スパム対策「Invisible reCaptcha」を導入する

お問い合わせページでは誰もがメッセージを送信することができるので、もしかするとスパム行為(迷惑行為)があるかもしれません。

その対策として、WordPressには「Invisible reCaptcha」という優秀なプラグインがあります。

詳細や導入方法は、下記のYouTubeがわかりやすいです。

「Invisible reCaptcha」 は入れていなくても、「Akismet Anti-Apam」を入れている場合は問題ありません。

上記の内容が分からないという場合は、下記のページを見ていただけると参考になると思います。

【SANGOとの相性を解説】WordPressにおすすめのプラグイン13選

Google フォームを使用する

「Contact Form 7」の代わりに「Google フォーム」を使用するという手段もあります。

プラグインをあまり入れすぎたくないという場合は、こちらの方法がおすすめです。

スプレッドシートとも簡単に連携できるので、お問い合わせの履歴を自動で簡単に管理できます。

「Google フォーム」 の導入方法は、以下のサイトがわかりやすかったです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA


検索

アーカイブ

プロフィール

プロフィール背景画像
プロフィール画像

チャベス

機械機器メーカーで研究開発をしている機械系エンジニアです。 Notion、SANGO(WordPress)、Pythonが好きです。 詳細プロフィールはこちらnoteにNotionの記事も書いています。 Notion公式資格のNotion Essentials Badge取得。

WP-Searchにサイト事例として掲載されています。