質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

87.61%

メールフォームを作成したものの、メールの送信ができない

受付中

回答 1

投稿 ・編集

  • 評価
  • クリップ 1
  • VIEW 931

score 10

初心者です。
現在 AWS Cloud9 で問い合わせフォームを作っているのですが、
確認画面で送信ボタンを押しても下のようなメッセージが表示され、
メールが送信できないのと、最後に表示したい【送信が完了しました!】というメッセージが表示されません。
何が間違っているのか教えていただきたいです。。
よろしくお願いします。

![イメージ説明](efb8bfaf8fdcf0db6aed3bcb8796a3ae.png)

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>お問い合わせ</title>
    <meta name="description" content="ポートフォリオト">
    <meta name="keywords" content="ポートフォリオ,webデザイン">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link href="css/reset.css" rel="stylesheet" type="text/css">
    <link href="css/common.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="js/jquery.js"></script>
    <style type="text/css" media="screen">

    body {
        margin: 0;
         padding: 100px 0 100px 0;
        background-image: url(TSURU170321-85mm-155_TP_V4.jpg);
        background-size: cover;
         background-repeat: no-repeat;
}


    .profBox{
        border-radius: 10px;
          background-color: rgba(255, 255, 255, 0.3);
        border:1px solid #ededed;
        padding:25px;
        width:94%;
        max-width:400px;
        margin-left:auto;
        margin-right:auto;
        margin-top:50px;
        margin-bottom:50px;
        box-sizing: border-box;
    }

    .profBox h1{
        text-align:center;
        padding:15px;
        margin-bottom:20px;
        margin-top:0px;
        font-size:1.1em;
    }

    .profBox dl dt{
        border-bottom:1px solid #ededed;
        padding-bottom:10px;
        margin-bottom:15px;

    }

    .profBox dl dd{
        margin-bottom:25px;    
        margin-left:0px;
    }

    .inputText{
        width:100%;
        padding:10px!important;
        font-size:1.1em;
        box-sizing: border-box;
    }

    .select_form {
        width: 100%;
        text-align: center;
    }

    .select_form select {
        font-size:1.1em;
        width: 100%;
        padding-right: 1em;
        cursor: pointer;
        border: none;
        background:#fff;
        box-shadow: none;
        -webkit-appearance: none;
        appearance: none;
    }

    .select_form.select_form_inner {
        position: relative;
        border: 1px solid #c0c0c0;
        border-radius: 2px;
        background: #ffffff;
    }
    .select_form.select_form_inner:before {
        content: "";
        display:block;
        position: absolute;
        top: 0.8em;
        right: 0.9em;
        width:10px;
        height:10px;
        border-left: 1px solid #c0c0c0;
        border-bottom: 1px solid #c0c0c0;
        pointer-events: none;
        transform: rotate(-45deg);
        margin-top:-3px;
    }
    .select_form.select_form_inner select {
        padding: 8px 20px 8px 8px;
        color: #c0c0c0;
    }

    .textboxdata{
        border: 1px solid #c0c0c0;
        width:100%;
        height:150px;
        padding:15px;
        font-size:1.1em;
        box-sizing: border-box;
    }

    .btnStyle1{
        background:white;
        color:gray;
        width:250px;
        display:block;
        margin-left:auto;
        margin-right:auto;
        font-size:1em;
        padding:15px;
         border:2px solid gray;
        border-radius: 5px;
    }
    .erroebox{
        color:#d91313;
        padding-top:10px;
    }
    .delatearea{
        position: absolute;
        left: -9999px;
    }
    .mgb10px{
        margin-bottom:10px;
    }
    .missmailbox{
        color:red;
        padding-top:3px;
        padding-left:5px;
    }
    .missnamebox{
        color:red;
        padding-top:3px;
        padding-left:5px;
    }
    </style>
</head>
<body>

    <div class="profBox" id="formarea">

        <h1>お問い合わせ</h1>

        <dl>
            <dt>メールアドレス※</dt>
            <dd>
                <div>
                    <input type="text" name="mailarea"  placeholder="xxx@mail.com" class="inputText mailarea" />
                    <div class="mailareaConfirmation"></div>
                    <div class="missmailbox"></div>
                </div>
            </dd>
        </dl>
        <dl>
            <dt>お名前※</dt>
            <dd>
                <div>
                    <input type="text" name="namedata"  placeholder="例) 佐々木 太郎" class="inputText namearea" />
                    <div class="namedataConfirmation"></div>
                    <div class="missnamebox"></div>
                </div>
            </dd>
        </dl>
        <dl>
            <dt>備考</dt>
            <dd>
                <div>
                    <textarea name="textboxdata" class="textboxdata textboxarea"></textarea>
                    <div class="textboxdataConfirmation"></div>
                </div>
            </dd>
        </dl>


        <div class="makesurebox">
            <button class="btnStyle1 submitarea">確認</button>
        </div>    


        <div class="delatearea backandsendbox">
            <button class="btnStyle1 backBtnArea mgb10px">戻る</button>
            <button class="btnStyle1 sendBtnArea">送信</button>
        </div>

    </div>


    <script>

        let mailmiss = "true";
        let namemiss = "true";

        let mailarea = "";
        let namearea = "";
        let textboxarea = "";


        $(".submitarea").click(function(){


            $(".missmailbox").text("");
            $(".missnamebox").text("");

            mailmiss = "true";
            namemiss = "true";


            mailarea = $("input[name='mailarea']").val();
            namearea = $("input[name='namedata']").val();
            textboxarea = $("textarea[name='textboxdata']").val();

            if(!mailarea){

                $(".missmailbox").text("メールアドレスが入力されていません。");    
            }else if(mailarea.match(/.+@.+\..+/)==null){

                $(".missmailbox").text("メールアドレスの形式が間違っています。");
            }else{

                mailmiss = "false";
            };

            if(!namearea){

                $(".missnamebox").text("お名前が入力されていません。");    
            }else{

                namemiss = "false";
            };


            if(mailmiss == "false" && namemiss == "false"){


                $(".mailareaConfirmation").text(mailarea);
                $(".namedataConfirmation").text(namearea);
                $(".textboxdataConfirmation").text(textboxarea);    

                $(".mailarea").addClass("delatearea");
                $(".namearea").addClass("delatearea");
                $(".textboxdata").addClass("delatearea");
                $(".makesurebox").addClass("delatearea");

                $(".backandsendbox").removeClass("delatearea");

            };

        });

        $(".backBtnArea").click(function(){


            $(".mailareaConfirmation").text("");
            $(".namedataConfirmation").text("");
            $(".textboxdataConfirmation").text("");

            $(".mailarea").removeClass("delatearea");
            $(".namearea").removeClass("delatearea");
            $(".textboxdata").removeClass("delatearea");
            $(".makesurebox").removeClass("delatearea");

            $(".backandsendbox").addClass("delatearea");

        });


        $(".sendBtnArea").click(function(){


            $.ajax({
                type: 'POST',
                dataType:'json',
                url:'mail.php',
                data:{

                    mailarea:mailarea,
                    namearea:namearea,
                    textboxarea:textboxarea,
                },
                success:function(data) {

                    alert(data)

                    location.href = "./";
                },
                error:function(XMLHttpRequest, textStatus, errorThrown) {

                    alert(errorThrown);
                }
            });

        });

    </script>





</body>
</html>
<?php

    $mailarea = htmlspecialchars($_POST['mailarea'], ENT_QUOTES);
    $namearea = htmlspecialchars($_POST['namearea'], ENT_QUOTES);
    $textboxarea = htmlspecialchars($_POST['textboxarea'], ENT_QUOTES);


    header("Content-Type:text/html; charset=UTF-8");
    mb_language("japanese");
    mb_internal_encoding("utf-8");

    $mail="自分のメールアドレス";

    $sub1="[自動返信] お問合せが完了しました";

    $mail_to = $mailarea;

    $messegeall .= "お問合せありがとうございます。\n";
    $messegeall .= "今後とも、何卒、よろしくお願いいたします。\n";
    $messegeall .= "\n";
    $messegeall .= "─登録内容の確認─────────────────\n";
    $messegeall .= "\n";
    $messegeall .= "お名前:".$namearea."\n";
    $messegeall .= "メールアドレス:".$mailarea."\n";
    $messegeall .= "テキスト:\n";
    $messegeall .= $textboxarea."\n";
    $messegeall .= "\n";
    $messegeall .= "─────────────────────────\n";
    $messegeall .= "\n";
    $messegeall .= "============================================\n";
    $messegeall .= "このメールは自動送信です。\n";
    $messegeall .= "お心当たりのない方は、お手数をおかけいたしますが、\n";
    $messegeall .= "下記メールアドレスまでご連絡ください。\n";
    $messegeall .= "============================================\n";
    $messegeall .= "\n";
    $messegeall .= "━━━━━━━━━━━━━━━━━━━━━━━━━━\n";
    $messegeall .= " name\n";
    $messegeall .= " mail\n";
    $messegeall .= "━━━━━━━━━━━━━━━━━━━━━━━━━━\n";


    $success1=mb_send_mail($mail_to,$sub1,$messegeall,"From:".$mail);
    $success2=mb_send_mail($mail,$sub1,$messegeall,"From:".$mail_to);


    header('Content-type: application/json');
    echo json_encode( "送信が完了しました!" );
?>
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

+3

input要素で指定しているnameと、POST受診時のものが、合っていません。
jQueryで揉んでいる箇所を見ていませんでした。一旦撤回します。


$(".submitarea").click(function(){
の内側で定義している変数が、ここを抜けると揮発してなくなってしまうために、
$(".sendBtnArea").click(function(){のブロック内では未定義となっていると思われます。
$(".submitarea").click(function(){のブロックの外側で変数を宣言すれば良いかと。
コレも違う。撤回します。


jsonにして返答を送信する場面で、

    header('Content-type: application/json');
    echo json_encode( "送信が完了しました!" );


は乱暴なんじゃないかな。
例えば返答するデータを配列にでも詰めてからjson_encode()して、
受け取るjs側で配列からキーを指定して結果を受け取ればよいかと。

PHPでJSONを返すだけのAPIを実装する - Qiita

単発データであっても、array()に詰めてから返すと良さげ。

    header('Content-type: application/json');
    echo json_encode([ "result" => "送信が完了しました!" ]);
                success:function(data) {

                    alert(data['result']);

                    location.href = "./";
                },


とか。

それと、直接の原因ではないけど、

    $mailarea = htmlspecialchars($_POST['mailarea'], ENT_QUOTES);
    $namearea = htmlspecialchars($_POST['namearea'], ENT_QUOTES);
    $textboxarea = htmlspecialchars($_POST['textboxarea'], ENT_QUOTES);


htmlspecialchars()はweb表示用に文字化けが生じないように加工する関数なので、
メール送信やデータベース保存用には使うべきではないです。

「何故htmlspecialcharsを通すのか?」を一言でどうぞ - Qiita
PHP で h() を書くなら一緒に echo しよう。 - こせきの技術日記

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2019/03/19 22:50

    色々教えて頂き、ありがとうございました!!!よく調べてみたら、AWS Cloud9ではsendmailの機能が付いていないのではないかということでした。。レンタルサーバーで実行したら、無事に実行されました!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 87.61%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る