ハウツー2025年12月13日

お問い合わせフォームの作り方｜WordPress・HTML両対応ガイド

お問い合わせフォームの作成方法を初心者向けに解説。WordPressプラグイン（Contact Form 7）とHTMLフォームの両方に対応。セキュリティ対策、デザイン、スパム対策も紹介します。

#お問い合わせフォーム#Contact Form 7#WordPress#HTML#スパム対策#reCAPTCHA

お問い合わせフォームの重要性

Webサイトにとって、お問い合わせフォームは顧客との最初の接点です。使いやすく、信頼できるフォームを設置することで、コンバージョン率が大きく向上します。

お問い合わせフォームの役割

見込み客の獲得 - サービスへの興味を持ったユーザーと接点を持てます
顧客サポート - 既存顧客からの問い合わせに対応できます
信頼性の向上 - 連絡手段が明確なサイトは信頼されやすい
24時間受付 - 営業時間外でも問い合わせを受け付けられます

お問い合わせフォームの必須項目

以下の項目は、ほとんどのビジネスで必要になります。

項目名	必須度	備考
お名前	必須	姓名を分けるか、1つの入力欄にするか選べます
メールアドレス	必須	返信用に必要
電話番号	任意	緊急時の連絡用
件名	任意	問い合わせの分類に便利
お問い合わせ内容	必須	テキストエリアで複数行入力可能に
プライバシーポリシー同意	必須	個人情報保護法対応

入力項目を増やしすぎない

項目が多すぎると、ユーザーが途中で離脱します。本当に必要な項目だけに絞りましょう。

理想：3〜5項目
最大：7項目まで

WordPress でのお問い合わせフォーム作成

方法1: Contact Form 7 プラグインを使う

最も人気のあるWordPressフォームプラグインです。無料で高機能、カスタマイズも自由です。

Contact Form 7 のインストール手順

WordPress管理画面にログイン
「プラグイン」→「新規追加」をクリック
検索欄に「Contact Form 7」と入力
「今すぐインストール」→「有効化」をクリック

フォームの作成手順

「お問い合わせ」→「新規追加」をクリック
フォームタイトルを入力（例：「お問い合わせフォーム」）
「フォーム」タブでフォームの項目を設定
「メール」タブで送信先メールアドレスを設定
「保存」をクリック
ショートコードをコピー（例：[contact-form-7 id="123"]）
固定ページや投稿に貼り付け

Contact Form 7 のフォーム例

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

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

<label> 電話番号
    [tel your-tel] </label>

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

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

<label>
    [acceptance acceptance-privacy] プライバシーポリシーに同意する
</label>

[submit "送信"]

方法2: WPForms（初心者向け）

ドラッグ&ドロップで簡単にフォームを作成できるプラグインです。

無料版：基本的なフォーム作成が可能
有料版：決済フォーム、アンケート、条件分岐など高度な機能

方法3: Googleフォームを埋め込む

プラグインを使わず、Googleフォームを埋め込む方法もあります。

メリット

完全無料
回答をスプレッドシートで管理
セキュリティが強固

デメリット

デザインのカスタマイズが限定的
Googleのブランドが表示される

HTMLでのお問い合わせフォーム作成

WordPressを使わない静的サイトでのフォーム作成方法です。

基本的なHTMLフォーム

<form action="send.php" method="POST">
  <div>
    <label for="name">お名前（必須）</label>
    <input type="text" id="name" name="name" required>
  </div>

  <div>
    <label for="email">メールアドレス（必須）</label>
    <input type="email" id="email" name="email" required>
  </div>

  <div>
    <label for="tel">電話番号</label>
    <input type="tel" id="tel" name="tel">
  </div>

  <div>
    <label for="message">お問い合わせ内容（必須）</label>
    <textarea id="message" name="message" rows="5" required></textarea>
  </div>

  <div>
    <label>
      <input type="checkbox" name="privacy" required>
      プライバシーポリシーに同意する
    </label>
  </div>

  <button type="submit">送信</button>
</form>

フォームのCSS例（デザイン）

form {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
}

form div {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

textarea {
  resize: vertical;
}

button[type="submit"] {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 12px 40px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
}

button[type="submit"]:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

PHPでのメール送信処理（send.php）

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    // フォームデータの取得
    $name = htmlspecialchars($_POST['name']);
    $email = htmlspecialchars($_POST['email']);
    $tel = htmlspecialchars($_POST['tel']);
    $message = htmlspecialchars($_POST['message']);

    // メール送信先
    $to = "info@example.com";

    // メール件名
    $subject = "お問い合わせがありました";

    // メール本文
    $body = "お名前: $name\n";
    $body .= "メールアドレス: $email\n";
    $body .= "電話番号: $tel\n";
    $body .= "お問い合わせ内容:\n$message\n";

    // メールヘッダー
    $headers = "From: $email";

    // メール送信
    if (mail($to, $subject, $body, $headers)) {
        echo "お問い合わせありがとうございます。";
    } else {
        echo "送信に失敗しました。";
    }
}
?>

スパム対策

お問い合わせフォームは、スパムの標的になりやすいです。適切な対策を実施しましょう。

スパム対策の方法

reCAPTCHA（リキャプチャ） - Googleの無料スパム対策ツール
Akismet - WordPressのスパムフィルタープラグイン
ハニーポット - 非表示の入力欄を設置し、ボットを検出
送信制限 - 同じIPアドレスからの連続送信を制限

Contact Form 7 に reCAPTCHA を追加する方法

Google reCAPTCHA にサイトを登録（https://www.google.com/recaptcha/）
サイトキーとシークレットキーを取得
Contact Form 7 の「インテグレーション」→「reCAPTCHA」に貼り付け
フォームに自動で reCAPTCHA が追加されます

お問い合わせフォームのUX改善

入力しやすいフォームの設計

入力例（プレースホルダー）を表示 - 「例：山田太郎」
エラーメッセージを分かりやすく - 「メールアドレスの形式が正しくありません」
入力中のリアルタイム検証 - 入力完了時にその場でエラー表示
送信ボタンを目立たせる - 大きく、色を付ける
送信後のサンクスページ - 「送信が完了しました」と明示

モバイル対応

タップしやすいボタンサイズ - 最低44px × 44px
適切な入力タイプ - type="email" でメールキーボード表示
自動ズームを防ぐ - フォントサイズを16px以上に

セキュリティ対策

フォームからの情報漏洩や悪用を防ぐために、以下の対策を実施しましょう。

SSL化（HTTPS） - 通信を暗号化
CSRF対策 - トークンによる正当性確認
XSS対策 - htmlspecialchars() で特殊文字をエスケープ
SQLインジェクション対策 - プリペアドステートメントを使用
ファイルアップロードの制限 - 許可する拡張子を限定

お問い合わせ後のフォロー

フォームを設置して終わりではありません。適切なフォローが重要です。

自動返信メールの設定

Contact Form 7 では「メール(2)」タブで自動返信を設定できます。

件名: お問い合わせありがとうございます

[your-name] 様

お問い合わせいただき、ありがとうございます。
以下の内容で受け付けいたしました。

お名前: [your-name]
メールアドレス: [your-email]
お問い合わせ内容:
[your-message]

2営業日以内にご返信いたしますので、しばらくお待ちください。

────────────────
AsamiWorks
https://asami-works.com
────────────────

問い合わせ管理のコツ

24時間以内に返信 - 遅くとも2営業日以内に
CRMツールで管理 - Googleスプレッドシート、HubSpot、Salesforceなど
定型文を用意 - よくある問い合わせには迅速に対応

まとめ：使いやすいフォームで成果を最大化

お問い合わせフォームは、見込み客との大切な接点です。使いやすく、セキュアで、スパム対策がされたフォームを設置しましょう。

お問い合わせフォームチェックリスト

✅ 必須項目を明確に表示している
✅ 入力例（プレースホルダー）を設定した
✅ スパム対策（reCAPTCHA等）を実施した
✅ SSL化（HTTPS）している
✅ 自動返信メールを設定した
✅ プライバシーポリシーへのリンクがある
✅ モバイルで入力しやすいデザインになっている
✅ 送信後のサンクスページを用意した

AsamiWorksでは、使いやすいお問い合わせフォームを含めたホームページ制作を提供しています。お気軽にご相談ください。

執筆者

AsamiWorks

← ブログ一覧に戻るお問い合わせ