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

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

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

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

入力確認画面でボタンをクリックしたら、折り返しメールを送ると同時にポップアップ画像を表示させたいです。

ghtew2
ghtew2

総合スコア176

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0評価

1クリップ

177閲覧

投稿2022/05/24 04:07

編集2022/05/25 12:36

概要
入力フォームを作成しているのですが、入力画面①→確認表示画面②→送信完了画面③
のながれで、②の確認表示画面内のボタンを押すと、①で入力した情報が折り返しメールとして届き、③の画面の「送信済み」というメッセージの画面が表示されるようになっています。
提示しているのは②と③のコードのみです。

これを②画面のボタンをクリックしたと同時にライン登録などのポップアップ画像を表示させて、さらに入力情報も同時にメールにて折り返したいのですが、

②のボタンをクリックすると、ポップアップ画像が一瞬だけ出現して、すぐに③の「送信済み」の白い画面に行ってしまいます。情報はきちんと送れています。
実際のサイトのURLは以下です。

これを②のボタンをクリックすると、ポップアップ画像が出現して画像が停止したままで、さらに③の送信完了画面の白いスクリーンがポップアップ画像の後ろ(背面)に表示されると見栄えが良さそうなのですが、
そのように、できないでしょうか?

ポップアップ画像のコードは以下のサイトを参考にしました。
JavaScriptでポップアップを表示する方法を解説!

確認表示画面②のコード

php

<?php session_start(); $email = $_SESSION['email']; $_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(48)); $token = htmlspecialchars($_SESSION['token'], ENT_QUOTES); ?> <!DOCTYPE html> <html> <head> <meta charset ="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="reset.css"> <link rel="stylesheet" href="0LPmouth-confirmation-screen-responsive2000orless.css"> <title>初期フォーム確認画面</title> <style type="text/css"> /* ポップアップ */ .popup { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; opacity: 0; visibility: hidden; transition: .6s; } .popup.is-show7 { opacity: 1; visibility: visible; } .popup-inner { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 80%; max-width: 600px; padding: 50px; background-color: #fff; z-index: 2; } .popup-inner img { width: 100%; } .close-btn { position: absolute; right: 0; top: 0; width: 50px; height: 50px; border-radius: 50%; line-height: 50px; font-size: 20px; font-weight: bold; cursor: pointer; } .bg-black { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,.8); z-index: 1; cursor: pointer; } </style> </head> <body> <!--ボタン画像起動の為、onsubmit="return false"消去してます。--> <form action ="LPmouth-completion-screen1.php" method ="post" name="doui_form"> <input type ="hidden" name ="token" value ="<?php echo $token ?>"> <div class="title"> <label class="title" for="title">入力内容の確認</label> </div> <label class="col-sm-2 control-label" for="email">メールアドレスの確認: <br> <small><?php echo $email; ?></small></label> </div> <div class="radio_text"> <section> <label class="radio_text"> <input type="radio" name="doui" value="suru" checked>同意する </label> <label class="radio_text"> <input type="radio" name="doui" value="shinai">同意しない </label> </section> </div> <div class="auto-style1"> <!--classを追加btn btn-primaryクリックするとポップアップ出現させる--> <button type="submit" id="soushin2" name="submit" class="auto-style4" value="submit"> <div class="btn btn-primary"><img src="image2/25mouth.png" alt="確認画面へ" class="button-simple yureru-s example8"/></div></button>  </div> <!--ボタンをクリックすると出現するポップ画像のHTML--> <div id="popup" class="popup"> <div class="popup-inner"> <div id="close-btn" class="close-btn">&#10006;</div> <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> </div><!-- .popup-inner --> <div id="bg-black" class="bg-black"></div> </div><!-- #popup --> <!--ボタンをクリックすると出現するポップ画像のHTMLここまで--> <script> //ボタン画像のエラーコード var doui = document.getElementById('soushin2'); doui.addEventListener('click', function(e) { if (document.doui_form.doui.value != "suru") { alert("利用規約に同意して頂けない場合は本サービスのご利用はお控えください。"); e.preventDefault(); } else { document.doui_form.submit(); } }) </script> <script> // ポップアップのセッティング処理 function popupSetting(){ let popup = document.getElementById('popup'); if(!popup) return; let bgBlack = document.getElementById('bg-black'); let closeBtn = document.getElementById('close-btn'); let soushin2 = document.getElementById('soushin2'); // ポップアップ popUp(bgBlack); popUp(closeBtn); popUp(soushin2); // ポップアップ処理 function popUp(elem){ if(!elem) return; elem.addEventListener('click', function(){ popup.classList.toggle('is-show7'); }); } } // ポップアップのセッティング popupSetting(); </script> </form> </body> </html>

送信完了画面③PHPMailer メールの折り返しコード

php

<?php // PHPMailer クラスをネーム空間にインポート use PHPMailer\PHPMailer\PHPMailer; use PHPMailer\PHPMailer\SMTP; use PHPMailer\PHPMailer\Exception; require('PHPMailer/src/PHPMailer.php'); require('PHPMailer/src/Exception.php'); require('PHPMailer/src/SMTP.php'); // 入力内容の取得・変数に格納 session_start(); if(isset($_POST['token'], $_SESSION['token']) && ($_POST['token'] === $_SESSION['token'])){ unset($_SESSION['token']); $email = $_SESSION['email']; } // メール日本語対応 mb_language("japanese"); mb_internal_encoding("UTF-8"); // インスタンス生成 $mail = new PHPMailer(true); // 文字エンコードを指定 $mail->CharSet = 'utf-8'; try { // デバッグ設定 // $mail->SMTPDebug = 2; // デバッグ出力を有効化(レベルを指定) // $mail->Debugoutput = function($str, $level) {echo "debug level $level; message: $str<br>";}; // SMTPサーバの設定 $mail->isSMTP(); // SMTPの使用宣言 $mail->Host = '????.com'; // SMTPサーバーを指定 $mail->SMTPAuth = true; // SMTP authenticationを有効化 $mail->Username = '???'; // SMTPサーバーのユーザ名 $mail->Password = '??????'; // SMTPサーバーのパスワード $mail->SMTPSecure = 'ssl'; // 暗号化を有効(tls or ssl)無効の場合はfalse $mail->Port = 465; // TCPポートを指定(tlsの場合は465や587) // メール本体 $mail->setFrom('?????', 'camila'); // 送信元メールアドレスと名前 $mail->addAddress($email,$name); // 送信先メールアドレスと名前 $mail->addCC('??????', 'camila');// サーバで作ったアドレスの受信ボックスにも届くようにする。 $mail->Body = "下記の情報を受け取りました。\n内容を確認し、こちらから折り返し、ライン又はメールアドレスにてご案内させて頂きます。\n\n"; $mail->Subject = mb_encode_mimeheader('あいうえお'); $mail->Body .= "メールアドレス:".$email."\n"; // 送信 $mail->send(); echo '送信済み'; } catch (Exception $e) { echo "送信失敗: {$mail->ErrorInfo}"; } ?> <!DOCTYPE html> <html> <head> <meta content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <title> お問い合わせ 送信後の画面</title> <link rel="stylesheet" href="reset.css"> <style type="text/css"> </style> </head> <body> </body> </html>

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

まだ回答がついていません

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

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。