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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

Q&A

1回答

458閲覧

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

natsuho0730

総合スコア10

Cloud9

Cloud9は、クラウドからのプログラミングが可能になるWebサービス。IDEとしての機能が搭載されており、GitHubやHerokuなど他ツールとの連携も可能です。ブラウザ上で動くため、デバイスに関係なく開発環境を準備できます。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

AWS(Amazon Web Services)

Amazon Web Services (AWS)は、仮想空間を機軸とした、クラスター状のコンピュータ・ネットワーク・データベース・ストーレッジ・サポートツールをAWSというインフラから提供する商用サービスです。

0グッド

1クリップ

投稿2019/03/19 07:09

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

イメージ説明

mailform.php

1<!DOCTYPE html> 2<html> 3<head> 4 <meta charset="UTF-8"> 5 <title>お問い合わせ</title> 6 <meta name="description" content="ポートフォリオト"> 7 <meta name="keywords" content="ポートフォリオ,webデザイン"> 8 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> 9 <link href="css/reset.css" rel="stylesheet" type="text/css"> 10 <link href="css/common.css" rel="stylesheet" type="text/css"> 11 <script type="text/javascript" src="js/jquery.js"></script> 12 <style type="text/css" media="screen"> 13 14 body { 15 margin: 0; 16 padding: 100px 0 100px 0; 17 background-image: url(TSURU170321-85mm-155_TP_V4.jpg); 18 background-size: cover; 19 background-repeat: no-repeat; 20} 21 22 23 .profBox{ 24 border-radius: 10px; 25 background-color: rgba(255, 255, 255, 0.3); 26 border:1px solid #ededed; 27 padding:25px; 28 width:94%; 29 max-width:400px; 30 margin-left:auto; 31 margin-right:auto; 32 margin-top:50px; 33 margin-bottom:50px; 34 box-sizing: border-box; 35 } 36 37 .profBox h1{ 38 text-align:center; 39 padding:15px; 40 margin-bottom:20px; 41 margin-top:0px; 42 font-size:1.1em; 43 } 44 45 .profBox dl dt{ 46 border-bottom:1px solid #ededed; 47 padding-bottom:10px; 48 margin-bottom:15px; 49 50 } 51 52 .profBox dl dd{ 53 margin-bottom:25px; 54 margin-left:0px; 55 } 56 57 .inputText{ 58 width:100%; 59 padding:10px!important; 60 font-size:1.1em; 61 box-sizing: border-box; 62 } 63 64 .select_form { 65 width: 100%; 66 text-align: center; 67 } 68 69 .select_form select { 70 font-size:1.1em; 71 width: 100%; 72 padding-right: 1em; 73 cursor: pointer; 74 border: none; 75 background:#fff; 76 box-shadow: none; 77 -webkit-appearance: none; 78 appearance: none; 79 } 80 81 .select_form.select_form_inner { 82 position: relative; 83 border: 1px solid #c0c0c0; 84 border-radius: 2px; 85 background: #ffffff; 86 } 87 .select_form.select_form_inner:before { 88 content: ""; 89 display:block; 90 position: absolute; 91 top: 0.8em; 92 right: 0.9em; 93 width:10px; 94 height:10px; 95 border-left: 1px solid #c0c0c0; 96 border-bottom: 1px solid #c0c0c0; 97 pointer-events: none; 98 transform: rotate(-45deg); 99 margin-top:-3px; 100 } 101 .select_form.select_form_inner select { 102 padding: 8px 20px 8px 8px; 103 color: #c0c0c0; 104 } 105 106 .textboxdata{ 107 border: 1px solid #c0c0c0; 108 width:100%; 109 height:150px; 110 padding:15px; 111 font-size:1.1em; 112 box-sizing: border-box; 113 } 114 115 .btnStyle1{ 116 background:white; 117 color:gray; 118 width:250px; 119 display:block; 120 margin-left:auto; 121 margin-right:auto; 122 font-size:1em; 123 padding:15px; 124 border:2px solid gray; 125 border-radius: 5px; 126 } 127 .erroebox{ 128 color:#d91313; 129 padding-top:10px; 130 } 131 .delatearea{ 132 position: absolute; 133 left: -9999px; 134 } 135 .mgb10px{ 136 margin-bottom:10px; 137 } 138 .missmailbox{ 139 color:red; 140 padding-top:3px; 141 padding-left:5px; 142 } 143 .missnamebox{ 144 color:red; 145 padding-top:3px; 146 padding-left:5px; 147 } 148 </style> 149</head> 150<body> 151 152 <div class="profBox" id="formarea"> 153 154 <h1>お問い合わせ</h1> 155 156 <dl> 157 <dt>メールアドレス※</dt> 158 <dd> 159 <div> 160 <input type="text" name="mailarea" placeholder="xxx@mail.com" class="inputText mailarea" /> 161 <div class="mailareaConfirmation"></div> 162 <div class="missmailbox"></div> 163 </div> 164 </dd> 165 </dl> 166 <dl> 167 <dt>お名前※</dt> 168 <dd> 169 <div> 170 <input type="text" name="namedata" placeholder="例) 佐々木 太郎" class="inputText namearea" /> 171 <div class="namedataConfirmation"></div> 172 <div class="missnamebox"></div> 173 </div> 174 </dd> 175 </dl> 176 <dl> 177 <dt>備考</dt> 178 <dd> 179 <div> 180 <textarea name="textboxdata" class="textboxdata textboxarea"></textarea> 181 <div class="textboxdataConfirmation"></div> 182 </div> 183 </dd> 184 </dl> 185 186 187 <div class="makesurebox"> 188 <button class="btnStyle1 submitarea">確認</button> 189 </div> 190 191 192 <div class="delatearea backandsendbox"> 193 <button class="btnStyle1 backBtnArea mgb10px">戻る</button> 194 <button class="btnStyle1 sendBtnArea">送信</button> 195 </div> 196 197 </div> 198 199 200 <script> 201 202 let mailmiss = "true"; 203 let namemiss = "true"; 204 205 let mailarea = ""; 206 let namearea = ""; 207 let textboxarea = ""; 208 209 210 $(".submitarea").click(function(){ 211 212 213 $(".missmailbox").text(""); 214 $(".missnamebox").text(""); 215 216 mailmiss = "true"; 217 namemiss = "true"; 218 219 220 mailarea = $("input[name='mailarea']").val(); 221 namearea = $("input[name='namedata']").val(); 222 textboxarea = $("textarea[name='textboxdata']").val(); 223 224 if(!mailarea){ 225 226 $(".missmailbox").text("メールアドレスが入力されていません。"); 227 }else if(mailarea.match(/.+@.+..+/)==null){ 228 229 $(".missmailbox").text("メールアドレスの形式が間違っています。"); 230 }else{ 231 232 mailmiss = "false"; 233 }; 234 235 if(!namearea){ 236 237 $(".missnamebox").text("お名前が入力されていません。"); 238 }else{ 239 240 namemiss = "false"; 241 }; 242 243 244 if(mailmiss == "false" && namemiss == "false"){ 245 246 247 $(".mailareaConfirmation").text(mailarea); 248 $(".namedataConfirmation").text(namearea); 249 $(".textboxdataConfirmation").text(textboxarea); 250 251 $(".mailarea").addClass("delatearea"); 252 $(".namearea").addClass("delatearea"); 253 $(".textboxdata").addClass("delatearea"); 254 $(".makesurebox").addClass("delatearea"); 255 256 $(".backandsendbox").removeClass("delatearea"); 257 258 }; 259 260 }); 261 262 $(".backBtnArea").click(function(){ 263 264 265 $(".mailareaConfirmation").text(""); 266 $(".namedataConfirmation").text(""); 267 $(".textboxdataConfirmation").text(""); 268 269 $(".mailarea").removeClass("delatearea"); 270 $(".namearea").removeClass("delatearea"); 271 $(".textboxdata").removeClass("delatearea"); 272 $(".makesurebox").removeClass("delatearea"); 273 274 $(".backandsendbox").addClass("delatearea"); 275 276 }); 277 278 279 $(".sendBtnArea").click(function(){ 280 281 282 $.ajax({ 283 type: 'POST', 284 dataType:'json', 285 url:'mail.php', 286 data:{ 287 288 mailarea:mailarea, 289 namearea:namearea, 290 textboxarea:textboxarea, 291 }, 292 success:function(data) { 293 294 alert(data) 295 296 location.href = "./"; 297 }, 298 error:function(XMLHttpRequest, textStatus, errorThrown) { 299 300 alert(errorThrown); 301 } 302 }); 303 304 }); 305 306 </script> 307 308 309 310 311 312</body> 313</html>

mail.php

1<?php 2 3 $mailarea = htmlspecialchars($_POST['mailarea'], ENT_QUOTES); 4 $namearea = htmlspecialchars($_POST['namearea'], ENT_QUOTES); 5 $textboxarea = htmlspecialchars($_POST['textboxarea'], ENT_QUOTES); 6 7 8 header("Content-Type:text/html; charset=UTF-8"); 9 mb_language("japanese"); 10 mb_internal_encoding("utf-8"); 11 12 $mail="自分のメールアドレス"; 13 14 $sub1="[自動返信] お問合せが完了しました"; 15 16 $mail_to = $mailarea; 17 18 $messegeall .= "お問合せありがとうございます。\n"; 19 $messegeall .= "今後とも、何卒、よろしくお願いいたします。\n"; 20 $messegeall .= "\n"; 21 $messegeall .= "─登録内容の確認─────────────────\n"; 22 $messegeall .= "\n"; 23 $messegeall .= "お名前:".$namearea."\n"; 24 $messegeall .= "メールアドレス:".$mailarea."\n"; 25 $messegeall .= "テキスト:\n"; 26 $messegeall .= $textboxarea."\n"; 27 $messegeall .= "\n"; 28 $messegeall .= "─────────────────────────\n"; 29 $messegeall .= "\n"; 30 $messegeall .= "============================================\n"; 31 $messegeall .= "このメールは自動送信です。\n"; 32 $messegeall .= "お心当たりのない方は、お手数をおかけいたしますが、\n"; 33 $messegeall .= "下記メールアドレスまでご連絡ください。\n"; 34 $messegeall .= "============================================\n"; 35 $messegeall .= "\n"; 36 $messegeall .= "━━━━━━━━━━━━━━━━━━━━━━━━━━\n"; 37 $messegeall .= " name\n"; 38 $messegeall .= " mail\n"; 39 $messegeall .= "━━━━━━━━━━━━━━━━━━━━━━━━━━\n"; 40 41 42 $success1=mb_send_mail($mail_to,$sub1,$messegeall,"From:".$mail); 43 $success2=mb_send_mail($mail,$sub1,$messegeall,"From:".$mail_to); 44 45 46 header('Content-type: application/json'); 47 echo json_encode( "送信が完了しました!" ); 48?>

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

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 07:13

編集2019/03/19 07:44
退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

natsuho0730

2019/03/19 13:50

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問