WordPressで簡単にメールフォーム作成ガイド!「Contact Form 7」の使い方を初心者向けに徹底解説

Contact Form 7」は、WordPressで簡単に問い合わせフォームを作成できる人気プラグインです。このガイドでは、初心者でも迷わずに設定・カスタマイズできる方法を解説します!

スポンサーリンク

目次

Contact Form 7とは?

まず始めに、Contact Form 7の特徴や利点について説明します。

Contact Form 7の主な特徴

Contact Form 7とは?
「Contact Form 7」は、WordPressで利用できる無料の問い合わせフォーム作成プラグインです。世界中で非常に人気があり、多くのWordPressユーザーに愛用されています。このプラグインを使用すると、専門的なプログラミング知識がなくても簡単に問い合わせフォームを作成し、ウェブサイトに設置できます。

Contact Form 7の特徴

  • シンプルで使いやすい
    • 初心者でも簡単に操作できるインターフェース。必要な項目を選んでフォームを構築できる。
  • 柔軟なカスタマイズ
    • テキストボックス、チェックボックス、ドロップダウンリストなど、様々なフォーム要素を追加可能。
    • フォームのデザインや機能をコードで細かくカスタマイズできる。
  • 複数のフォームを作成可能
    • 異なる用途のフォームを複数作成し、それぞれ独立して管理可能。
  • スパム対策機能
    • reCAPTCHA(Google提供のスパム防止ツール)に対応。
    • Akismetプラグインと連携してスパムコメントを防ぐ。
  • ショートコードで簡単設置
    • フォームをショートコードとして発行し、任意のページや投稿に簡単に埋め込み可能。
  • 豊富な拡張性
    • 他のプラグイン(例えばSMTPプラグインやデータ保存プラグイン)との連携が可能。Contact Form 7専用のアドオンも豊富。

1. 主な用途

  • お問い合わせフォーム
    • 顧客や訪問者からの質問やリクエストを受け取る。
  • 申し込みフォーム
    • イベントやサービスの申し込み受付。
  • アンケートフォーム
    • フィードバックや調査を収集。
  • 予約フォーム
    • サービスや施設の予約受付。

2. Contact Form 7のメリット

  1. 無料で利用可能
    • 無料で高機能なフォーム作成が可能。
  2. シンプルで使いやすい
    • WordPress初心者でも簡単に使えるインターフェース。
  3. 多彩なカスタマイズ
    • HTMLやCSSを利用して、細かいデザインや動作を調整可能。
  4. 豊富なドキュメントとサポート
    • 公式サイトやコミュニティに多くの情報があるため、トラブルにも対応しやすい。

1. 「Contact Form 7」をインストールする

まずはContact Form 7をインストールし、有効化しましょう。

STEP
新規プラグインを追加

WordPress管理画面のメニューの「プラグイン」「新規プラグインを追加」をクリックする。

STEP
「Contact Form 7」のインストール

プラグインの検索バーに「Contact Form 7」と入力し検索します。
Contact Form 7が表示されたら「今すぐインストール」をクリックします。

STEP
「Contact Form 7」の有効化

インストールが完了すると「有効化」ボタンが表示されるのでクリックして有効化します。

これでプラグインのインストールは完了です。

お問い合わせフォーム設置手順

STEP
コンタクトフォームを作成する

管理画面メニューに「お問い合わせ」という項目が追加されています。
コンタクトフォーム」をクリックすると、すでにデフォルトのフォームが作成されています。
このフォームを使うことも可能ですが、新たに「新規追加」をクリックします。

STEP
コンタクトフォームの追加

フォーム」タブにはデフォルトで氏名・メールアドレス・題名・メッセージ本文・送信ボタンが設定されています。必要に応じてフォームフィールドを追加したり、削除したりできます。

タイトルに「お問い合わせ」などわかりやすい名前を入力します。
タイトルは外部公開されませんので、任意のものでOKです。

必要最低限の項目が揃っているので、このままでも使用可能ですが、他にも追加したい情報があれば、ボタンを押してフォームを追加しましょう。
変更をしたら、下にスクロールし「保存」をクリックします。

STEP
メールの設定方法

メール」タブを開くと、送信先・送信元・題名・追加ヘッダー・メッセージ本文には既にコードが入っています。この部分は、訪問者がお問い合わせフォームを送信したときに、運営者へ届くメールです。

送信先メールアドレスを設定します。以下は参考例です。

  • 送信先: 例:0000000@0000000.com (お問い合わせを受け取る運営者のメールアドレス)
  • 送信元:[_site_title] <[your-email]> (デフォルトでOK)
  • 題名 [_site_title] “[your-subject]” (メールの件名)
  • 追加ヘッダー:Reply-To: [your-email](デフォルトでOK)
  • メッセージ本文:(デフォルトでOKです。お好みで変更)
  • ファイル添付: 何も入力しなくてOK

メッセージ本文は変更しなくても問題ありませんが、お好みで変更します。
デフォルトのメッセージ本文

↓運営者が受け取るメールをなので、メッセージ本文をこのように見やすいように変更します。
変更後のメッセージ本文

この設定により、フォームの送信内容が指定したメールアドレスに届きます。

STEP
メール (2)の設定

「メール(2)」を使用にチェックを入れると、お問い合わせしたユーザーに自動返信メールを設定できる機能です。自動返信メールを設定した方が、ユーザーがメールが送信になったのか安心できるので設定をお勧めします。

  • 送信先: [your-email] (デフォルトでOK)
  • 送信元:[_site_title] <[your-email]> (デフォルトでOK)
  • 題名 [_site_title] “[your-subject]” メールの件名「お問い合わせありがとうございます」など
  • 追加ヘッダー:Reply-To: [_site_admin_email] メールの返信先
    (デフォルトではWordPress管理者のメールアドレスが設定されます)
  • メッセージ本文:(デフォルトでOKです。お好みで変更)
  • ファイル添付: 何も入力しなくてOK

メッセージ本文は変更しなくても問題ありませんが、お好みで変更します。
デフォルトのメッセージ本文

ユーザーが受け取るメールをなので、メッセージ本文をこのように見やすいように変更します。
変更後のメッセージ本文

メールフォーム を設置した後に、実際にメールフォームに入力してメール通知のテストを行います。
意図した通りに動作していれば完了です。

3. お問い合わせフォームを固定ページに設置する

STEP
ショートコードをコピー

フォーム編集画面の上部にショートコードが表示されます。
例:


    このコードをコピーします。

    STEP
    ページや投稿に貼り付け

    ダッシュボード「固定ページ」より「新規固定ページを追加」をクリックし編集または作成します。

    STEP
    固定ページを作成

    タイトルを追加」に「例: お問い合わせ/メールフォーム 」などタイトルを入力します。
    そして、「➕」から「すべて表示」をクリックしブロックエディタを表示します。

    ブロックエディタより「Contact Form 7」を検索またはスクローズして探しクリックします。

    STEP
    コンタクトフォームに貼り付け

    Contact Form 7」をクリックすると下記のようなフォームが設定されるので、枠内をクリックし、先ほどコピーしたショートコードを貼り付けます。
    例:

      固定ページを保存して公開します。
      ただ、このままではお問い合わせフォームがどこにあるのか分からないので、以下にある「5.お問い合わせページをヘッダーとフッターに追加する方法」の操作が必要です。

      4. フォームを確認する

      STEP
      公開したページを確認

      ショートコードを貼り付けたページをブラウザで確認し、フォームが正しく表示されているかチェックしましょう。

      STEP
      テスト送信

      フォームに入力して実際に送信し、送信確認メールが正しく届くかテストします。
      管理者宛てメール

      ユーザー宛てメール

      送信後、問い合わせメールが届いているかメールを確認します。
      テストメールを確認し、訂正箇所があれば訂正します。

      5.お問い合わせページをヘッダーとフッターに追加する方法

      1. ヘッダーにお問い合わせリンクを追加する

      Cocoonテーマでは、ヘッダーメニューやカスタムコードを使用してリンクを追加できます。

      STEP
      ヘッダーメニューに追加する

      ダッシュボードメニューの「外観」「メニュー」をクリックします。

      STEP
      メニューを作成

      メニュー名」を入力し「メニューを作成」をクリックし保存します( Menu、メニューなど)

      STEP
      メニューに追加

      固定ページ」から「お問い合わせ」ページを選択し、「メニューに追加」し表示したい「メニューの位置」にチェックを入れ、「メニューを保存」をクリックします。

      ヘッダーメニューにチェックを入れればヘッダーに、フッターメニューにチェックを入れればフッターに表示されます。

      お問い合わせページをサイドバーに追加する方法

      STEP
      ショートコードを取得する

      WordPress管理画面の「お問い合わせ」 「 コンタクトフォーム」より
      ショートコードをコピーします
      (例:

        STEP
        サイドバーにウィジェットを追加する

        管理画面の「外観」「 ウィジェット」に移動します。

        STEP
        「カスタムHTML」ウィジェットを追加

        サイドバーエリアを選択し、「カスタムHTML」ウィジェットをドラッグ&ドロップで右側の「サイドバー」に追加します。

        STEP
        ショートコードを貼り付ける

        「カスタムHTML」のプルダウンを開き、編集画面にタイトルを入力し、「内容」に先ほどコピーしたショートコードを貼り付けます。
        (例:

          内容を確認し、「保存」ボタンをクリックします。

          STEP
          設定を表示を確認

          サイトの任意のページを開き、サイドバーにフォームが正しく表示されているか確認します。

          これでContact Form 7の設置が完了です!
          必要に応じて、フォームのデザインや機能を追加でカスタマイズしてください。

          Contact Form 7でeCAPTCHAを設定しスパム対策

          お問い合わせフォーム「Contact Form 7」を使っていると、スパムメールに悩まされることがありますよね。「Contact Form 7」と「reCAPTCHA」を組み合わせれば、スパムメールを大幅に減らすことができます。まだ設定していない方は、この機会にぜひ導入してみてください!

          reCAPTCHAの設定方法は以下の記事にて解説しています。

          スポンサーリンク

          目次