お問い合わせフォーム　サンプル

Ｐｔａ

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-left">Progate</div>
<div class="header-right">
<ul>
<li>会社概要</li>
<li>採用</li>
<li class="selected">お問い合わせ</li>
</ul>
</div>
</div>

<div class="main">
<div class="contact-form">
<div class="form-title">お問い合わせ</div>
<form method="post" action="sent.php">
<div class="form-item">名前</div>
<input type="text" name="name">

<div class="form-item">年齢</div>
<select name="age">
<option value="未選択">選択してください</option>
<!-- for文を用いて6歳から100歳までをoptionで選べるようにしましょう -->
<?php
for ($i=6; $i<=100;$i++) {
echo "<option value='${i}'>${i}</option>";
}
?>
</select>

<div class="form-item">お問い合わせの種類</div>
<?php
$types = array('Progateに関するお問い合わせ', 'Progateに対する意見', '採用に関するお問い合わせ', '取材・メディア関連のお問い合わせ', '料金に関するお問い合わせ', 'その他');
?>
<!-- この下にselectタグを書いていきましょう -->
<select name=category>
<option value="未選択">選択してください</option>
<?php
foreach ($types as $type) {
echo "<option value='${type}'>${type}</option>";
}
?>

</select>

<div class="form-item">内容</div>
<textarea name="body"></textarea>

<input type="submit" value="送信">
</form>
</div>
</div>

<div class="footer">
<div class="footer-left">
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>
<div class="like-box">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FProgate%2F742679992421539&amp;show_faces=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:300px;" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>

CSS

* {
padding: 0;
margin: 0;
}

li {
list-style: none;
}

.header {
height: 65px;
border-bottom: 1px solid #dddddd ;
}

.header-left {
float: left;
padding: 10px 60px;
color: #ED7000 ;
font-size: 30px;
}

.header-right {
float: right;
color: #808080 ;
}

.header-right li {
float: left;
padding: 20px 30px;
border-left: 1px solid #dddddd ;
}

.selected {
color: #ED7000 ;
}

.main {
min-width: 800px;
}

.contact-form {
width: 70%;
margin: 60px auto;
padding: 50px;
background-color: #F5F5F5 ;
color: #333 ;
}

.form-title {
text-align: center;
margin-bottom: 30px;
font-size: 30px;
}

.form-item {
padding: 20px 0 10px 0;
font-weight: bold;
}

input[type="text"] {
width: 30%;
border: 1px solid #ccc ;
border-radius: 4px;
padding: 6px 12px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
font-size: 14px;
line-height: 1.428571429;
color: #555 ;
}

input[type="submit"] {
margin-top: 30px;
width: 30%;
border: 1px solid #5cb85c ;
border-radius: 4px;
padding: 12px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
font-size: 14px;
line-height: 1.428571429;
color: white;
background-color: #5cb85c ;
}


textarea {
width: 90%;
height: 100px;
border: 1px solid #ccc ;
border-radius: 4px;
padding: 6px 12px;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
font-size: 14px;
line-height: 1.428571429;
color: #555 ;
}

.footer {
height: 200px;
clear: left;
border-top: 1px solid #dddddd ;
}

.footer-left {
float: left;
width: 200px;
padding: 30px 100px;
}

.footer-left li {
margin-bottom: 5px;
color: #808080 ;
border-bottom: 1px dotted #808080 ;
}

.like-box {
float: left;
padding: 30px;

sent.php

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Progate</title>
<link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div class="header">
<div class="header-left">Progate</div>
<div class="header-right">
<ul>
<li>会社概要</li>
<li>採用</li>
<li class="selected">お問い合わせ</li>
</ul>
</div>
</div>

<div class="main">
<div class="display-contact">
<div class="form-title">お問い合わせいただきありがとうございます。</div>
<div class="form-title">入力内容</div>

<div class="form-item">■ 名前</div>
<?php echo $_POST['name'] ?>

<div class="form-item">■ 年齢</div>
<?php echo $_POST['age'] ?>

<div class="form-item">■ お問い合わせの種類</div>
<?php echo $_POST['category'] ?><!-- この下でcategoryを受け取りechoしましょう -->


<div class="form-item">■ 内容</div>
<?php echo $_POST['body'] ?>
</div>
</div>

<div class="footer">
<div class="footer-left">
<ul>
<li>会社概要</li>
<li>採用</li>
<li>お問い合わせ</li>
</ul>
</div>
<div class="like-box">
<iframe src="https://www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fpages%2FProgate%2F742679992421539&amp;show_faces=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:300px;" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>



この記事が気に入ったらサポートをしてみませんか？