ありがとうございます！仕様がとても丁寧でわかりやすいので、すぐに取りかかれます。以下に、`form.html` と `email.php` をそれぞれご用意しました。

---

### 📄 form.html

```html
<!-- フォームの切り出し(ここから) -->
<div style="max-width:600px;margin:auto;font-family:sans-serif;">
  <style>
    .form-box {
      border: 2px solid #ccc;
      padding: 20px;
      border-radius: 8px;
      background: #fdfdfd;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
    }
    .form-box h2 {
      text-align: center;
      color: #333;
    }
    .form-box label {
      display: block;
      margin-top: 10px;
      font-weight: bold;
      color: #555;
    }
    .form-box input[type="text"], .form-box input[type="email"] {
      width: 100%;
      padding: 8px;
      margin-top: 5px;
      border: 1px solid #aaa;
      border-radius: 4px;
    }
    .form-box .gender {
      margin-top: 10px;
    }
    .form-box .gender input {
      margin-right: 5px;
    }
    .form-box button {
      margin-top: 15px;
      padding: 10px 20px;
      background-color: #3b7ddd;
      color: white;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      font-weight: bold;
    }
    .dialog, .success-box {
      margin-top: 20px;
      padding: 15px;
      border-radius: 5px;
      background-color: #fff3cd;
      color: #856404;
      border: 1px solid #ffeeba;
      display: none;
    }
    .dialog button {
      display: block;
      margin-top: 10px;
      background: #3b7ddd;
      color: white;
      border: none;
      padding: 5px 10px;
      border-radius: 4px;
    }
    @media (max-width: 600px) {
      .form-box {
        padding: 10px;
      }
    }
  </style>

  <div class="form-box" id="contact-form">
    <h2>お問い合わせフォーム</h2>
    <label for="name">名前（必須）</label>
    <input type="text" id="name" maxlength="50" required>

    <label for="email">Eメール（必須）</label>
    <input type="email" id="email" maxlength="200" required>

    <div class="gender">
      <label>性別（必須）</label>
      <label><input type="radio" name="gender" value="男"> 男</label>
      <label><input type="radio" name="gender" value="女"> 女</label>
    </div>

    <button onclick="sendForm()">送信する</button>
  </div>

  <div class="success-box" id="success-message">メールが送信されました。</div>

  <div class="dialog" id="error-dialog">
    <div id="error-text">エラーメッセージ</div>
    <button onclick="document.getElementById('error-dialog').style.display='none'">OK</button>
  </div>

  <script>
    function sendForm() {
      const name = document.getElementById('name').value.trim();
      const email = document.getElementById('email').value.trim();
      const genderElems = document.querySelectorAll('input[name="gender"]:checked');
      const gender = genderElems.length > 0 ? genderElems[0].value : "";

      if (!name || !email || !gender) {
        showError("すべての項目を入力してください。");
        return;
      }

      const data = { name, email, gender };
      const xhr = new XMLHttpRequest();
      xhr.open("POST", "email.php", true);
      xhr.setRequestHeader("Content-Type", "application/json;charset=UTF-8");
      xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
          if (xhr.status === 200) {
            if (xhr.responseText.trim() === "OK") {
              document.getElementById('contact-form').remove();
              document.getElementById('success-message').style.display = "block";
            } else {
              showError(xhr.responseText.trim());
            }
          } else {
            showError("通信に失敗しました。");
          }
        }
      };
      xhr.send(JSON.stringify(data));
    }

    function showError(msg) {
      document.getElementById('error-text').innerText = msg;
      document.getElementById('error-dialog').style.display = "block";
    }
  </script>
</div>
<!-- フォームの切り出し(ここまで) -->
```

---

### 📬 email.php

```php
<?php
// 設定項目
$recipient_email = "example@example.com"; // メールの受信者のEメールアドレス
$sender_name = "フォーム送信者"; // メール送信者として表示される名前
$subject = "フォームからのメッセージ"; // メールの件名

// エラーメッセージ一覧（編集しやすいようにファイル上部に記載）
$errors = [
  "MISSING_DATA" => "必要なデーターが不足しています。",
  "EMAIL_FAIL" => "メール送信に失敗しました。",
  "INVALID_JSON" => "無効なデーター形式です。"
];

// メール送信処理
$contentType = $_SERVER["CONTENT_TYPE"] ?? '';
if (strpos($contentType, "application/json") === false) {
  echo $errors["INVALID_JSON"];
  exit;
}

$input = file_get_contents("php://input");
$data = json_decode($input, true);

if (!isset($data["name"], $data["email"], $data["gender"])) {
  echo $errors["MISSING_DATA"];
  exit;
}

// メール本文を組み立てる
$body = "名前: " . $data["name"] . "\n";
$body .= "Eメール: " . $data["email"] . "\n";
$body .= "性別: " . $data["gender"] . "\n";

// ヘッダー設定
$headers = [
  "MIME-Version: 1.0",
  "Content-type: text/plain; charset=UTF-8",
  "From: {$sender_name} <{$recipient_email}>"
];

// メール送信
if (mail($recipient_email, $subject, $body, implode("\r\n", $headers))) {
  echo "OK";
} else {
  echo $errors["EMAIL_FAIL"];
}
?>
```

---

✉️ ご希望に沿ってスタイルや構造をまとめましたが、さらに細かい調整や機能追加などありましたら遠慮なくどうぞ！たとえば、送信後にリダイレクトしたり、CSSテーマを切り替えるようにしたり、PHPでバリデーションを強化するのも可能です。