コピペで使えるお問合せフォーム例_技術三昧ブログ

ホーム » ブログ » コピペで使えるお問合せフォーム例

@2018/05/11

今後に自分のホームページに導入予定のため、ここでメモする。
コピペで使える。

<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>サンプル</title>
<meta name="Description" content="" />
<meta name="Keywords" content="" />

<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css">
body {
	width: 100%;
	margin: 0;
	padding: 0;
}
.Contents {
	width:100%;
	padding:0 2%;
	box-sizing: border-box;
}
@media screen and (max-width:980) {
	.Contents {
		padding:0 1%;
	}
}

.TableBlock {
	color:#555;
	line-height:120%;
	font-size:90%;
}

table.Table{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
	box-sizing: border-box;
}
table.Table td,
table.Table th{
	border:1px solid #ccc;
	padding:10px;
}
table.Table th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

.TableTtl {
	
}
</style>
</head>
<body>
<div class="Contents">
	<div id="tableBlock" Class="TableBlock">
	  <h3 class="TableTtl">お問い合わせ</h3>
	  <p>下記フォームに必要事項を入力後、確認ボタンを押してください。</p>
	  <form method="post" action="mail.php">
	    <table class="Table">
	      <tr>
	        <th>ご用件</th>
	        <td><select name="ご用件">
	            <option value="">選択してください</option>
	            <option value="ご質問・お問い合わせ">ご質問・お問い合わせ</option>
	            <option value="リンクについて">リンクについて</option>
	          </select></td>
	      </tr>
	      <tr>
	        <th rowspan="2">お名前</th>
	        <td><input size="15" type="text" name="カタカナ" /> ※必須</td>
	      </tr>
	      <tr>
	        <td><input size="15" type="text" name="お名前" /> ※必須</td>
	      </tr>
	      <tr>
	        <th>電話番号（半角）</th>
	        <td><input size="25" type="text" name="電話番号" /></td>
	      </tr>
	      <tr>
	        <th>Mail（半角）</th>
	        <td><input size="25" type="text" name="Email" /> ※必須</td>
	      </tr>
	      <tr>
	        <th>性別</th>
	        <td><input type="radio" name="性別" value="男" /> 男　
	          <input type="radio" name="性別" value="女" /> 女 </td>
	      </tr>
	      <tr>
	        <th>サイトを知ったきっかけ</th>
	        <td><input name="サイトを知ったきっかけ[]" type="checkbox" value="友人・知人" /> 友人・知人　
	          <input name="サイトを知ったきっかけ[]" type="checkbox" value="検索エンジン" /> 検索エンジン</td>
	      </tr>
	      <tr>
	        <th>お問い合わせ内容<br /></th>
	        <td><textarea name="お問い合わせ内容" cols="30" rows="5"></textarea></td>
	      </tr>
	    </table>
	    <p align="center">
	      <input type="submit" value="　 確認 　" />　
	      <input type="reset" value="リセット" />
	    </p>
	  </form>
	  <p>※IPアドレスを記録しております。いたずらや嫌がらせ等はご遠慮ください</p>
	</div>
</div>
</body>
</html>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。

1人

★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

閲覧履歴(直近10件)

◎zanmai.netサイト記事の転載・複製（コピー）は、zanmai.netへのリンクであることを明記してください！
◎本記事URL: https://www.zanmai.net/blog/data/286.html

閉じる

コピペで使えるお問合せフォーム例_ブログ_zanmai.net

※会員の方は認証コードを要らないから、新規登録をオススメ！