問い合わせメール

1.「問い合せメール」がエラーになる

 問い合わせメールの送信部分

	<div class="col span-6">
		<div class="contact-box">
    <a href="mailto:●●●●●●@gmail.com?subject=問い合わせ">
    <img src="img/mail.png" alt="Eメール"></img></a>
    		<p>メール作成</p>
		</div>
    </div>

 エラー文言
   「このフォームは安全でないため、自動入力をオフにしました」を表示

 エラーの理由
   ブラウザは「外部アプリへのデータ引渡し」と見なしている
     ブラウザが判断し、非推奨としてエラーにしている

2.非推奨になる他の理由

 mailtoが非推奨になる一般的な理由
   ユーザ側でメールソフトが設定されていない場合がある
     メールソフトが起動しなくて、問合せメールが届かない

   文字化けを起こす可能性がある
     様々な環境への配慮が必要となる

   迷惑メールの標的になる
     メールアドレスが悪用される

   ユーザビリティに課題がある
     慣れないと使いにくい

3.webフォームへの書き換え

 Webフォームの設置について
   ユーザーの声や情報を取得する窓口として有効な方法
     Webホームにして「問合せ」内容をサーバーに送る
     サーバー側でフォーム内容を受けてから
     mailtoを使ってメール送信を行う
       ※ブラウザは感知無くなり、エラーにはならない
   
 メリットについて
   メールアドレス情報の取得が可能
     「受付を完了しました」のような定型メールお自動返信が可能

   問い合わせ内容の定型化
     フリーな状態で記述された文章ではなく、ある程度定型化できる

   メールソフトの起動より手軽
     ソフトが起動され入力に取り掛かるより、気軽に作業に入れる

4.対応策

 問い合わせ内容をホストへ送信する部分

<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>お問い合わせフォーム</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color: #f4f4f9;
        }
        .container {
            max-width: 600px;
            margin: auto;
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"],
        input[type="email"],
        textarea {
            width: 100%;
            padding: 10px;
            margin-bottom: 20px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box; /* paddingをwidthに含める */
        }
        textarea {
            resize: vertical;
            height: 150px;
        }
        button {
            background-color: #5cb85c;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
        }
        button:hover {
            background-color: #4cae4c;
        }
    </style>
</head>
<body>

<div class="container">
    <h2>お問い合わせフォーム</h2>

<form action="receive.php" method="POST">

    <label for="name">お名前 (任意)</label>
    <input type="text" id="name" name="名前" autocomplete="name">
    
    <label for="email">メールアドレス (必須)</label>
    <input type="email" id="email" name="メールアドレス" required autocomplete="email">

    <label for="subject">件名</label>
    <input type="text" id="subject" name="件名">

    <label for="message">お問い合わせ内容 (必須)</label>
    <textarea id="message" name="お問い合わせ内容" required></textarea>

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

</form>
</div>

</body>
</html>


 問合せ内容を受信し、同じ内容をメール返信する

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta http-equiv="Content-Style-Type" content="text/css">
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 17.0.15.0 for Windows">
<title></title>
<body>

<a name="top"></a>

<?php

// エラー報告を有効にする(開発時のみ)
// ini_set('display_errors', 1);
// error_reporting(E_ALL);

// --- 1. 定義(メールの送信先など) ---
//   ここをあなたのメールアドレスに変更してください
$to_email = "●●●●●●@gmail.com"; 
$subject_prefix = "【お問い合わせフォーム】"; // 件名に付ける接頭辞
$from_email = "sarnath01@gmail.com"; // 送信元アドレス(サーバーのものを使うのが一般的)

// フォームが POST メソッドで送信されたか確認
if ($_SERVER["REQUEST_METHOD"] == "POST") {

    // --- 2. フォームデータの取得とサニタイズ ---
    // $_POST変数からデータを取得し、安全のために特殊文字をエスケープします
    $name = isset($_POST['名前']) ? htmlspecialchars($_POST['名前'], ENT_QUOTES, 'UTF-8') : '';
    $email = isset($_POST['メールアドレス']) ? htmlspecialchars($_POST['メールアドレス'], ENT_QUOTES, 'UTF-8') : '';
    $subject = isset($_POST['件名']) ? htmlspecialchars($_POST['件名'], ENT_QUOTES, 'UTF-8') : '';
    $message_content = isset($_POST['お問い合わせ内容']) ? htmlspecialchars($_POST['お問い合わせ内容'], ENT_QUOTES, 'UTF-8') : '';

    // --- 3. メールの件名と本文を作成 ---
    $mail_subject = $subject_prefix . $subject;

    $mail_body = "【お問い合わせがありました】\n\n";
    $mail_body .= "--------------------------------------\n";
    $mail_body .= "お名前: " . $name . "\n";
    $mail_body .= "メールアドレス: " . $email . "\n";
    $mail_body .= "件名: " . $subject . "\n";
    $mail_body .= "--------------------------------------\n";
    $mail_body .= "お問い合わせ内容:\n" . $message_content . "\n";
    $mail_body .= "--------------------------------------\n";
    
    // --- 4. メールのヘッダー設定 ---
    $headers = "From: " . $from_email . "\r\n";
    // 差出人の名前としてユーザーのメールアドレスを設定 (オプション)
    $headers .= "Reply-To: " . $email . "\r\n";
    // 日本語のメールが文字化けしないように設定
    $headers .= "Content-Type: text/plain; charset=UTF-8\r\n";

    // --- 5. メール送信実行 ---
    // mail() 関数は、成功すれば TRUE、失敗すれば FALSE を返します
    if (mail($to_email, $mail_subject, $mail_body, $headers)) {
        // 送信成功時の処理
        echo "<h2>? お問い合わせを送信しました。</h2>";
        echo "<p>迅速に対応させていただきます。</p>";
        // 別の「送信完了」ページにリダイレクトすることも可能です
        // header("Location: thank_you.html");
        // exit;

    } else {
        // 送信失敗時の処理
        echo "<h2>? 送信エラー</h2>";
        echo "<p>メールの送信に失敗しました。時間をおいて再度お試しください。</p>";
    }

} else {
    // POST以外でアクセスされた場合の処理
    echo "<h2>アクセスエラー</h2>";
    echo "<p>このページはフォームからのみアクセス可能です。</p>";
}

?>
</body>

5.付録

 参考程度に考えると
   非推奨だが一時的な対応として
     フォーム送信に「autocomplete=”on”」を追加し
     ブラウザの自動入力チエックを回避する・・・非推奨

   より強力なライブラリーやSMTPサーバー経由の送信方法がある
     「PHPMailer」の使用
       標準のmail()関数よりも柔軟で高機能であり、
       特にセキュアなメール送信が求められる場合に利用されている