続いては、お問い合わせ完了画面への作成をしていきます。
利用者にお問い合わせが完了した事を知らせる画面を表示します。
また、後ほど完了画面にメールを送信する機能を実装していきますが、それは後ほど解説します。
お問い合わせフォーム完了画面
完了画面の作成場所
完了画面は新しく「thanks」というフォルダを作成して、その中に「index.html」を作成します。
CSSとJavaScriptは既に作成してあるファイル「style.css」「script.js」を読み込む事で再利用します。
[ディレクトリ構造]
制作フォルダ/
├ css/
└ style.css
├ js/
└ script.js
├ confirm/
└ index.html
├ thanks/
└ index.html
└ index.html
完了画面の完成形のコード
これから作成する完了画面のHTML・CSSコードとその表示内容を確認してみましょう。
完了画面のHTMLとCSS
完了画面のHTMLやCSSはこのようになります。
お問い合わせ完了画面では、メールを送信したことを知らせるメッセージの表示します。
その部分のスタイルも作る必要があるので、既に作成してある「style.css」にCSSを追記していきます。
thanks/index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="noindex">
<title>お問い合わせ完了</title>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../css/style.css">
<script defer src="../js/script.js"></script>
</head>
<body>
<div class="contact_form_container">
<h2 data-text="Complete">お問い合わせ完了</h2>
<div class="steps_navigation">
<ol>
<li class="active">入力</li>
<li class="active">確認</li>
<li class="active">完了</li>
</ol>
</div>
<div class="contact_form">
<div class="message_contents">
<p>この度はお問い合わせいただきまして、誠にありがとうございます。</p>
<p>ご入力頂いたメールアドレス宛へ、ご確認メールをお送りしておりますのでご確認ください。</p>
<p>内容を確認次第、担当者よりご連絡させていただきます。</p>
</div>
<div class="form_button">
<a href="../">お問い合わせに戻る</a>
</div>
</div>
</div>
<footer>
<small>© 2024 sheep.</small>
</footer>
</body>
</html>
style.css
/**********************************
* 問い合わせ完了のメッセージ
**********************************/
.message_contents {
margin: 20px 0;
padding: 10px 20px;
border: dashed 1px #505050;
min-height: 60vh;
}
.message_contents p {
margin: 20px 0;
}
noindexの設定
お問い合わせ完了画面はGoogleなどの検索結果に表示させる必要はないので、先ほどと同じように「noindex」を設定します。
HTML
<meta name="robots" content="noindex">
メッセージの表示
正常にお問い合わせが完了したことを知らせるメッセージを表示します。
HTML
<div class="contact_form">
<div class="message_contents">
<p>この度はお問い合わせいただきまして、誠にありがとうございます。</p>
<p>ご入力頂いたメールアドレス宛へ、ご確認メールをお送りしておりますのでご確認ください。</p>
<p>内容を確認次第、担当者よりご連絡させていただきます。</p>
</div>
<div class="form_button">
<a href="../">お問い合わせに戻る</a>
</div>
</div>
style.css
/**********************************
* 問い合わせ完了のメッセージ
**********************************/
.message_contents {
margin: 20px 0;
padding: 10px 20px;
border: dashed 1px #505050;
min-height: 60vh;
}
.message_contents p {
margin: 20px 0;
}