ElementorでContact Form 7が動かない──連携で詰まりやすいポイントと確認順
ElementorでContact Form 7（CF7）のフォームを埋め込んだのに、送信できない、フォームが表示されない、送信後にメールが届かない──このトラブルは、初めてElementorとCF7を組み合わせる制作者がほぼ必ず一度は踏みます。
原因は1つではなく、「どの症状か」によって確認箇所が変わります。この記事では、症状別に原因→確認→対処を整理します。
まず：症状を3パターンに分類する
| 症状 | 疑われる原因 |
|---|---|
| フォーム自体が表示されない | Elementorのウィジェット設定・CF7のフォームIDが未設定または誤り |
| 送信ボタンが押せない・反応しない | JavaScriptエラー・プラグイン競合 |
| 送信できるがメールが届かない | メール設定・SPF/DKIM・迷惑メール振り分け |
まずどの症状かを確認した上で、対応する手順に進んでください。
症状A：フォームが表示されない
確認1：CF7のフォームIDが正しく設定されているか
CF7のフォームは保存後にショートコードが発行されます。ウィジェットまたはショートコードに正しいフォームIDが設定されているか確認してください。
「お問い合わせ → フォーム一覧」で対象フォームのショートコード（[contact-form-7 id="xxx"] の xxx 部分）を確認し、Elementorのウィジェット設定またはショートコードウィジェットに貼り付けているIDと一致しているか照合します。
確認2：ElementorのCF7ウィジェットでフォームが選択されているか
Elementorの編集画面でCF7ウィジェットを配置後、左側パネルの「フォームを選択」ドロップダウンで対象フォームが選ばれているか確認します。新しく作ったフォームがドロップダウンに表示されない場合は、Elementorのエディタを一度閉じ、WordPressダッシュボードに戻ってから再度編集画面を開くと反映されることがあります。それでも表示されない場合はElementorのキャッシュクリア（Elementorメニュー → ツール → 全データを再生成）も試してください。
確認3：Elementor ProなしでCF7ウィジェットを使おうとしていないか
CF7ウィジェット（Elementorの公式ウィジェット）はElementor Proの機能です。無料版のElementorではCF7専用ウィジェットは使えません。
無料版のElementorでCF7を表示したい場合は、ショートコード（[contact-form-7 id="xxx"]）をElementorの「ショートコード」ウィジェットに貼り付ける方法を使います。この方法はフォームの表示には問題ありませんが、Elementor Proのスタイリング機能は使えません。
症状B：送信ボタンが押せない・反応しない
確認1：JavaScriptエラーが発生していないか
ブラウザの開発者ツール（F12）を開き、「Console」タブでエラーが出ていないか確認します。赤いエラーメッセージがある場合、その内容をコピーして調査します。
よくあるエラーの原因：他のプラグインがjQueryと競合しているケースです。
確認2：他のプラグインを一時的に無効化する
プラグイン競合が疑われる場合、CF7とElementor以外のプラグインを一時的にすべて無効化して症状が改善するか確認します。改善した場合は1つずつ有効化していき、原因プラグインを特定します。
競合が起きやすいプラグインの例：
- キャッシュ系プラグイン（W3 Total Cache・WP Super Cacheなど）
- セキュリティ系プラグイン（Wordfence・All In One WP Securityなど）
- ページ最適化系プラグイン（Autoptimize・Asset CleanUpなど）
確認3：reCAPTCHAの設定が正しいか
CF7にGoogle reCAPTCHAを設定している場合、APIキーのドメイン設定が間違っていると送信がブロックされます。
確認手順：
- Google reCAPTCHAの管理画面（https://www.google.com/recaptcha/admin）でサイトキーに登録されているドメインを確認する
- 本番ドメインとローカル（localhost）の両方を登録しているか確認する
- reCAPTCHA v2とv3を混在させていないか確認する（CF7の設定に合わせる）
reCAPTCHAをいったん無効化して送信できるか確認することで、reCAPTCHAが原因かどうかを切り分けられます。
症状C：送信できるがメールが届かない
制作現場でよく見かける症状の一つが、送信完了してもメールが届かないケースです。「送信完了」と表示されても、メールが届いていないケースは複数の原因が考えられます。
確認1：迷惑メールフォルダを確認する
まず最初に確認すること。GoogleのGmailやMicrosoft Outlookは自動で迷惑メールに振り分けるケースがあります。意外と多くのケースがここで解決するため、まず最初に確認してください。
確認2：CF7の送信メールアドレス設定を確認する
「お問い合わせ → フォーム → メール」タブで以下を確認します。
- 「送信先」がサイト管理者のメールアドレスになっているか
- 「送信元」のアドレスがWordPressに設定されているメールアドレスと一致しているか
- 「From」の設定：
wordpress@yourdomain.comなど、サイトのドメインと一致したアドレスにする
Gmailアドレスを「From」に設定すると、ドメイン認証（SPF/DMARC）の設定によっては迷惑メール判定や不達が起きることがあります。確実な方法は、サイトのドメインに合わせたメールアドレスをFromに設定し、SMTPプラグイン経由で送信することです。
確認3：SMTPプラグインを導入する
WordPress標準のメール送信（PHPmail）はサーバーによってはブロックされることがあります。WP Mail SMTP・FluentSMTPなどのSMTPプラグインを導入し、外部のSMTPサーバー（GmailのSMTP・SendGridなど）経由で送信する設定に切り替えると、到達率が大幅に改善します。
WP Mail SMTPには「テスト送信」機能があるため、設定後すぐに動作確認できます。
確認4：CF7の「メール(2)」が有効になっていないか
CF7には「メール(2)」という自動返信設定があります。誤って有効化していると、意図しないタイミングで送信が発生したり、メール設定の混乱が起きることがあります。不要なら無効化します。
確認順チェックリスト
| 症状 | 確認項目 | 完了 |
|---|---|---|
| フォームが表示されない | CF7のフォームIDが正しく設定されているか | □ |
| フォームが表示されない | ウィジェットでフォームが選択されているか | □ |
| フォームが表示されない | Elementor Pro不要かショートコード方式か確認 | □ |
| 送信ボタンが反応しない | コンソールにJSエラーがあるか | □ |
| 送信ボタンが反応しない | 他プラグインを無効化して切り分けた | □ |
| 送信ボタンが反応しない | reCAPTCHAのAPIキー・ドメイン設定を確認 | □ |
| メールが届かない | 迷惑メールフォルダを確認した | □ |
| メールが届かない | From/送信先のメールアドレス設定を確認 | □ |
| メールが届かない | SMTPプラグインでテスト送信した | □ |
まとめ
ElementorとCF7の連携トラブルは、原因が1つとは限りません。「表示されない」「動かない」「届かない」の3症状ごとに確認箇所が異なるため、症状を先に特定してから順番に切り分けるのが最速の解決方法です。
それでも解決しない症状がある場合、TOFUラボには同じような連携トラブルを経験した制作者が集まっており、具体的な状況を話しながら切り分けできる環境があります。