Blog Modal Image
Webサイト

簡単なWordPressでのお問い合わせフォームの作り方！Contact Form 7プラグインの使い方も解説！

WordPressにはできることが多くありますが、サイトへ訪れたユーザーとのインタラクティブなコミュニケーションを取るための「お問い合わせフォーム機能」も構築することができます。

この記事に辿り着いた方の中には「お問い合わせフォームの作り方は？」「Contact Form 7って聞いたことあるけどどう使えばいい？」などの疑問をお持ちの方が多いのでは無いかと思います。

そこで、本記事は初めてWordPressを構築し始めた人、フォームを使ってサイトを本格運用したい人に向けた“WordPressで簡単にお問い合わせフォームを作る方法が知れる”内容となっております。

ぜひ参考にしていただけますと幸いです。

LeographのWordPressテーマ・プラグイン開発サービス

簡単にWordPressでお問い合わせフォームを作る方法

早速ですが、結論から申し上げたいと思います。実はWordPressでお問い合わせフォームを作るのは大変な作業ではありません。

大きく分けて「プラグインの導入」と「フォームを表示する固定ページの用意」という２ステップだけで、フォーム実装が可能になります。

厳密には他にもいろいろな設定を施すことになりますが、それについては本記事の後半で解説するとします。

Contact Form 7を導入する

まずはプラグインの導入です。最もお勧めできるプラグインは「Contact Form 7」です。

導入方法は、WordPress管理画面の左メニューから「プラグイン＞新規追加」をクリックしましょう。

検索欄に「Contact Form 7」と入力すると、青背景に山が映ったアイコンが目印のプラグインが表示されます。これをインストールし、完了後に「有効化」をクリックすれば導入は完了です。

有効化後は左メニューに「お問い合わせ」が追加されるので、ここからフォームの新規作成が可能です。

「新規追加」を選ぶとデフォルトのフォームタグが自動生成されるため、タイトルを付けて「保存」をクリックするだけでフォームそのもののデフォルト生成はOK。

保存が完了すると、そのフォームに固有の「ショートコード」が生成されるので、これを控えておきましょう。

本記事の後半で具体的な設定方法を解説するので、よろしければそちらも参考にしてください。

固定ページを用意する

プラグインの導入が完了したら、次は固定ページを用意しましょう。

フォームを出力するプラグインは、ページにショートコード（タグを埋め込むだけでHTMLが生成されるもの）を使うことで使用が可能になるので、該当の固定ページを用意しておくことが必要になります。

厳密にいえば、固定ページでなくとも“ページ”であればショートコードの埋め込みが可能ですが、ここではそのご説明を割愛します。

設定方法ですが、WordPress管理画面から「固定ページ＞新規追加」をクリックし、タイトルに「お問い合わせ」などわかりやすい名前を付けましょう。

本文エディタに先ほどのContact Form 7でコピーしたショートコードを貼り付け、最後に「公開」ボタンを押せばお問い合わせページが完成。

実際の表示を確認し、レイアウト崩れや余白のバランスをチェックしましょう。必要に応じてテーマのCSSで装飾を加えれば、よりサイト全体に馴染むフォームが作れます。

このたったの2ステップでお問い合わせフォームの実現が可能になるので、非常にシンプルといえます。

LeographのWordPressテーマ・プラグイン開発サービス

WordPressでお問い合わせフォームに使われるプラグイン3選

WordPressでお問い合わせフォームを作成する際、プラグイン選びは重要です。

実はフォームプラグインにも非常に多くの種類があり、どれを選べばいいか迷う方も多いのでは無いかと推察します。

最もわかりやすい判断基準は「開発サポートの充実度」「信頼性の高い開発コミュニティがあるか」「シンプルな構築が可能かどうか」です。

上記の観点で、これまでWordPress運用における“よく使われがちなフォームプラグイン”を3つご紹介します。

Contact Form 7がおすすめ

Contact Form 7は、お問い合わせフォームプラグインの定番です。

完全無料ながら機能は充実しており、HTML／CSSの編集でデザインを自在にカスタマイズ可能。拡張でreCAPTCHAを使ったスパム対策ができるほか、Flamingoというプラグインを組み合わせれば投稿データをデータベースに保存して管理できます。

さらに、自動返信メールの細かな設定、ファイルアップロード機能まで備え、要件に合わせた拡張性は抜群です。

Gitリポジトリでの活発なユーザーコミュニティも充実しているため、バグ修正や脆弱性克服までサポートも万全です。初心者からプロまで幅広くおすすめできるプラグインと言えるでしょう。

参考: Contact Form 7公式ページ

MW WP Form（開発終了）

MW WP Formは、日本製のフォーム作成プラグインで、こちらもContact Form 7と同様に非常にシンプルかつ便利な機能を兼ね備えた優れたプラグインです。

しかし、2023年に開発が終了し、以降は更新もセキュリティ対応も停止。今後の最新WordPressとの互換性が保証されず、脆弱性リスクもないとは言い切れないため新規導入はおすすめできません。

代替としてContact Form 7やWPFormsなど、定期的にメンテナンスされるプラグインを選びましょう。

なお、こちらの脆弱性についてはMW WP Form開発者本人（キタジマタカシ氏）が「絶対の理由がないのであれば他のプラグインをおすすめする」とも発言されています。

WPForms

WPFormsはドラッグ＆ドロップで直感的にフォームを作成できる海外製プラグインです。テンプレートが豊富で問い合わせ以外のアンケートや登録フォームにも対応します。

無料版（WPForms Lite）でもフォーム作成とメール通知、スパム対策（reCAPTCHA）機能を搭載しており、プロ版では決済連携や条件分岐、マルチページフォーム、マーケティングツール連携などが追加され、用途や規模に合わせて拡張可能です。

また、スマホ・タブレット対応のレスポンシブデザインやGDPR準拠の同意フォーム、各種サービスとの連携機能も備えています。

定期的なアップデートによりセキュリティ面も安心で、非常に人気なプラグインの一つです。

参考: WPForms公式ページ

LeographのWordPressテーマ・プラグイン開発サービス

Contact Form 7の各種使い方を解説

Contact Form 7は、WordPressで最も導入実績のあるお問い合わせフォームプラグインの一つです。

豊富なフォームタグを使って入力項目を自由にカスタマイズできるうえ、メールテンプレート内でのショートコード活用やカスタムCSSによるデザイン調整も可能。

非常にシンプルな操作でフォームを実現できるContact Form 7ですが、この実装には各種カスタマイズ性があるため、本節ではその設定方法を詳しく解説していきたいかと思います。

フォームタグ

フォームタグとは、Contact Form 7の入力項目を定義することができるタグのことです。

フォームを登録すると上記画像のようなプレーンテキストエディタ風のテキストエリアが現れ、ここでタグの作業を行うことになります。

標準で用意されているタグには以下のものがあります:

  • 同意確認 (acceptance)
  • テキスト (text)
  • メールアドレス (email)
  • 電話番号 (tel)
  • URL (url)
  • テキストエリア (textarea)
  • 数値 (number)
  • 日付 (date)
  • セレクト (select)
  • チェックボックス (checkbox)
  • ラジオ (radio)
  • ファイルアップロード (file)
  • 送信 (submit)

必須項目にするにはタグ内に「*」を追加するだけでよく、この操作だけで面倒なフォーム構築が一瞬で可能似るのです。（例：[text* your-name placeholder “お名前”]で名前フィールドを必須に設定）

各種フォームタグの構文（書き方のルール）については、公式ページが最もわかりやすく説明しているので、そちらをご覧ください。

参考: Contact Form 7公式ページのフォームタグ構文説明

メール設定

メール設定では、ユーザーがフォームで送信した内容を指定のメールアドレスへ届けるための項目を定義します。

該当のフォームにて［メール］タブを開き、各種項目を埋めていくことで完了します。以下が入力する項目の種類です。

項目内容
送信先フォーム内容を届けたいメールアドレス
送信元送信元メール。必ずサイトドメイン名で設定すること。
題名メール件名
追加ヘッダーメールの送信設定を細かくカスタマイズ。
「Reply-To」、「Cc」、「Bcc」といった設定が可能。
メッセージ本文ユーザーが送信した内容を入力、カスタマイズ可能。
設定済みのフォームタグを利用できる。

また、送信元が必ずサイトドメイン名のメールアドレスである必要があるのは、サイトドメイン以外のメールアドレスを送信元に利用すると、偽装メール（スパム判定）になってしまうためです。

スパム対策（recaptcha）

スパムボットによる迷惑投稿を防ぐために、Contact Form 7ではGoogle reCAPTCHAを簡単に導入できます。

設定方法は以下の通りです:

  1. Google reCAPTCHA管理画面で新規登録
  2. v3またはv2のサイトキーとシークレットキーを取得
  3. Contact Form 7 > インテグレーション > reCAPTCHAを開く
  4. 取得したキーを貼り付け保存

この設定を行うと、フォーム下部に自動的にreCAPTCHAが埋め込まれ、ボット検証が有効化されます。

メールを送信できない場合

Contact Form 7を設定していると、たまに「メール送信ができない」という事態に陥ります。多くの場合は設定方法にミスがあるので、ここではミスをチェックする手順をご紹介します。

もし送信ができない場合は以下の手順をひとつずつ試してみてください。

  1. エラーメッセージを確認
    • 送信後に赤文字のエラーが出る場合は、どの項目で止まっているか。
    • 必須項目の未入力や形式エラーが原因のことが多いです。
  2. メール設定を見直す
    • 「メール」タブの「送信先アドレス」「送信元アドレス」が正しいか
    • サーバーのメール送信制限（PHP mail関数の制限やSMTP認証）がないか
  3. プラグイン・テーマの競合
    • 他のプラグインやテーマと干渉しているとAJAX送信が失敗します。
    • 一時的にプラグインを無効化するなど
    • テーマをWordPress公式の「Twenty Twenty-One」などに変更するなど

サンクスページ（完了画面）の作成方法

Contact Form 7はフォーム送信およびメール送受信の設定ができますが、デフォルトで完了画面をサポートはしていません。なので、開発側で実装する必要があります。

まず、固定ページ＞新規追加で「サンクスページ（完了画面）」を作成し、スラッグを”/thanks/”などにしておきましょう。このページを該当のお問い合わせページの子要素に登録しておきます。

この後、functions.phpにて特殊なJavaScriptの実装をします。

実は、Contact Form 7のメール送信はAjax通信を採用しており、送信の際の固有イベント名は「wpcf7mailsent」です。このイベントにリスナーを設定してやると、開発側で色々と操作ができます。

以下のPHPコードを参考にしてみてください。

function custom_wpcf7_redirect()
{
?>
  <script type="text/javascript">
    document.addEventListener('wpcf7mailsent', function(event) {
      // フォーム送信時のパス
      var currentPath = window.location.pathname;
      // リダイレクトさせたいURLパス
      var redirectUrl = window.location.origin + '/contact/thanks/';

      // パスに応じてリダイレクト先を変更させることも可能です
      if (currentPath.startsWith('/download/')) {
        // /download/{カスタム投稿のスラッグ}/thanks へリダイレクト
        redirectUrl = currentPath + 'thanks/';
      } 

      // リダイレクトを実行
      window.location.href = redirectUrl;
    }, false);
  </script>
  <?php
}
add_action('wp_footer', 'custom_wpcf7_redirect');

上記のコードは、「Contact Form 7が送信を完了した後に好きなパスへユーザーをリダイレクトさせる」というJavaScriptの関数を定義しており、それをフッターへ登録するアクションフックPHPです。

このredirectUrlに、登録済みサンクスページ（完了画面）のパーマリンクを設置してあげれば、完了画面の実装が可能となります。

LeographのWordPressテーマ・プラグイン開発サービス

まとめ

本記事では、WordPressでお問い合わせフォームを簡単に作成する方法として、Contact Form 7の導入手順から各種設定までを解説しました。

非常に便利でシンプルな実装ですが、こだわろうと思えばいくらでもカスタマイズが可能な点も魅力ですよね。

ぜひ本記事を参考にしていただけると幸いです。

LeographのWordPressテーマ・プラグイン開発サービス

この記事の著者

児玉慶一（ケーイチ）

児玉慶一

執行役員/ AI・ITエンジニア

SNS Xアカウント

愛称: ケーイチ
1999年2月生まれ。大学へ現役進学後数ヶ月で通信キャリアの営業代理店を経験。営業商材をもとに100名規模の学生団体を構築。個人事業主として2018年〜2020年2月まで活動したのち、2020年4月に広告営業事業を営む株式会社TOYを創業。同時期にITの可能性を感じプログラミングを始め、現在はITエンジニアとして活動中。2021年にLeograph株式会社に参画し、AI研究開発やWebアプリ開発などを手掛ける。 「Don't repeat yourself（重複作業をなくそう）」「Garbage in, Garbage out（無意味なデータは、無意味な結果をもたらす）」をモットーにエンジニア業務をこなす。
【得意領域】
業務効率化AIモデル開発
事業課題、戦略工程からシステム開発
Webマーケティング戦略からSaaS開発