webサイト制作の勉強｜2023年11月クラス用ブログ

ファリカテクニカルアカデミーのwebサイト制作科の授業解説ブログです。フェリカテクニカルアカデミーは池袋にある求職者支援訓練の学校です。

coffee-shop お問い合わせフォームデータ

入力画面
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="description" content="世界各地のコーヒー豆をお取り寄せ出来るサブスクリプションサービスの紹介サイトです。毎月1回、月初めにお届けします。コーヒー豆のセット内容は毎月変更され、季節やイベントに合わせて特別なコーヒーやスイーツも提供致します。">
<title>お問い合わせ|Coffee Journey</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<h1>Coffee Journey</h1>
</header>

<div class="container form-page">
<ul class="step">
<li class="current"><p><span>1</span>入力</p></li>
<li><p><span>2</span>確認</p></li>
<li><p><span>3</span>完了</p></li>
</ul>


<h2>入力画面</h2>
<form class="h-adr" action="confirm.php" method="post">
<span class="p-country-name" style="display:none;">Japan</span>
<dl>
<dt>コースの選択</dt>
<dd>
<label for="course1">
<input id="course1" type="radio" name="course" value="年間コース" required>年間コース
</label>

<label for="course2">
<input id="course2" type="radio" name="course" value="お試しコース" required>お試しコース
</label>
</dd>

<dt>お名前</dt>
<dd><input type="text" name="namae" required placeholder="お名前を入力して下さい" autocomplete="name"></dd>
<dt>メールアドレス</dt>
<dd><input type="email" name="email" required placeholder="メールアドレスを入力して下さい" autocomplete="email"></dd>
<dt>電話番号</dt>
<dd><input type="tel" name="tel" required autocomplete="tel"></dd>

<dt>〒</dt>
<dd><input type="text" name="postal-code" class="p-postal-code" size="8" maxlength="8"></dd>

<dt>住所1</dt>
<dd><input type="text" name="address1" class="p-region p-locality p-street-address p-extended-address" required></dd>
<dt>それ以降の住所</dt>
<dd><input type="text" name="address2" required></dd>
<dt>ビル・建物名</dt>
<dd>
<input type="text" name="address3">
<span class="room">部屋番号まで入力して下さい</span>
</dd>
<dt>備考欄</dt>
<dd><textarea name="message"></textarea></dd>
</dl>

<div class="policy">
<div class="policy-txt">
<h3>Lorem, ipsum dolor.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit repudiandae ipsum modi qui sit explicabo, illum placeat eius aperiam architecto, molestiae laborum ab nesciunt necessitatibus ut. Hic iure, repudiandae deserunt exercitationem temporibus, quia omnis eius odit fugit reiciendis suscipit corporis dolores autem eveniet quisquam vitae repellat quam sed, iusto officia nisi. Doloremque assumenda asperiores minus quasi quos ducimus ex aut. Inventore distinctio maiores suscipit molestias ex dolorum voluptates, saepe sequi! Similique culpa officia illum suscipit eos, libero et, itaque dicta quo, iusto dolorem minus. Commodi culpa aperiam minima error eaque ipsum, vel fuga omnis, assumenda sed id laudantium eius quam.</p>
</div><!-- /.policy-txt -->
<div class="policy-check">
<label for="policy-btn" class="policy-btn-wrapper">
<input id="policy-btn" type="checkbox" required><span>プライバシーポリシーを確認し同意します。</span>
</label>
</div><!-- /.policy-check -->
</div><!-- /.policy -->

<!-- <input type="submit" value="確認"> -->
<div class="button01">
<button type="submit">確認</button>
</div>

</form>
</div><!-- /.container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="../js/yubinbango.js"></script>
</body>
</html>


確認画面
confirm.php

<?php
//namaeの値が空の状態でconfirm.phpにアクセスしたら、強制


$course = $_POST["course"];
$namae = htmlspecialchars($_POST["namae"],ENT_QUOTES);
$email = htmlspecialchars($_POST["email"],ENT_QUOTES);
$tel = htmlspecialchars($_POST["tel"],ENT_QUOTES);
$code = htmlspecialchars($_POST["postal-code"],ENT_QUOTES);
$address1 = htmlspecialchars($_POST["address1"],ENT_QUOTES);
$address2 = htmlspecialchars($_POST["address2"],ENT_QUOTES);
$address3 = htmlspecialchars($_POST["address3"],ENT_QUOTES);
$message = htmlspecialchars($_POST["message"],ENT_QUOTES);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="世界各地のコーヒー豆をお取り寄せ出来るサブスクリプションサービスの紹介サイトです。毎月1回、月初めにお届けします。コーヒー豆のセット内容は毎月変更され、季節やイベントに合わせて特別なコーヒーやスイーツも提供致します。">
<title>確認画面|Coffee Journey</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<h1>Coffee Journey</h1>
</header>

<div class="container form-page">
<ul class="step">
<li><p><span>1</span>入力</p></li>
<li class="current"><p><span>2</span>確認</p></li>
<li><p><span>3</span>完了</p></li>
</ul>


<h2>確認画面</h2>

<form id="g-form" action="Google FormのURL" method="post">
<dl>
<dt>コースの選択</dt>
<dd><?php echo $course; ?></dd>
<dt>お名前</dt>
<dd><?php echo $namae; ?></dd>
<dt>メールアドレス</dt>
<dd><?php echo $email; ?></dd>
<dt>電話番号</dt>
<dd><?php echo $tel; ?></dd>
<dt>〒</dt>
<dd><?php echo $code; ?></dd>
<dt>住所1</dt>
<dd><?php echo $address1; ?></dd>
<dt>それ以降の住所</dt>
<dd><?php echo $address2; ?></dd>
<dt>ビル・建物名</dt>
<dd><?php echo $address3; ?></dd>
<dt>備考欄</dt>
<dd><?php echo $message; ?></dd>
</dl>

<!-- googleにデータを送る -->
<input type="hidden" name="entry.240098677" value="<?php echo $course; ?>">
<input type="hidden" name="entry.595944924" value="<?php echo $namae; ?>">
<input type="hidden" name="entry.752683575" value="<?php echo $email; ?>">
<input type="hidden" name="entry.829444205" value="<?php echo $tel; ?>">
<input type="hidden" name="entry.1400786858" value="<?php echo $code; ?>">
<input type="hidden" name="entry.946047293" value="<?php echo $address1; ?>">
<input type="hidden" name="entry.782779619" value="<?php echo $address2; ?>">
<input type="hidden" name="entry.1926565205" value="<?php echo $address3; ?>">
<input type="hidden" name="entry.386862337" value="<?php echo $message; ?>">




<button type="submit" class="btn btn-flat"><span>送信</span></button>
</form>
</div><!-- /.container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

<script>
$(function(){
$('#g-form').submit(function(event){
let formData = $('#g-form').serialize();
$.ajax({
  url: "Google FormのURL",
  data: formData,
  type: "POST",
  dataType: "xml",
  statusCode: {
    0: function(){
      window.location.href = "thanks.html";
      },
    200: function(){
     //失敗したときの処理
      }
    }
  });

//googleformへのページ遷移をキャンセル
event.preventDefault();
});
});
</script>
</body>
</html>


完了画面
thanks.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="世界各地のコーヒー豆をお取り寄せ出来るサブスクリプションサービスの紹介サイトです。毎月1回、月初めにお届けします。コーヒー豆のセット内容は毎月変更され、季節やイベントに合わせて特別なコーヒーやスイーツも提供致します。">
<title>完了画面|Coffee Journey</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<h1>Coffee Journey</h1>
</header>

<div class="container form-page">
<ul class="step">
<li><p><span>1</span>入力</p></li>
<li><p><span>2</span>確認</p></li>
<li class="current"><p><span>3</span>完了</p></li>
</ul>

<h2>完了画面</h2>

<p>お申込みありがとうございました。<br>
詳細は登録していただいたメールアドレスに返信していますので、ご確認下さい。</p>

</div><!-- /.container -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

</body>
</html>