お問合せフォームの作成｜3月18日の作業

webサイト制作



入力画面
index.html

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームの作成｜入力画面</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>お問合せフォーム</h1>
<h2><img src="img/step-1.svg" alt=""></h2>
<form id="g-form" action="confirm.php" method="post">
<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" name="gender" value="男性" checked id="male">男性</label>

<label for="female"><input type="radio" name="gender" value="女性" id="female">女性</label>

<label for="other">
<input type="radio" name="gender" value="どちらでもない" id="other">どちらでもない</label>
</dd>

<dt>好きな食べ物<span>複数選択可</span></dt>
<dd>
<label for="food_1"><input type="checkbox" name="food[]" value="お寿司" id="food_1">お寿司</label>
<label for="food_2"><input type="checkbox" name="food[]" value="鰻重" id="food_2">鰻重</label>
<label for="food_3"><input type="checkbox" name="food[]" value="鴨南蛮" id="food_3">鴨南蛮</label>
<label for="food_4"><input type="checkbox" name="food[]" value="カレーライス" 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="pref" placeholder="都道府県">
<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">
<input type="submit" value="確認画面へ">
</div>
</form>
</body>
</html>


確認画面

<?php
$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 charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>フォームの作成｜確認画面</title>
</head>
<body>
<h1>お問合せフォーム</h1>
<h2>画像</h2>
<form action="" method="post">
<dl>
<dt>お名前</dt>
<dd>
<?php echo $name; ?>
</dd>
<dt>メールアドレス</dt>
<dd><?php echo $email; ?></dd>
<dt>性別</dt>
<dd><?php echo $gender; ?></dd>

<dt>好きな食べ物<span>複数選択可</span></dt>
<dd><?php echo $food; ?></dd>
<dt>郵便番号</dt>
<dd><?php echo $zip; ?></dd>
<dt>住所</dt>
<dd>
<?php echo $pref; ?><br>
<?php echo $address; ?>
</dd>
</dl>

<div class="btn-wrapper">
<input type="submit" value="送信">
<input type="button" value="入力画面に戻る">
</div>
</form>
</body>
</html>

スタイルシート

@charset "utf-8";
html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}

h1{
text-align: center;
margin: 30px 0 20px;
}
h2{
max-width: 680px;
margin: 0 auto 60px;
}
#g-form{
max-width: 800px;
margin: 0 auto 100px;
padding: 0 10px;
}
.form-list{
display: flex;
flex-wrap: wrap;
border: 1px solid #5f5f5f;
margin-bottom: 100px;
}
.form-list>dt{
width: 30%;
padding: 20px;
background-color: #cdf0c9;
border-right: 1px solid #5f5f5f;
}
.form-list span{
font-size: 12px;
background-color: #c5173a;
padding: 4px;
color: #FFF;
margin-left:10px;
}
.form-list>dd{
width: 70%;
padding: 20px;
background-color: #f3f3f3;
}
.form-list>dt:nth-of-type(n+2),.form-list>dd:nth-of-type(n+2){
border-top: 1px solid #5f5f5f;
}
[type="text"],[type="email"]{
width: 60%;
background-color: #FFF;
border: 1px solid #222;
padding: 6px 4px;
}
[type="radio"],[type="checkbox"]{
margin-right: 8px;
transform: scale(1.5);
}
label{
margin-right: 20px;
}
.zip>input{
width: 30%;
}
[name="pref"]{
margin-bottom: 20px;
}
.policy{
max-width: 800px;
margin-bottom:30px;
}
.policy h3{
text-align: center;
font-size: 26px;
margin: 30px 0 20px;
}
.policy p{
line-height: 1.8;
}
.policy-inner{
height: 300px;
border: 2px solid #AAA;
padding: 20px;
overflow-y: scroll;
}
[for="policy-check"]{
background-color: #cccccc;
padding: 20px;
display: block;
}
.btn-wrapper{
width: 260px;
margin: 40px auto;
position: relative;
border: 2px solid #c5173a;
border-radius: 12px;
overflow: hidden;
}
.btn-wrapper::after{
display: block;
content: "";
width: 100%;
height: 200%;
background-color: #c5173a;
position: absolute;
transform: rotate(-40deg);
top: -60px;
left: -140px;
z-index: 1;
transition: 0.2s;
}
.btn-wrapper:hover::after{
transform: scale(2.5);
}
[type="submit"]{
display: block;
width: 100%;
padding: 10px 0;
position: relative;
z-index: 2;
color: #000;
}
.btn-wrapper:hover>[type="submit"]{
color: #FFF;
}