概要
入力フォームを作成しているのですが、入力画面①→確認表示画面②→送信完了画面③
のながれで、②の確認表示画面内のボタンを押すと、①で入力した情報が折り返しメールとして届き、③の画面の「送信済み」というメッセージの画面が表示されるようになっています。
提示しているのは②と③のコードのみです。
これを②画面のボタンをクリックしたと同時にライン登録などのポップアップ画像を表示させて、さらに入力情報も同時にメールにて折り返したいのですが、
②のボタンをクリックすると、ポップアップ画像が一瞬だけ出現して、すぐに③の「送信済み」の白い画面に行ってしまいます。情報はきちんと送れています。
実際のサイトのURLは以下です。
これを②のボタンをクリックすると、ポップアップ画像が出現して画像が停止したままで、さらに③の送信完了画面の白いスクリーンがポップアップ画像の後ろ(背面)に表示されると見栄えが良さそうなのですが、
そのように、できないでしょうか?
ポップアップ画像のコードは以下のサイトを参考にしました。
JavaScriptでポップアップを表示する方法を解説!
確認表示画面②のコード
php
1<?php 2session_start(); 3 4 5$email = $_SESSION['email']; 6 7$_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(48)); 8 9$token = htmlspecialchars($_SESSION['token'], ENT_QUOTES); 10 11?> 12 13<!DOCTYPE html> 14 <html> 15 <head> 16<meta charset ="utf-8"> 17<meta name="viewport" content="width=device-width, initial-scale=1"> 18<link rel="stylesheet" href="reset.css"> 19<link rel="stylesheet" href="0LPmouth-confirmation-screen-responsive2000orless.css"> 20 21<title>初期フォーム確認画面</title> 22<style type="text/css"> 23 24/* ポップアップ */ 25.popup { 26 position: fixed; 27 left: 0; 28 top: 0; 29 width: 100%; 30 height: 100%; 31 z-index: 9999; 32 opacity: 0; 33 visibility: hidden; 34 transition: .6s; 35} 36.popup.is-show7 { 37 opacity: 1; 38 visibility: visible; 39} 40.popup-inner { 41 position: absolute; 42 left: 50%; 43 top: 50%; 44 transform: translate(-50%,-50%); 45 width: 80%; 46 max-width: 600px; 47 padding: 50px; 48 background-color: #fff; 49 z-index: 2; 50} 51.popup-inner img { 52 width: 100%; 53} 54.close-btn { 55 position: absolute; 56 right: 0; 57 top: 0; 58 width: 50px; 59 height: 50px; 60 border-radius: 50%; 61 line-height: 50px; 62 font-size: 20px; 63 font-weight: bold; 64 cursor: pointer; 65} 66.bg-black { 67 position: absolute; 68 left: 0; 69 top: 0; 70 width: 100%; 71 height: 100%; 72 background-color: rgba(0,0,0,.8); 73 z-index: 1; 74 cursor: pointer; 75} 76 77 78</style> 79 80</head> 81 82<body> 83 84<!--ボタン画像起動の為、onsubmit="return false"消去してます。--> 85 <form action ="LPmouth-completion-screen1.php" method ="post" name="doui_form"> 86 87<input type ="hidden" name ="token" value ="<?php echo $token ?>"> 88 89 90<div class="title"> 91<label class="title" for="title">入力内容の確認</label> 92</div> 93 94<label class="col-sm-2 control-label" for="email">メールアドレスの確認: 95<br> 96<small><?php echo $email; ?></small></label> 97</div> 98 99 100 101 102 103<div class="radio_text"> 104 105<section> 106<label class="radio_text"> 107<input type="radio" name="doui" value="suru" checked>同意する 108 </label> 109 <label class="radio_text"> 110 <input type="radio" name="doui" value="shinai">同意しない 111 </label> 112</section> 113</div> 114 115<div class="auto-style1"> 116<!--classを追加btn btn-primaryクリックするとポップアップ出現させる--> 117<button type="submit" id="soushin2" name="submit" class="auto-style4" value="submit"> 118 <div class="btn btn-primary"><img src="image2/25mouth.png" alt="確認画面へ" class="button-simple yureru-s example8"/></div></button> 119 </div> 120 121<!--ボタンをクリックすると出現するポップ画像のHTML--> 122 123 <div id="popup" class="popup"> 124 <div class="popup-inner"> 125 <div id="close-btn" class="close-btn">✖</div> 126 127 <div class="img"><button type="submit" id="soushin3" name="submit" class="auto-style4" value="submit"><img src="image2/25mouth.png" alt="確認画面へ" class="button-simple yureru-s example8"/></button></div> 128 129 130 </div><!-- .popup-inner --> 131 <div id="bg-black" class="bg-black"></div> 132 </div><!-- #popup --> 133 134<!--ボタンをクリックすると出現するポップ画像のHTMLここまで--> 135 136 137 138 139<script> 140 //ボタン画像のエラーコード 141 var doui = document.getElementById('soushin2'); 142 143 doui.addEventListener('click', function(e) { 144if (document.doui_form.doui.value != "suru") { 145alert("利用規約に同意して頂けない場合は本サービスのご利用はお控えください。"); 146e.preventDefault(); 147} else { 148document.doui_form.submit(); 149} 150}) 151</script> 152 153 154 155<script> 156 // ポップアップのセッティング処理 157 function popupSetting(){ 158 let popup = document.getElementById('popup'); 159 if(!popup) return; 160 161 let bgBlack = document.getElementById('bg-black'); 162 let closeBtn = document.getElementById('close-btn'); 163 let soushin2 = document.getElementById('soushin2'); 164 165 // ポップアップ 166 popUp(bgBlack); 167 popUp(closeBtn); 168 popUp(soushin2); 169 170 // ポップアップ処理 171 function popUp(elem){ 172 if(!elem) return; 173 174 elem.addEventListener('click', function(){ 175 popup.classList.toggle('is-show7'); 176 }); 177 } 178 } 179 180 // ポップアップのセッティング 181 popupSetting(); 182 183 184</script> 185 186</form> 187 188 189 </body> 190</html> 191 192 193 194
送信完了画面③PHPMailer メールの折り返しコード
php
1<?php 2 3// PHPMailer クラスをネーム空間にインポート 4use PHPMailer\PHPMailer\PHPMailer; 5use PHPMailer\PHPMailer\SMTP; 6use PHPMailer\PHPMailer\Exception; 7 8 9 10require('PHPMailer/src/PHPMailer.php'); 11require('PHPMailer/src/Exception.php'); 12require('PHPMailer/src/SMTP.php'); 13 14 15 16 17 18// 入力内容の取得・変数に格納 19session_start(); 20 21 22if(isset($_POST['token'], $_SESSION['token']) && ($_POST['token'] === $_SESSION['token'])){ 23 unset($_SESSION['token']); 24 25 26$email = $_SESSION['email']; 27 28} 29// メール日本語対応 30mb_language("japanese"); 31mb_internal_encoding("UTF-8"); 32 33 34 35 36 37// インスタンス生成 38$mail = new PHPMailer(true); 39 40// 文字エンコードを指定 41$mail->CharSet = 'utf-8'; 42 43try { 44 // デバッグ設定 45 // $mail->SMTPDebug = 2; // デバッグ出力を有効化(レベルを指定) 46 // $mail->Debugoutput = function($str, $level) {echo "debug level $level; message: $str<br>";}; 47 48 // SMTPサーバの設定 49 $mail->isSMTP(); // SMTPの使用宣言 50 $mail->Host = '????.com'; // SMTPサーバーを指定 51 $mail->SMTPAuth = true; // SMTP authenticationを有効化 52 $mail->Username = '???'; // SMTPサーバーのユーザ名 53 $mail->Password = '??????'; // SMTPサーバーのパスワード 54 $mail->SMTPSecure = 'ssl'; // 暗号化を有効(tls or ssl)無効の場合はfalse 55 $mail->Port = 465; // TCPポートを指定(tlsの場合は465や587) 56 57 58 59 // メール本体 60 $mail->setFrom('?????', 'camila'); // 送信元メールアドレスと名前 61 $mail->addAddress($email,$name); // 送信先メールアドレスと名前 62 63 $mail->addCC('??????', 'camila');// サーバで作ったアドレスの受信ボックスにも届くようにする。 64 $mail->Body = "下記の情報を受け取りました。\n内容を確認し、こちらから折り返し、ライン又はメールアドレスにてご案内させて頂きます。\n\n"; 65 $mail->Subject = mb_encode_mimeheader('あいうえお'); 66 67 68 69 $mail->Body .= "メールアドレス:".$email."\n"; 70 71 72// 送信 73 $mail->send(); 74 echo '送信済み'; 75} catch (Exception $e) { 76 echo "送信失敗: {$mail->ErrorInfo}"; 77} 78?> 79 80 81<!DOCTYPE html> 82 83<html> 84 85<head> 86 <meta content="text/html; charset=utf-8" /> 87 <meta name="viewport" content="width=device-width, initial-scale=1"> 88 <title> お問い合わせ 送信後の画面</title> 89 90 <link rel="stylesheet" href="reset.css"> 91 92 <style type="text/css"> 93 94</style> 95 96 97</head> 98 99<body> 100 101 102 103 104 105</body> 106 107</html> 108 109 110 111 112 113
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。