WordPress Contact Form プラグイン: Contact Form 7 (オンラインフォームの追加)

2分で読了
江蘇省
2025-10-19
2025-10-20
6,834
以下のリンクからお買い物をしていただくと、コミッションを差し上げます。.

個人のブログであれ、企業のウェブサイトであれ、eコマース・プラットフォームであれ、訪問者が簡単にメッセージを送れるような「コンタクトフォーム」が必要です(質問、要望の提出、提案に対するフィードバックなど)。コンタクトフォーム7 WordPressのフォームプラグインの中で最も古く(インストールベースは500万以上)、無料で柔軟かつ強力で、様々なフォーム(コンタクトフォーム、登録フォーム、フィードバックフォームなど)を素早く作成することができ、初心者は設定するだけで使用できる。

I. なぜ問い合わせフォームが必要なのですか?Eメール/電話番号だけではだめなのですか?

直通メールボックスや電話番号を設置するのは簡単なように思えるかもしれないが、3つの明確なデメリットがある:

  • 訪問客は面倒くさいメールアドレスをコピーして、メールソフトを開いて送信しなければならない;
  • スパムに弱い公開メールアドレスはボットにクロールされ、多くのスパムを受け取る;
  • 情報の不正訪問者は、重要な情報を見逃し(例えば、商品についての問い合わせの際にニーズを明記していないなど)、非効率的な回答をする可能性がある。

そして、コンタクトフォームはこれらの問題を解決してくれる:

  • 訪問者は、ワンステップでウェブサイト内に直接投稿を記入する;
  • メールアドレスは、スパムの標的にならないようにバックグラウンドで隠されている;
  • 記入が必要なフィールド(例:名前、電話番号、要件のタイプ)は、完全な情報を確保するためにカスタマイズすることができます。

Contact Form 7 のインストールと最初のフォームの作成

ステップ1:プラグインをインストールして有効化する

WordPress Contact Form プラグイン: Contact Form 7 (オンラインフォームの追加) - LikaCloud
  1. バックエンド [Plugin] → [Install Plugin] で “Contact Form 7” を検索;
  2. 今すぐインストール]をクリックし、完了したら[アクティベート]をクリックします。
  3. 有効にすると、左メニューに[連絡先]オプションが表示されます。

ステップ2: デフォルトのお問い合わせフォームを作成する(初心者の方におすすめです。)

Contact Form 7 には一般的なフィールド (名前、Eメール、件名、メッセージの内容) を含む、あらかじめ定義されたコンタクトフォームのテンプレートが用意されています:

WordPress Contact Form プラグイン: Contact Form 7 (オンラインフォームの追加) - LikaCloud
  1. 左側の[連絡先]→[新規追加]をクリックし、フォーム編集画面に入ります;
  2. このプラグインは自動的にフォーム名 (例えば “Contact Form 1”) を生成しますが、これを “Website Contact Form” に変更することもできます (簡単に識別するため);
  3. 下の “Form ”エリアはフォームのコードで(コードを知る必要はなく、デフォルトのままでよい)、デフォルトでは4つのフィールドが含まれています:
    • 名前(テキストボックス);
    • Eメール(確認用のEメールボックス;)
    • Subject(メッセージの件名の概要を示すテキストボックス);
    • メッセージ(複数行のテキストボックス、詳細を記入)。

ステップ3:フォーム送信後の「フィードバック」と「メール受信」の設定“

フォームを送信できるだけでは不十分で、フォームを設定する必要があります。どのメールアドレスにメッセージが送信されるのか?

1.メール受信アドレスの設定(キー!受信できることを確認する)

WordPress Contact Form プラグイン: Contact Form 7 (オンラインフォームの追加) - LikaCloud
  • フォーム編集ページの「メール」エリアまでスクロールダウンしてください;
  • To “入力ボックスを見つけて、いつものEメールアドレスを記入する(例:以下のように)。 contact@你的域名.com);
  • その他のオプションはデフォルトのままです(“From”、“Subject ”などはフォームの内容で自動的に入力されます)。

2. “メッセージ ”プロンプトの設定 (訪問者に投稿の結果を伝える)

WordPress Contact Form プラグイン: Contact Form 7 (オンラインフォームの追加) - LikaCloud
  • メッセージ」エリアまでスクロールして、アラートテキストをカスタマイズしてください:
    • “成功したメッセージを送る”: 例: “メッセージをありがとうございます。;
    • “「バリデーションエラーメッセージ」:例えば「記入が正しいか確認してください(メールボックスのフォーマットなど)」。

ステップ4:フォームを保存し、“ショートコード ”を取得する。”

  1. ページ右上の[保存]をクリックすると、フォームの作成は完了です;
  2. 保存後、ページ上部に「ショートコード」が表示されます(例 [contact-form-7 id="123" title="网站联系表单"]後で使います)。

お問い合わせ」ページにフォームを追加する。

フォームを作成したら、ウェブサイトの「お問い合わせ」ページ(またはその他の任意のページ)に設置し、訪問者に見えるようにする必要があります:

  1. ページ]→[新規追加](または既存の “お問い合わせ ”ページを編集);
  2. エディターで、フォームを表示したい場所にカーソルを置く;
  3. 先ほどコピーしたショートコードを貼り付ける(例 [contact-form-7 id="123" title="网站联系表单"]);
  4. Publish]または[Update]をクリックし、フォームを表示するページにアクセスしてください。

IV. カスタマイズフォーム:フィールドの追加/削除(必要に応じて調整)

デフォルトのフォームが要件を満たしていない場合(例えば、「電話」「会社名」フィールドを追加する必要がある場合)、カスタマイズして変更することができます:

举例:给表单添加 “电话” 字段

WordPress Contact Form プラグイン: Contact Form 7 (オンラインフォームの追加) - LikaCloud
  1. Contact]に移動し、作成したフォームを見つけて[Edit]をクリックします;
  2. フォーム」編集エリアで「メールボックス」フィールドを探し、ツールバーの[ラベルの挿入]→[テキスト]をクリックする;
  3. ポップアップウィンドウで
    • “名前” “tel”(内部識別、小文字の英語)を記入する;
    • “Label”(ラベル) “Phone”(訪問者に表示するテキスト)を記入します;
    • 必須項目」にチェックを入れてください(訪問者が入力しなければならないことを確認してください);
    • タグの挿入]をクリックすると、自動的にコード行が生成されます(例 [text* tel placeholder "请输入您的电话"]);
  4. 保存]をクリックしてページを更新すると、フォームに「電話」フィールドが追加されます。

一般的なフィールドタイプ(オンデマンド)

  • テキストボックス名前、電話番号、会社名などの短いコンテンツに適しています;
  • メールボックスメールボックスに記入するためのもので、書式を自動的に検証する;
  • テキストエリア長いコンテンツ(例:メッセージ、ニーズの説明)を埋めるのに適しています;
  • ドロップダウンメニュー:适合让访客选择选项(如 “咨询类型:产品咨询 / 售后问题 / 合作洽谈”);
  • チェックボックス複数の選択肢にチェックを入れてもかまいません(例:「関心のあるサービス:ウェブサイト制作/SEO最適化/ブランディング」)。

V. 初めての方へよくある質問

  1. フォーム送信後にメールが届かない?これは解決すべき最も一般的な問題である:
    • Mail “設定の ”To “メールボックスが正しいか確認してください(間違って記入しないでください!)。.;
    • メールボックスの「スパム」フォルダをチェックする(フォームメールはスパムと誤認されることがある);
    • それでも受信できない場合は、プラグイン「WP Mail SMTP」(WordPressのメール送信機能を修正する。)
  2. フォームのスタイル(フォント、色、幅など)はどのように変更できますか?Contact Form 7 自身は視覚的なスタイル変更に対応しておらず、シンプルな CSS コードが必要です:
    • 方法1:テーマ設定(通常は[外観]→[カスタマイズ]→[追加CSS])で「カスタムCSS」を探す;方法2:例:入力ボックスの幅を80%にして、コードを追加する:
    .wpcf7 input, .wpcf7 textarea { width: 80%; padding: 10px; margin-bottom: 15px; }
  3. (CSS の書き方がわからない場合は、“Contact Form 7 Style Code” で検索し、既存のものをコピーして修正してください)。
  4. フォーム送信後、自動的にバックエンドに保存できますか?無料版ではサポートされていません。送信されたメッセージはメールでのみ送信されます。バックエンドに保存する必要がある場合 (メールの紛失を防ぐため)、“Flamingo” プラグインをインストールしてください (Contact Form 7 の作者によって開発された、フォームデータの保存に特化したコンパニオンプラグインです)。
  5. ボットによるスパム送信を防ぐには?アンチスパム」機能を有効にする:
    • フォームを編集し、“Forms ”エリアにコード行を追加する。 [recaptcha](Google CAPTCHA);
    • 連絡先]→[統合]に進み、指示に従ってGoogle reCAPTCHAに接続します(無料のAPIキーを登録する必要があります。

まとめ:コンタクトフォームは「コンバージョンへのラストワンマイル」である“

訪問者にとっては、コンタクトフォームは「自分のニーズを表現する最速の方法」であり、ウェブサイト運営者にとっては「潜在顧客を獲得するための重要なチャネル」である。

Contact Form 7 は手動でショートコードを書いたりフィールドを変更したりする必要はありますが、無料で柔軟で安定しており、基本を学べばシンプルなものから複雑なものまで様々なフォームのニーズに応えることができます。覚えておいてほしいこと: フォームは複雑にしすぎず(フィールドが多ければ多いほど訪問者が諦めてしまう可能性が高くなります)、コアとなる情報(名前、連絡先、ニーズ)を保持することで、コミュニケーションの敷居を最低限に下げることができます。

タグ: