Chapter 06無料公開

完了画面の作成

ヒツジのシステム開発研究所
ヒツジのシステム開発研究所
2024.04.21に更新

続いては、お問い合わせ完了画面への作成をしていきます。

利用者にお問い合わせが完了した事を知らせる画面を表示します。

また、後ほど完了画面にメールを送信する機能を実装していきますが、それは後ほど解説します。

お問い合わせフォーム完了
お問い合わせフォーム完了画面

完了画面の作成場所

完了画面は新しく「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>&copy; 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;
}