お問合せフォームの作成| 3月19日の作業
入力画面
index.html
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title>フォームの作成|入力画面</title>
</head>
<body>
<h1>お問合せフォーム</h1>
<dl class="form-list">
<dt>お名前<span>必須</span></dt>
<dd><input type="text" name="onamae"
required placeholder="お名前を入力し て下さい"
autocomplete="a">
</dd>
<dt>メールアドレス<span>必須</span></dt>
<dd><input type="email" name="email"
required placeholder="メールアドレスを 入力して下さい"
autocomplete="email">
</dd>
<dt>性別<span class="any">任意</span></dt>
<dd class="gender">
<label for="male"><input type="radio"
<label for="female"><input type="radio"
<label for="other">
id="other">どちらで もない</label>
</dd>
<dt>好きな食べ物<span>複数選択可</span></dt>
<dd>
<label for="food_1"><input type="checkbox"
id="food_1">お寿司</label>
<label for="food_2"><input type="checkbox"
id="food_2">鰻重</label>
<label for="food_3"><input type="checkbox"
id="food_3">鴨南蛮</label>
<label for="food_4"><input type="checkbox"
ス" id="food_4">カレーライス</label>
</dd>
<dt>郵便番号</dt>
<dd class="zip"><input type="text" name="zip"
size="8" placeholder="例:1234567">
</dd>
<dt>住所</dt>
<dd>
<input type="text" name="address" placeholder="市区町村">
</dd>
</dl>
<div class="policy">
<div class="policy-inner">
<h3>プライバシーポリシー</h3> <p>________(以下，「当社」といいます。)は，
本ウェブサイト上で提供する サービス(以下,「本サービス」といいます。)における，
ユーザーの個人情報の取扱いに ついて，
以下のとおりプライバシーポリシー(以下，「本ポリシー」といいます。)を定めます。
第 1 条(個人情報) 「個人情報」とは，個人情報保護法にいう「個人情報」を
指すものとし，生存する個人に 関する情報であって，
当該情報に含まれる氏名，生年月日，住所，電話番号，連絡先その他の記述等により
特定の個人を識別できる情報及び容貌，指紋，声紋にかかるデータ，及び健康保険証の
保険者番号などの当該情報単体から特定の個人を
識別できる情報(個人識 別情報)を指します。
第 2 条(個人情報の収集方法) 当社は，ユーザーが利用登録をする際に
氏名，生年月日，住所，電話番号，メールアドレス，銀行口座番号，クレジットカード番号，
運転免許証番号などの個人情報をお尋ねすることがあります。
また，ユーザーと提携先などとの間でなされたユーザーの個人情報を含む取引記録や
決済に関する情報を,当社の提携先(情報提供元，広告主，広告配信先などを含みます。
以下，「 提携先 」 といいます。)などから収集することがあります。
第 3 条(個人情報を収集・利用する目的) 当社が個人情報を収集・利用する目的は，
以下のとおりです。
当社サービスの提供・運営のため ユーザーからのお問い合わせに回答するため
(本人確認を行うことを含む) ユーザーが利用中のサービスの新機能，更新情報，
キャンペーン等及び当社が提供する他 のサービスの案内のメールを送付するため
メンテナンス，重要なお知らせなど必要に応じたご連絡のため
利用規約に違反したユーザーや，不正・不当な目的でサービスを
利用しようとするユーザーの特定をし，ご利用をお断りするため
ユーザーにご自身の登録情報の閲覧や変更，削除，ご利用状況の閲覧を行っていただくため
有料サービスにおいて，ユーザーに利用料金を請求するため
上記の利用目的に付随する目的
第 4 条(利用目的の変更) 当社は，利用目的が変更前と関連性を有すると
合理的に認められる場合に限り，個人情報 の利用目的を変更するものとします。
利用目的の変更を行った場合には，変更後の目的について，当社所定の方法により，
ユー ザーに通知し，または本ウェブサイト上に公表するものとします。
第 5 条(個人情報の第三者提供) 当社は，次に掲げる場合を除いて，
あらかじめユーザーの同意を得ることなく，第三者に 個人情報を提供することはありません。
ただし，個人情報保護法その他の法令で認められる場合を除きます。
人の生命，身体または財産の保護のために必要がある場合であって，
本人の同意を得るこ とが困難であるとき 公衆衛生の向上または児童の健全な育成の
推進のために特に必要がある場合であって，本 人の同意を得ることが困難であるとき
国の機関もしくは地方公共団体またはその委託を受けた者が法令の定める事務を遂行する
ことに対して協力する必要がある場合であって，本人の同意を得ることにより当該事務の
遂行に支障を及ぼすおそれがあるとき 予め次の事項を告知あるいは公表し，
第三者に提供されるデータの項目
提供を停止すること 本人の求めを受け付ける方法 前項の定めにかかわらず，
次に掲げる場合には，当該情報の提供先は第三者に該当しない ものとします。
当社が利用目的の達成に必要な範囲内において個人情報の取扱いの
全部または一部を委託する場合
合併その他の事由による事業の承継に伴って個人情報が提供される場合
個人情報を特定の者との間で共同して利用する場合であって，その旨並びに共同して
利用される個人情報の項目，共同して利用する者の範囲，
利用する者の利用目的および当該個 人情報の管理について責任を有する者の
氏名または名称について，あらかじめ本人に通知し，
または本人が容易に知り得る状態に置いた場合
第 6 条(個人情報の開示) 当社は，本人から個人情報の開示を求められたときは，
本人に対し，遅滞なくこれを開示 します。ただし，開示することにより
次のいずれかに該当する場合は，その全部または一 部を開示しないこともあり，
開示しない決定をした場合には，その旨を遅滞なく通知します。
なお，個人情報の開示に際しては，1 件あたり 1，000 円の手数料を申し受けます。
本人または第三者の生命，身体，財産その他の権利利益を害するおそれがある場合
当社の業務の適正な実施に著しい支障を及ぼすおそれがある場合
その他法令に違反することとなる場合 前項の定めにかかわらず，
履歴情報および特性情報などの個人情報以外の情報については，
原則として開示いたしません。
第 7 条(個人情報の訂正および削除) ユーザーは，当社の保有する自己の個人情報が
誤った情報である場合には，当社が定める 手続きにより，当社に対して個人情報の訂正，
追加または削除(以下，「訂正等」といい ます。)を請求することができます。
当社は，ユーザーから前項の請求を受けてその請求に応じる必要があると
判断した場合には，遅滞なく，当該個人情報の訂正等を行うものとします。
当社は，前項の規定に基づき訂正等を行った場合，または訂正等を行わない旨の
決定をしたときは遅滞なく，これをユーザーに通知します。
第 8 条(個人情報の利用停止等) 当社は，本人から，個人情報が，
利用目的の範囲を超えて取り扱われているという理由，
または不正の手段により取得されたものであるという理由により，
その利用の停止または 消去(以下，「利用停止等」といいます。)
を求められた場合には，遅滞なく必要な調査 を行います。
前項の調査結果に基づき，その請求に応じる必要があると判断した場合には，遅滞なく，
当該個人情報の利用停止等を行います。 当社は，前項の規定に基づき
利用停止等を行った場合，または利用停止等を行わない旨の 決定をしたときは，
遅滞なく，これをユーザーに通知します。
前 2 項にかかわらず，利用停止等に多額の費用を有する場合
その他利用停止等を行うこと が困難な場合であって，
ユーザーの権利利益を保護するために必要なこれに代わるべき措置をとれる場合は，
この代替策を講じるものとします。
第 9 条(プライバシーポリシーの変更) 本ポリシーの内容は，
法令その他本ポリシーに別段の定めのある事項を除いて，
ユーザー に通知することなく，変更することができるものとします。
当社が別途定める場合を除いて，変更後のプライバシーポリシーは，
本ウェブサイトに掲載したときから効力を生じるものとします。
第 10 条(お問い合わせ窓口) 本ポリシーに関するお問い合わせは，
下記の窓口までお願いいたします。
住所:
社名:
担当部署:
E メールアドレス:
</p>
</div>
</div><!-- /.policy -->
<label for="policy-check">
<input type="checkbox" name="policy" id="policy-check"
required>プライバシ ーポリシーを確認し、同意します。
</label>
<div class="btn-wrapper">
</div>
</form>
</body>
</html>
確認画面
<?php
<?php
//$_POST["onamae"]の値が空だったら
Location で指定しているファイル (入力画面) に
移動させる if(!(isset($_POST["onamae"]))){
header('Location:index.html'); exit;
$name = htmlspecialchars($_POST["onamae"],ENT_QUOTES);
$email =htmlspecialchars($_POST["email"],ENT_QUOTES);
$gender = $_POST["gender"];
$food = implode("、", $_POST["food"]);
$zip = htmlspecialchars($_POST["zip"],ENT_QUOTES);
$pref = htmlspecialchars($_POST["pref"],ENT_QUOTES);
$address = htmlspecialchars($_POST["address"],ENT_QUOTES);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0"> <title>フォームの作成|確認画面</title>
</head>
<body>
<h1>お問合せフォーム</h1>
<form id="g-form" action="ここにGoogleFormのURL" method="post">
<dl class="form-list">
<dt>お名前</dt>
<dd>
</dd>
<dt>メールアドレス</dt>
<dt>性別</dt>
<dt>郵便番号</dt>
<dt>住所</dt>
<dd>
</dd>
</dl>
<!-- データをgoogleに送信する -->
<div class="btn-wrapper">
</div>
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/
<script>
$(function(){
$('#g-form').submit(function (event) {
var formData = $('#g-form').serialize();
url: "ここにGoogleFormのURL",
data: formData,
type: "POST",
statusCode: { 0: function(){
window.location.href = "thanks.html";
},
200: function(){
// 失敗したときの処理
} }
});
//googleform へのページ遷移をキャンセル
event.preventDefault();
});
});
</script>
</body>
</html>*1
*1:ここに脚注を書きます
