エラー備忘録 for Wordpress

実際のエラーと解決方法を記録

「Contact Form 7」の導入からCSSカスタマイズまで徹底解説

「Contact Form 7」の導入からCSSカスタマイズまで徹底解説のアイキャッチ画像

WordPressサイトに問い合わせフォームを設置したいけれど、どのプラグインを選べばいいか分からない…そんな悩みはありませんか?

本記事では、世界中で最も使われているフォームプラグイン「Contact Form 7」の使い方を、初心者の方でも迷わず設定できるよう、画像付きで丁寧に解説します。

この記事でわかること

✅ Contact Form 7のインストールから公開までの手順
✅ 実際に使えるフォームの作成方法（コード例付き）
✅ CSSを使ったデザインのカスタマイズ方法
✅ メールが届かないときの対処法
✅ スパム対策の具体的な設定方法

設置所要時間: 約15〜30分

Contact Form 7とは?選ぶべき理由

Contact Form 7は、WordPress公式ディレクトリで1000万以上のサイトが利用している無料のお問い合わせフォームプラグインです。

メリット

  • 完全無料で使える（寄付は任意）
  • 軽量でサイトの速度に影響しにくい
  • 自由度が高いカスタマイズが可能
  • 世界中で使われているため、情報が豊富

デメリット（知っておくべきこと）

  • デフォルトでは確認画面がない（送信ボタンを押すと即送信）
  • 送信内容がWordPress内に保存されない（メールのみで管理）
  • デザインを整えるにはCSSの知識が必要
  • スパム対策は別途設定が必要

こんな人におすすめ:
シンプルな問い合わせフォームを無料で作りたい方、デザインを自分でカスタマイズしたい方

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

まずはプラグインを導入しましょう。

手順

  1. WordPress管理画面の**「プラグイン」＞「新規追加」**をクリック
  2. 検索窓に「contact form 7」と入力
  3. **「Contact Form 7」を見つけて「今すぐインストール」**をクリック
  4. インストール完了後、**「有効化」**ボタンをクリック

自動更新を有効にしておこう

プラグインページで「自動更新を有効化」をクリックしておくと、常に最新の状態で利用でき、セキュリティ面でも安心です。

✅ 確認ポイント:
有効化すると、管理メニュー左側に**「お問い合わせ」**という項目が追加されます。

2. 便利な拡張プラグインも一緒に検討しよう

Contact Form 7をインストールすると、関連プラグインが紹介されます。すべて入れる必要はありませんが、以下は特におすすめです。

プラグイン名役割おすすめ度
Flamingo送信内容をWordPress内に保存（バックアップ用）★★★★★
Brevo（旧Sendinblue）メールマーケティング・リスト構築用★★☆☆☆

Flamingoは必須レベル!

Contact Form 7はデフォルトでは送信内容を保存しないため、メールが届かなかった場合に確認する手段がありません。

Flamingoを入れておけば、WordPress管理画面で過去の送信内容を確認できるので、必ず入れておきましょう。

3. フォームの編集と設置方法

デフォルトで「コンタクトフォーム1」が作成されているので、これを編集して使いましょう 。

編集タブの使い分け

管理画面の「お問い合わせ」＞「コンタクトフォーム」から編集画面に入ると、以下のタブがあります。

📝 フォームタブ

  • 何を入力してもらうかを決める場所
  • 名前、メールアドレス、題名、本文などの項目を配置
  • ここではデザインではなく、項目の配置のみを行います

📧 メールタブ

  • フォーム送信時に誰に・どんな内容のメールを送るかを設定
  • 送信先、件名、本文テンプレートを編集できます
  • 管理者宛と**送信者宛（自動返信）**の2種類設定可能

💬 メッセージタブ

  • 送信完了時やエラー時に画面上に表示される文言をカスタマイズ
  • 「メッセージを送信しました」などの表示文を変更できます

4. 実際のフォームコード例（コピペOK）

「フォームタブ」に何を書けばいいか分からない…という方のために、実用的なコード例を紹介します。

基本的なお問い合わせフォーム

<label> お名前（必須）
    [text* your-name autocomplete:name] </label>

<label> メールアドレス（必須）
    [email* your-email autocomplete:email] </label>

<label> 題名
    [text your-subject] </label>

<label> メッセージ本文（必須）
    [textarea* your-message] </label>

[submit "送信する"]

コードの意味

  • [text*]: テキスト入力欄（*は必須項目の印）
  • [email*]: メールアドレス入力欄（形式チェック付き）
  • [textarea*]: 複数行のテキスト入力欄
  • [submit]: 送信ボタン
  • autocomplete:name: ブラウザの自動入力機能に対応

💡 ヒント:
フォームタブの上部にあるボタン（「テキスト」「メールアドレス」など）をクリックすると、設定画面が開いてコードを自動生成できます!

5. メールタブの設定（重要!）

フォームを作っても、メールが正しく届かなければ意味がありません。メールタブで以下を確認しましょう。

基本設定

  • 送信先: [your-email] → 実際のメールアドレスに変更
  • 送信元: wordpress@あなたのドメイン のまま（変更不要）
  • 題名: [your-subject] が含まれていることを確認
  • メッセージ本文: デフォルトのままでOK

自動返信メール（メール(2)タブ）

送信者に「受付完了」メールを送りたい場合は、「メール(2)を使用」にチェックを入れて設定します。

送信先: [your-email]
題名: お問い合わせありがとうございます
メッセージ本文: 
お問い合わせを受け付けました。
内容を確認次第、ご連絡いたします。

お名前: [your-name]
メールアドレス: [your-email]

6. 固定ページへの設置

編集が終わったら、フォームを実際のページに表示させましょう。

手順

  1. フォーム編集画面の上部に表示されるショートコードをコピー
    例: [contact-form-7 id="*****" title="コンタクトフォーム1"]
  2. 「固定ページ」＞「新規追加」で問い合わせページを作成
  3. ショートコードブロックを追加し、コピーしたコードを貼り付け
  4. ページを公開

これで、作成したページにフォームが表示されます。

WEB上で表示されます。

4. CSSで見た目を整える（カスタマイズ）

デフォルトの状態では非常にシンプル（素っ気ない）なので、CSSでスタイルを適用しましょう。

まずは固定ページのデザインだけでもブロックエディタで整え保存します。

ショートコード（コンタクトフォーム）の中身はエディタで変更できないのでCSSを使います。

CSSを追加する場所

以下のいずれかに追加します:

  • 外観 ＞ カスタマイズ ＞ 追加CSS（推奨）
  • ツール＞ テーマファイルエディター ＞ style.css（他にカスタマイズ用のCSSがあるならそちらでも可）

コピペで使えるCSSコード

Contact Form 7のクラス名は .wpcf7 です。

CSS

/* フォーム全体の枠組み */
.wpcf7 {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-sizing: border-box;
}

.wpcf7 * {
  box-sizing: border-box;
}

/* ラベル（項目名）のスタイル */
.wpcf7 label {
  display: block;
  width: 100%;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  margin-bottom: 8px;
  text-align: left;
}

/* 入力欄・テキストエリアのスタイル */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea,
.wpcf7 select {
  border: 1px solid #ddd;
  padding: 12px;
  border-radius: 4px;
  font-size: 16px;
  width: 100%;
  margin-bottom: 20px;
  transition: border-color 0.3s;
}

/* 入力欄にフォーカスしたとき */
.wpcf7 input:focus,
.wpcf7 textarea:focus {
  border-color: #4299e1;
  outline: none;
}

/* 送信ボタンのスタイル */
.wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  padding: 12px 24px;
  background: #4299e1;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.3s ease;
}

.wpcf7 input[type="submit"]:hover {
  background: #3182ce;
}

/* 送信完了・エラーメッセージ */
.wpcf7-response-output {
  margin: 20px 0;
  padding: 12px;
  border-radius: 4px;
  text-align: center;
}

.wpcf7-mail-sent-ok {
  background: #d4edda;
  border: 1px solid #c3e6cb;
  color: #155724;
}

.wpcf7-validation-errors {
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  color: #721c24;
}

このCSSをいれたあとの表示がこうなります。

このCSSを追加すると、プロフェッショナルな見た目のフォームになります。

8. スパム対策は必須！reCAPTCHAの設定方法

Contact Form 7はスパム対策が入っていないため、放置すると大量の迷惑メールが届く可能性があります。

Google reCAPTCHA v3の設定手順

ステップ1: reCAPTCHAのキーを取得

  1. Google reCAPTCHA公式サイトにアクセス
  2. 「reCAPTCHA v3」を選択
  3. ドメイン名を入力（例: yoursite.com）
  4. 利用規約に同意して「送信」
  5. 表示されるサイトキーとシークレットキーをコピー

ステップ2: Contact Form 7に設定

  1. WordPress管理画面の「お問い合わせ」＞「インテグレーション」を開く
  2. 「reCAPTCHA」の「インテグレーションのセットアップ」をクリック
  3. コピーしたサイトキーとシークレットキーを貼り付け
  4. 「変更を保存」をクリック

これで、ユーザーに気づかれることなくスパム対策が機能します。

9. よくあるトラブルと解決方法

❌ メールが届かない

原因1: サーバーのメール送信機能に問題がある

解決策: WP Mail SMTPプラグインを使って、Gmailなどから送信する設定に変更

原因2: 送信先メールアドレスが間違っている

解決策: メールタブの「送信先」を確認

原因3: 迷惑メールフォルダに入っている

解決策: 迷惑メールフォルダを確認し、送信元アドレスを許可リストに追加

❌ 送信ボタンを押しても反応しない

原因: JavaScriptのエラー、または他のプラグインとの競合

解決策:

  1. ブラウザのコンソールでエラーを確認
  2. 他のプラグインを一時的に無効化して原因を特定
  3. テーマを一時的にデフォルトに変更して確認

❌ デザインが崩れる

原因: テーマのCSSと競合している

解決策: ブラウザの検証機能で競合しているCSSを特定し、より詳細なセレクタで上書き

10. 確認画面を追加したい場合

Contact Form 7には確認画面機能がありません。
ユーザーが入力内容を確認してから送信したい場合は、以下の方法があります。

方法1: 専用プラグインを使う

  • Contact Form 7 Multi-Step Forms（ステップ形式のフォーム）
  • Contact Form 7 Confirm（確認画面を追加）

これらのプラグインを追加インストールすることで、確認画面を表示できます。

方法2: 別のフォームプラグインに変更

確認画面が標準装備されているプラグイン:

  • MW WP Form（日本製、確認画面標準搭載）
  • WPForms（有料版で確認画面機能あり）

💡 判断ポイント:
BtoB向けや重要な申し込みフォームの場合は確認画面があった方が親切です。

一方、簡単な問い合わせフォームなら確認画面なしでも問題ありません。

11. 送信内容を保存する方法（Flamingo）

前述の通り、Contact Form 7はデフォルトでは送信内容を保存しません。

Flamingoプラグインをインストールすると:

  • 送信内容が自動的にWordPress内に保存される
  • 管理画面の「Flamingo」＞「受信メッセージ」から確認可能
  • メールが届かなかった場合のバックアップになる

Flamingoの導入方法

  1. プラグイン＞新規追加で「Flamingo」を検索
  2. インストール＞有効化
  3. 以降、自動的に送信内容が保存されます

まとめ: Contact Form 7はこんな人におすすめ

Contact Form 7は、シンプルで自由度の高いフォームプラグインです。

おすすめの人

✅ シンプルな問い合わせフォームを無料で作りたい
✅ デザインを自分でカスタマイズしたい
✅ 軽量なプラグインを使いたい

向いていない人

❌ 確認画面が必須（別プラグインが必要）
❌ CSSを書くのが難しい（他の有料プラグインの方が簡単）
❌ 複雑な条件分岐や計算機能が必要（専門プラグインが必要）

もし「もっと手軽に、高機能なフォームを作りたい」という場合は、以下の選択肢も検討してみてください:

  • Googleフォーム（無料・確認画面あり・埋め込み可能）
  • MW WP Form（日本製・確認画面標準搭載）
  • WPForms（有料・ドラッグ&ドロップで簡単）

サイトの目的と予算に合わせて、最適な方法を選んでください。

Tags

Related Articles

Continue exploring our latest insights