MENU

初心者必見!Contact Form 7でお問い合わせフォームを設置する方法

初心者に優しい WordPress プラグイン、Contact Form 7 を使ってコンタクトフォームを設置する方法を描いた、明るく教育的なテーマのアイキャッチ画像です。画像にはノートパソコンに向かう人の手が描かれており、画面には Contact Form 7 のロゴとコンタクトフォームの画像が表示されています。背景には初心者のシンボルである緑の矢印とクエスチョンマークが描かれ、親しみやすく教育的な雰囲気の画像になっています。

ウェブサイト運営者なら誰もが直面する訪問者からの問い合わせ。ウェブサイトに問い合わせフォームを追加したいけど、難しそう…そんな心配は不要!

Contact Form 7を使えば、初心者でも簡単にプロフェッショナルな問い合わせページを作成できます。
数ステップでスマートな問い合わせシステムが構築可能です。

この記事では、Contact Form 7のインストールからカスタマイズまで、あなたのサイトを効率的に変える方法をご紹介します。

目次

Contact Form 7とは

Contact Form 7はWordPress用の無料のプラグインで、サイト訪問者からの問い合わせを受けて返答するプラグインです。

ウェブサイトに簡単に訪問者からの送信用フォームを追加することができます。
カスタマイズ可能なフォームとメールのコンテンツを提供し、スパムから保護するためのキャプチャ機能も含まれています。

また、コーディングの知識が少なくてもフォームを作成することができます。

設定方法

WordPressがインストール済みであることが前提になります。

  • Contact Form 7のインストールと有効化
  • 固定ページ「お問い合わせ」を作成
  • フォームを編集
  • メールを編集
  • メール (2)を編集

Contact Form 7のインストールと有効化

  • WordPressサイドメニューのプラグインをクリック
  • 新規プラグインを追加をクリック
  • 「プラグインの検索…」に「Contact Form 7」と入力
  • 「Contact Form 7」の今すぐインストールをクリック
  • 有効化をクリック

固定ページ「お問い合わせ」を作成

ショートコードのコピー

  1. WordPressサイドメニューのお問い合わせをクリック
  2. コンタクトフォームをクリック
  3. 「ショートコード」らんにあるコードコピー
    「CTsRL(cmmmand)」+Cか右クリック+コピー
Contact Form 7説明画像1

固定ページを作成

  • WordPressサイドメニューのプ固定ページをクリック
  • 新規固定ページを追加をクリック
  • 「タイトルを追加」に「お問い合わせ」と入力
  • 「ブロックを選択するには「/」を入力」にペースト
    「CTRL(cmmmand)」+Vか右クリック+貼り付け
  • 画面右上の をクリック
  • 「固定ページ」タブをクリック
  • 「URL」の右にある「ドメイン名/自動下書き/」をクリック
  • 「パーマリンク」に「ask」と入力
    「ask」は任意の文字です。
  • 公開をクリック
Contact Form 7説明画像2
パーマリンク

パーマリンクとは一般にURLのことです。日付や数字を絡めた設定もできますが、シンプルな投稿名が無難です。なお、投稿名は記事ごとに英語での記入が原則です。
設定は次のとおりです。

  1. WordPressサイドメニューの設定をクリック
  2. パーマリンクをクリック
  3. 「投稿名」を選択
WordPress パーマリンク構造
  1. 変更を保存をクリック

問い合わせできるかテストする

Contact Form 7のデフォルト値で問い合わせができるか、テストをしてみます。

メニューなど設定をしていなければ、トップページのヘッダーに固定ページがメニューになっています。
テーマによって事前にメニューを作らないと表示できない場合があります。

Contact Form 7説明画像3
  1. お問い合わせをクリック
  2. 各項目を入力して送信をクリック
    「ありがとうございます。メッセージは送信されました。」と表示されます。

【フォーム】

Contact Form 7説明画像4
  1. WordPressに設定したメールアドレスを開いて、受信したことを確認
Contact Form 7説明画像5

フォームを編集

訪問者が問い合わせをするフォームのレイアウトを編集します。

  1. WordPressサイドメニューのお問い合わせをクリック
  2. コンタクトフォームをクリック
  3. 編集をクリック
    コンタクトフォームをクリックしても同じ動作になります。
Contact Form 7説明画像6
  1. ファームのテンプレート画面が表示
    テキストボックスのため直接編集できますし、タグ作成ツールで編集することもできます。
  2. 編集後、保存をクリック
Contact Form 7説明画像7

デフォルトの内容を図にしておきます。

ラベル名フィールドの型名 前入力必須オートコン
プリート
氏名text型your-nametext*(必須)あり
メールアドレスmail型your-emailemail*(必須)あり
題名text型your-subjecttext*(必須)なし
メッセージ本文
(任意)
textarea型your-message任意なし
送信submit型submit
オートコンプリート

ユーザーによるキーボード入力履歴を活用して、入力操作の軽減を図る機能
最初の文字を入力すると、過去の履歴を調べて一致する文字を、候補として一覧で表示します。

メールを編集

WordPressの問い合わせボックスを使って、訪問者からサイト管理者へ送信するメールのレイアウトを編集します。

Contact Form 7説明画像8

送信先

[_site_admin_email]でサイト管理者のメールアドレスを表します。
WordPressの設定一般設定の「管理者メールアドレス」に入力したアドレスです。

送信元

<wordpress@ドメイン名>WordPressで自動的に付けられるメールアドレスです。
セキュリティを高めたい場合は、変更することもできます。

小規模な運用であれば、デフォルトの設定のままで問題ない場合が多いです。

[_site_title]はサイトのタイトルを表します。
WordPressの設定一般の「サイトのタイトル」に入力した文字が表示されます。

題名

[your-subject]は問い合わせ文の題名です。

追加ヘッダー

「Reply-To:」を追加することで、返信先のアドレス[your-email](問い合わせ送信者のメールアドレス)を指定することができます。

メール (2)を編集

サイト管理者が問い合わせ文を受信したことを、問い合わせ送信者に案内するための、自動返信メールとして利用します。

使用するには「メール (2) を使用」にチェックを入れます。
すると次のように表示されます。

Contact Form 7説明画像9

何も対策しないままであると、悪意をもった者が他人のメールアドレスで、この問い合わせを使ってメールを送ると、自動で他人のメールアドレスに返信してしまいます。

サイト名を使って悪意をもった者が勝手にメールを送れてしまうため、防御策をするよう警告がでています。

防御策を講じなくても、自動返信メールは送れます。
しかし非常に危険なので防止用のサービスがありますので導入を検討して下さい。
詳細は次の記事を参照下さい。

なお、設定は「メールを編集」とほぼ同じなので説明は省略します。

まとめ

WordPress用プラグイン「Contact Form 7」を使うと、簡単にカスタマイズ可能な問い合わせフォームを設置することができます。

インストール後、ショートコードをコピーして固定ページに貼り付けるだけで、カスタマイズ可能な問い合わせフォームが完成します。

メールの自動返信や確認画面の追加など、高度なカスタマイズも可能です。
プログラミング知識不要で、サイトの機能性を向上させます。、初心者にも優しい設計です。

目次