モーダルを使いたい
解決したいこと
現在設定しているお問い合わせフォームで、入力した後【内容確認】ボタンを押した際や【送信】ボタンや戻るボタンを押した際など、ページ自体が切り替わって「確認画面」や「送信完了画面」が表示されます。
ページ遷移ではなく、モーダルなどを使用して上から出現されるようにしたいです。
初心者のため、わかりやすくご教示いただけますと幸いです。
発生している問題・エラー
出ているエラーメッセージを入力
例）
NameError (uninitialized constant World)
または、問題・エラーが起きている画像をここにドラッグアンドドロップ
該当するソースコード
<?php
require_once('../libs/config.php');
define("pageTitle","ウエディングフェア");
define("TITLE_SUB","ウエディングフェア".TITLE);
define("DESCRIPTION_SUB","ウエディングフェアについてのご案内ページです。 - ".TITLE);
define("KEYWORDS_SUB","ウエディングフェア,".KEYWORDS);
define( "FILE_DIR", "images/test/");
// 変数の初期化
$page_flag = 0;
$clean = array();
$error = array();
// サニタイズ
if( !empty($_POST) ) {
foreach( $_POST as $key => $value ) {
$clean[$key] = htmlspecialchars( $value, ENT_QUOTES);
}
}
if( !empty($clean['btn_confirm']) ) {
$error = validation($clean);
if( empty($error) ) {
$page_flag = 1;
// セッションの書き込み
session_start();
$_SESSION['page'] = true;
}
} elseif( !empty($clean['btn_submit']) ) {
session_start();
if( !empty($_SESSION['page']) && $_SESSION['page'] === true ) {
// セッションの削除
unset($_SESSION['page']);
$page_flag = 2;
// 変数とタイムゾーンを初期化
$header = null;
$body = null;
$admin_body = 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 = "Content-Type: multipart/mixed;boundary=\"__BOUNDARY__\"\n";
$header .= "From: GRAYCODE <info@miraidc.icurus.jp>\n";
$header .= "Reply-To: GRAYCODE <info@miraidc.icurus.jp>\n";
// 件名を設定
$auto_reply_subject = 'お問い合わせありがとうございます。';
// 本文を設定
$auto_reply_text = "この度は、お問い合わせ頂き誠にありがとうございます。
下記の内容でお問い合わせを受け付けました。\n\n";
$auto_reply_text .= "お問い合わせ日時：" . date("Y-m-d H:i") . "\n";
$auto_reply_text .= "お名前：" . $clean['your_name'] . "\n";
$auto_reply_text .= "フリガナ：" . $clean['kana_name'] . "\n";
$auto_reply_text .= "お電話番号：" . $clean['tel'] . "\n";
$auto_reply_text .= "メールアドレス：" . $clean['email'] . "\n";
$auto_reply_text .= "ご要望：" . nl2br($clean['contact']) . "\n\n";
$auto_reply_text .= "GRAYCODE 事務局";
// テキストメッセージをセット
$body = "--__BOUNDARY__\n";
$body .= "Content-Type: text/plain; charset=\"ISO-2022-JP\"\n\n";
$body .= $auto_reply_text . "\n";
$body .= "--__BOUNDARY__\n";
// 自動返信メール送信
mb_send_mail( $clean['email'], $auto_reply_subject, $body, $header);
// 運営側へ送るメールの件名
$admin_reply_subject = "お問い合わせを受け付けました";
// 本文を設定
$admin_reply_text = "下記の内容でお問い合わせがありました。\n\n";
$admin_reply_text .= "お問い合わせ日時：" . date("Y-m-d H:i") . "\n";
$admin_reply_text .= "お名前：" . $clean['your_name'] . "\n";
$admin_reply_text .= "フリガナ：" . $clean['kana_name'] . "\n";
$admin_reply_text .= "お電話番号：" . $clean['tel'] . "\n";
$admin_reply_text .= "メールアドレス：" . $clean['email'] . "\n";
$admin_reply_text .= "ご要望：" . nl2br($clean['contact']) . "\n\n";
// テキストメッセージをセット
$body = "--__BOUNDARY__\n";
$body .= "Content-Type: text/plain; charset=\"ISO-2022-JP\"\n\n";
$body .= $admin_reply_text . "\n";
$body .= "--__BOUNDARY__\n";
// 管理者へメール送信
mb_send_mail( 'info@miraidc.icurus.jp', $admin_reply_subject, $body, $header);
} else {
$page_flag = 0;
}
}
function validation($data) {
$error = array();
// お名前のバリデーション
if (empty($data['your_name'])) {
$error['your_name'] = "お名前は必ず入力してください。";
}
// フリガナのバリデーション
if (empty($data['kana_name'])) {
$error['kana_name'] = "フリガナは必ず入力してください。";
}
// メールアドレスのバリデーション
if (empty($data['email'])) {
$error['email'] = "メールアドレスは必ず入力してください。";
} elseif (!preg_match('/^[0-9a-z_.\/?-]+@([0-9a-z-]+\.)+[0-9a-z-]+$/', $data['email'])) {
$error['email'] = "メールアドレスは正しい形式で入力してください。";
}
// お電話番号のバリデーション
if (empty($data['tel'])) {
$error['tel'] = "お電話番号は必ず入力してください。";
}
return $error;
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XGSJDRP5B9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XGSJDRP5B9');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-6ELYF7JVFM"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
// 新アナリティクス
gtag('config', 'G-6ELYF7JVFM');
</script>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?php echo TITLE_SUB; ?></title>
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="keywords" content="<?php echo DESCRIPTION_SUB; ?>" />
<meta name="description" content="<?php echo KEYWORDS_SUB; ?>" />
<!-- CSS -->
<link href="../img/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
<link rel="stylesheet" href="css/style_test.css">
<style rel="stylesheet" type="text/css">
body {
padding: 20px;
text-align: center;
}
.h2_title {
margin-bottom: 20px;
padding: 20px 0;
color: #209eff;
font-size: 122%;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
}
input[type=text] {
padding: 5px 10px;
font-size: 86%;
border: none;
border-radius: 3px;
background: #ddf0ff;
}
input[name=btn_confirm],
input[name=btn_submit],
input[name=btn_back] {
margin-top: 10px;
padding: 5px 20px;
font-size: 100%;
color: #fff;
cursor: pointer;
border: none;
border-radius: 3px;
box-shadow: 0 3px 0 #2887d1;
background: #4eaaf1;
}
input[name=btn_back] {
margin-right: 20px;
box-shadow: 0 3px 0 #777;
background: #999;
}
.element_wrap {
margin-bottom: 10px;
padding: 10px 0;
border-bottom: 1px solid #ccc;
text-align: left;
}
label {
display: inline-block;
margin-bottom: 10px;
font-weight: bold;
width: 150px;
vertical-align: top;
}
.element_wrap p {
display: inline-block;
margin: 0;
text-align: left;
}
textarea[name=contact] {
padding: 5px 10px;
width: 60%;
height: 100px;
font-size: 86%;
border: none;
border-radius: 3px;
background: #ddf0ff;
}
.error_message {
color: #ff2e5a;
font-size: 86%;
margin-top: 5px;
}
</style>
</head>
<body>
<h1 class="logo">
<a href="https://www.laguna-garden.jp/">
<img src="assets/img/logo.png" alt="LAGUNA GARDEN HOTEL">
</a>
</h1>
<!-- お申し込みフォーム -->
<h2 class="h2_title">お問い合わせフォーム</h2>
<?php if( $page_flag === 1 ): ?>
<form method="post" action="">
<div class="element_wrap">
<label>お名前</label>
<p><?php echo $clean['your_name']; ?></p>
</div>
<div class="element_wrap">
<label>フリガナ</label>
<p><?php echo $clean['kana_name']; ?></p>
</div>
<div class="element_wrap">
<label>お電話番号</label>
<p><?php echo $clean['tel']; ?></p>
</div>
<div class="element_wrap">
<label>メールアドレス</label>
<p><?php echo $clean['email']; ?></p>
</div>
<div class="element_wrap">
<label>ご要望</label>
<p><?php echo nl2br($clean['contact']); ?></p>
</div>
<input type="submit" name="btn_back" value="戻る">
<input type="submit" name="btn_submit" value="送信">
<input type="hidden" name="your_name" value="<?php echo $clean['your_name']; ?>">
<input type="hidden" name="kana_name" value="<?php echo $clean['kana_name']; ?>">
<input type="hidden" name="tel" value="<?php echo $clean['tel']; ?>">
<input type="hidden" name="email" value="<?php echo $clean['email']; ?>">
<input type="hidden" name="contact" value="<?php echo $clean['contact']; ?>">
</form>
<?php elseif( $page_flag === 2 ): ?>
<p>送信が完了しました。</p>
<?php else: ?>
<form method="post" action="" enctype="multipart/form-data" id="form">
<div class="contactTxt" style="margin-top: 0;">
<p>
Eメールでのお問い合わせは下記項目を入力して｢内容確認｣ボタンを押してください。<br>
Eメールの返信には2～3日かかる場合がございます。<br>
お急ぎの際はお手数ですがお電話にてお問い合わせ下さいますよう、お願い申し上げます。<br>
TEL:098-897-8384(ブライダル係)<br>
<span class="c_red">※</span>印の項目は必須入力となります。
</p>
</div>
<div class="element_wrap">
<label for="your_name">お名前</label>
<input type="text" id="your_name" name="your_name" value="<?php echo isset($clean['your_name']) ? $clean['your_name'] : ''; ?>">
<?php if (!empty($error['your_name'])): ?>
<p class="error_message"><?php echo $error['your_name']; ?></p>
<?php endif; ?>
</div>
<div class="element_wrap">
<label for="kana_name">フリガナ</label>
<input type="text" id="kana_name" name="kana_name" value="<?php echo isset($clean['kana_name']) ? $clean['kana_name'] : ''; ?>">
<?php if (!empty($error['kana_name'])): ?>
<p class="error_message"><?php echo $error['kana_name']; ?></p>
<?php endif; ?>
</div>
<div class="element_wrap">
<label for="email">メールアドレス</label>
<input type="text" id="email" name="email" value="<?php echo isset($clean['email']) ? $clean['email'] : ''; ?>">
<?php if (!empty($error['email'])): ?>
<p class="error_message"><?php echo $error['email']; ?></p>
<?php endif; ?>
</div>
<div class="element_wrap">
<label for="tel">お電話番号</label>
<input type="text" id="tel" name="tel" value="<?php echo isset($clean['tel']) ? $clean['tel'] : ''; ?>">
<?php if (!empty($error['tel'])): ?>
<p class="error_message"><?php echo $error['tel']; ?></p>
<?php endif; ?>
</div>
<div class="element_wrap">
<label for="contact">ご要望</label>
<textarea id="contact" name="contact"><?php echo isset($clean['contact']) ? $clean['contact'] : ''; ?></textarea>
</div>
<p class="pc40sp20 text-center">
<a href="../privacy/" target="_blank" class="link">プライバシーポリシー</a>に同意の上、送信内容を確認してください。
</p>
<input type="submit" name="btn_confirm" value="内容確認">
</form>
<?php endif; ?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
### 自分で試したこと
画像は自分で試したことではありませんが、このように表示できればと考えています
1
