お問合せフォームの作り方5(メールの自動送信方法)

ソースコードの付け足し

inquiry_confirm.phpに
name属性の追加と、任意の項目に少しプログラムを書き足すよ！黄色いマーカーが入っている部分が前回のプログラムに付け足す部分だよ！

inquiry_confirm.php



<?php
session_start();

// 二重送信防止用トークンの発行
$token = uniqid('', true);

//トークンをセッション変数にセット
$_SESSION['token'] = $token;

//ファイルの読み込み
require_once 'function.php';

?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/
css2?family=Kiwi+Maru:wght@300;400;500
&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <section class="inquiry-sectoin">
            <h2>お問い合わせフォーム確認画面</h2>
            <div class="inquiry-sectoin-inner">
                <form action="inquiry_mail.php" method="POST">
                    <div class="inquiry-checks">
                        <p>お問合せ内容</p>
                        <ul>
                            <?php $check = count($_POST['checks']); ?>
                            <?php for ($i = 0; $i < $check; $i++) { ?>
                                <li><?php echo $_POST['checks'][$i] ?></li>
                            <?php } ?>
                        </ul>
                    </div>
                    <div class="inquiry-checks">
                        <p>このサイトを知ったきっかけ</p>
                        <div class="inquiry-checks-normal-txt"><?php echo  $_POST['chance'] ?></div>
                    </div>
                    <div class="inquiry-checks">

                        <ul>
                            <li class="inquiry-checks-text">性別:</li>
                            <li><?php echo $_POST['radios']; ?></li>
                        </ul>
                    </div>
                    <div class="inquiry-texts">
                        <div class="inquiry-text">
                            <label class="inquery-text__item"><span>氏名</span><span class="require">必須</span></label>
                            <div><?php echo $_POST['name']; ?></div>
                        </div>
                        <div class="inquiry-text">
                            <label class="inquery-text__item"><span>メールアドレス</span><span class="require">必須</span></label>
                            <div><?php echo $_POST['email']; ?></div>
                        </div>
                        <div class="inquiry-text">
                            <label class="inquery-text__item"><span>コメント</span><span class="not-require">任意</span></label>
                            <div><?php if ($_POST['comment'] !== "") { ?>
                                    <?php echo nl2br($_POST['comment']); ?>
                                <?php } else { ?>
                                    <?php echo "コメント無し" ?>
                                <?php } ?></div>
                        </div>
                    </div>

                    <?php $check = count($_POST['checks']); ?>
                    <?php for ($i = 0; $i < $check; $i++) { ?>
                        <input type="hidden" name="checks[]" value="<?php echo $_POST['checks'][$i]; ?>">
                    <?php } ?>
                    <input type="hidden" name="chance" value="<?php echo $_POST['chance']; ?>">
                    <input type="hidden" name="radios" value="<?php echo $_POST['radios']; ?>">
                    <input type="hidden" name="name" value="<?php echo $_POST['name']; ?>">
                    <input type="hidden" name="email" value="<?php echo $_POST['email']; ?>">
                    <?php if ($_POST['comment'] !== "") { ?>
                        <input type="hidden" name="comment" value="<?php echo $_POST['comment']; ?>">
                    <?php } else { ?>
                        <input type="hidden" name="comment" value="">
                    <?php } ?>
                    <input type="hidden" name="token" value="<?php echo $token; ?>">
                    <div class="submit-button-flex">
                        <button type="button" onclick="history.back();">戻る</button>
                        <button>送信</button>
                    </div>
                </form>
            </div>
        </section>
    </main>
</body>

</html>

次にファイルを2つ作成してもらうよ！
次に、「C:\xampp\htdocs\お問合せ」の中に mail.htmlとerror.htmlファイルを作成しよう！

mail.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/
css2?family=Kiwi+Maru:wght@300;400;500
&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <section class="inquiry-sectoin">
            <h2>お問い合わせが完了しました！
            </h2>
            <div class="inquiry-sectoin-inner">
                    <div class="submit-button">
                        <button onclick="location.href='index.php'">トップへ戻る</button>
                    </div>
                </form>
            </div>
        </section>
    </main>
</body>

</html>

error.html



<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./CSS/reset.css">
    <link rel="stylesheet" href="./CSS/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/
css2?family=Kiwi+Maru:wght@300;400;500
&display=swap" rel="stylesheet">
    <title>Document</title>
</head>

<body>
    <main>
        <section class="inquiry-sectoin">
            <h2>不正な送信処理が行われました</h2>
            <div class="inquiry-sectoin-inner">
                <div class="submit-button">
                    <button onclick="location.href='index.php'">トップへ戻る</button>
                </div>
                </form>
            </div>
        </section>
    </main>
</body>

</html>

メールを送信する関数

今回は、メールを送信する関数として

mb_send_mail関数

を使用するよ！
関数の使い方をスライドをみて一緒に勉強していこう！

メールを送信するのにmb_send_mail関数を今回は使いけど、
他にmail関数というものが存在しているよ！
mail関数を使わない理由は日本語を使う場合文字化けするからだよ！
詳しい詳細は他の記事で比較して紹介するね！
では、さっそく使い方と特徴を見ていこう！

これでメール関数の使い方については学べたね！
次は、メールの送信のお作法
についてみていくよ！

メールを書く時のお作法

メール送信のプログラムを書く上で知っておいたほうが良いお作法があるから
そのお作法をしっかりと一緒に勉強しておこう！

お作法その1 時間と言語の設定

お作法その2 MINEと迷惑メール防止

これでお作法もしっかり学べたことだし、
実際のプログラムの流れを確認したら、一緒にコーディングして完成に近づけよう！

メール自動送信のプログラムの流れ

メール送信のコーディング

とうとうここまで来たね！
では、早速コーディングをしていくよ！
コーディングの量が結構多いから間違えやミスには気を付けてね１

inquiry_mail.php



<?php
session_start();

// POSTされたトークンを取得
$token = isset($_POST["token"]) ? $_POST["token"] : "";
// セッション変数のトークンを取得
$session_token = isset($_SESSION["token"]) ? $_SESSION["token"] : "";
// セッション変数のトークンを削除
unset($_SESSION["token"]);
// POSTされたトークンとセッション変数のトークンの比較
if ($token != "" && $token == $session_token) {
   //念のためもう一度サニタイズをしておく
    require_once 'function.php';
    
    //管理者のメールアドレスを入力してください。
    $admin_mail = 'メールが受信できるアドレスを書いてね！';
    //記入例
    //$admin_mail = 'test_anpontan@test.com';
    
    $header =  null;//ヘッダー
    $auto_reply_subject = null;//入力者側への件名
    $auto_reply_text = null;//入力者側へのメール本文
    $admin_reply_subject = null;//管理者側への件名
    $admin_reply_text = null;//管理者側へのメール本文
    //日本の時間帯で時間を出力したいので、タイムゾーンを設定
    date_default_timezone_set('Asia/Tokyo');

    //日本語の使用宣言
    mb_language("ja");
    mb_internal_encoding("UTF-8");

    //ヘッダー情報を設定
    $header = "MIME-Version: 1.0\n";
    $header .= "From: お問合せフォーム <".$admin_mail.">"."\n";
    $header .= "Reply-to: お問合せフォーム<".$admin_mail.">"."\n";

    //件名を設定
    $auto_reply_subject = $_POST['name']."様"."お問合せありがとうございます。" . "\n";

    //本文を設定

    $auto_reply_text = "送信日時:" . date("Y-m-d H:i") . "\n";
    $auto_reply_text .= "以下の内容でお問合せを受け付けました。内容をご確認下さい。\n\n";
    $auto_reply_text .= "お問合せ内容\n";
    $check = count($_POST['checks']);
    for ($i = 0; $i < $check; $i++) {
        $auto_reply_text .= "・" . $_POST['checks'][$i] . "\n";
    }
    $auto_reply_text .= "サイトを知ったきっかけ\n";
    $auto_reply_text .= "・" . $_POST['chance']. "\n";
    $auto_reply_text .= "性別\n";
    $auto_reply_text .= "・" . $_POST['radios']. "\n";
    $auto_reply_text .= "氏名:" . $_POST['name'] . "\n";
    $auto_reply_text .= "メールアドレス:" . $_POST['email'] . "\n";
    $auto_reply_text .= "コメント\n";
    if($_POST['comment'] !== ""){
        $auto_reply_text .=$_POST['comment'] . "\n";
    }else{
        $auto_reply_text .= "コメント無し" . "\n";
    }


    //メール送信
    mb_send_mail($_POST['email'], $auto_reply_subject, $auto_reply_text, $header);

    //運営側へ送るメールの件名
    $admin_reply_subject =  $_POST['name'] ."様"."からお問合せいただきました" . "\n";

    $admin_reply_text = "送信日時:" . date("Y-m-d H:i") . "\n";
    $admin_reply_text .= "下記の内容でお問合せがされました。\n\n";
    $admin_reply_text .= "お問合せ内容\n";
    $check = count($_POST['checks']);
    for ($i = 0; $i < $check; $i++) {
        $admin_reply_text .= "・" . $_POST['checks'][$i] . "\n";
    }
    $admin_reply_text .= "サイトを知ったきっかけ\n";
    $admin_reply_text .= "・" . $_POST['chance']. "\n";
    $admin_reply_text .= "性別\n";
    $admin_reply_text .= "・" . $_POST['radios']. "\n";
    $admin_reply_text .= "氏名:" . $_POST['name'] . "\n";
    $admin_reply_text .= "メールアドレス:" . $_POST['email'] . "\n";
    $admin_reply_text .= "コメント\n";
    if($_POST['comment'] !== ""){
        $admin_reply_text .=$_POST['comment'] . "\n";
    }else{
        $admin_reply_text .= "コメント無し" . "\n";
    }

    //運営側へ送るメール
    mb_send_mail($admin_mail, $admin_reply_subject, $admin_reply_text, $header);

    require('mail.html');
} else {
    require('error.html');
}
?>

これでメールを送るプログラムが完成したね！
残りは、動作確認かな！
気を抜かずに頑張ろう！

動作確認

ここまで、本当にお疲れ様です！
実際にちゃんと動くかどうか一緒に確認してみよう！

XAMPPを起動させて、ブラウザーに
http://localhost/お問合せ/index.phpと入力して
各項目を入力して、入力内容を送信しよう！

更新ボタンを押したときに、メールが再度送られないことを
確認しておこう！

次回

次回は、スプレッドシートと
連携させて入力内容の一覧がみれるようにしていくよ！
引き続きよろしくお願いします！