装飾テキスト

■設定サンプル
https://www.nishishi.com/javascript-tips/radio-text-display.html

■データダウンロード
downlord

■修正済データ
downlord

ありがとうページ

送信が正常に完了しました。 3営業日以内に担当が確認後折り返しご連絡させて頂きます。 返信がない場合はお手数ですが、お電話か再度メールを下さいますようよろしくお願い致します。

住所自動入力

<script src="https://ajaxzip3.github.io/ajaxzip3.js" charset="UTF-8"></script>


<tr>
<th>郵便番号（半角）<span class="hissu">必須</span></th>
<td><input type="text" name="郵便番号" maxlength="8" class="col4 required" onkeyup="AjaxZip3.zip2addr(this,'','ご住所','ご住所');"><br><span class="rei">※ハイフンなし、半角数字7ケタ<br><a href="https://www.post.japanpost.jp/zipcode/index.html" target="_blank" rel="noopener noreferrer">郵便番号が分からないときは</a></span></td>
</tr>
<tr>
<th>ご住所<span class="hissu">必須</span></th>
<td><input class="col2 required" type="text" name="ご住所"><br><span class="rei">例）大阪府大阪市〇〇〇〇－〇－〇</span></td>
</tr>

確認ボタンとリセットボタンの間の余白はスペースなので、スペースを消してあげる

【 HTML 】

<div id="formWrap">
<form method="post" action="https://utatane.pro/wp-content/plugins/my-snow-monkey/php/mail.php">
<table>
<tbody><tr>
<th>お問い合わせ項目を選択</th>
<td><select name="お問い合わせ項目">
	<option value="">選択してください</option>
	<option value="訪問ペット葬儀">訪問ペット葬儀</option>
	<option value="ペット霊園葬儀">ペット霊園葬儀</option>
	<option value="粉骨パウダー加工">粉骨パウダー加工</option>
	<option value="その他">その他</option>
</select></td>
</tr>
<tr>
<th>お名前<span class="hissu">必須</span></th>
<td><input class="col1 required" type="text" name="お名前"><br><span class="rei">例）志村　けん太郎</span></td>
</tr>
<tr>
<th>住所<span class="hissu ">必須</span></th>
<td><input class="col2 required" type="text" name="住所"><br><span class="rei">例）大阪府大阪市〇〇〇〇－〇－〇</span></td>
</tr>
<tr>
<th>電話番号（半角）</th>
<td><input class="col1" type="text" name="電話番号"><br><span class="rei">※必ず連絡が取れる電話番号をお願い致します。<br>例）080-〇〇〇〇－〇〇〇〇</span></td>
</tr>
<tr>
	<th>メールアドレス（半角）<span class="hissu">必須</span></th>
	<td><input class="col1 required" type="text" name="Email"></td>
</tr>
</tbody></table>


<h3 class="titledeco1">ペット葬儀事前予約情報</h3>
<p>以下のペットちゃんに関する情報はお電話でお客様に聞きしている内容です。</p>
<table>
<tbody><tr>
<th>ペットの種類</th>
<td><input class="col1" type="text" name="ペットの種類"></td>
</tr>
<tr>
<th>体重</th>
<td><input class="col3" type="text" name="体重"> kg</td>
</tr>
<tr>
<th>体長<br></th>
<td><input class="col3" type="text" name="体長"> cm<br><span class="rei">頭から尻尾を除いたお尻までの長さ</span></td>
</tr>
<tr>
<th>性別</th>
<td>
	<input type="radio" name="性別" value="男の子"> 男の子　
	<input type="radio" name="性別" value="女の子"> 女の子　
	<input type="radio" name="性別" value="不明"> 不明　
</td>
</tr>
<tr>
<th>年齢</th>
<td><input class="col3" type="text" name="体重"> 歳</td>
</tr>
<tr>
<th>命日</th>
<td><input class="col1" type="text" name="命日"><br><span class="rei">亡くなった日<br>例）令和〇〇年〇〇月〇〇日</span></td>
</tr>
<tr>
	<th>お問い合わせ内容<span class="hissu">必須</span></th>
	<td><textarea name="お問い合わせ内容" class="required"></textarea></td>
</tr>
</tbody></table>
<p align="center"><input type="submit" value="　 確　認 　"><input type="reset" value="リセット"></p>
</form>
</div>


【 CSS 】

/*--------------------
メール装飾：スタンダード
---------------------*/
#formWrap table {
	width:100%!important;
	font-size:90%!important;
	margin-bottom:20px;
}
#formWrap table th{
	width:30%;
	background-color:#146789;
	color:#FFFFFF;
	padding:10px 5px;
}
#formWrap table td{
	background-color:#f4f4f4;
	padding:10px 5px;
}
.rei{font-size:85%; color:#777777;}
.hissu{
	background-color:#F00;
	color:#FFFFFF;
	border-radius:3px;
	padding:0px 5px;
	margin-left:5px;
	font-size:70%;
}
#formWrap table textarea{
	width:100%;
	height:300px;
}
#formWrap p{margin-top:20px; margin-bottom:20px;}
#formWrap input[type="submit"]{
	width:180px;
	background-color:#d30000;
	border:solid 1px #d30000;
	border-radius:3px;
	color:#FFFFFF;
	padding:10px 10px;
	margin:10px;
}
#formWrap input[type="reset"]{
	width:180px;
	background-color:#bfbfbf;
	border:solid 1px #bfbfbf;
	border-radius:3px;
	color:#FFFFFF;
	padding:10px 10px;
	margin:10px;
}

@media screen and (min-width: 482px) {
.col1{width:60%;}
.col2{width:90%;}
.col3{width:10%;}
}
@media screen and (max-width: 481px)  {
#formWrap table th{
	width:30%;
	font-size:70%;
}
.col1{width:100%;}
.col2{width:100%;}
.col3{width:30%;}
}

/*フォーカス*/
#formWrap input:focus, select:focus, textarea:focus {
	background-color: #ffffe4;
	border:solid 2px #000000;
	border-radius:3px;
}
#formWrap .required{
	background-color: #ffeeee;
	border:solid 2px #000000;
}

文字認証タイプ

if(!isset($_POST["認証文字"]) || $_POST["認証文字"] != "インターセプター") exit("認証文字が一致しません");


【 HTML 】

<div id="formWrap">
<p>下記フォームに必要事項を入力後、確認ボタンを押してください。<br /><span class="hissu">*</span>は必須項目です。</p>
<form method="post" action="https://intcpt.com/form/mail.php">
<table>
	<tr>
		<th>お名前<span class="hissu">*</span></th>
		<td><input class="col1 required" type="text" name="お名前" required><br><span class="rei">例：東京花子</span></td>
	</tr>
	<tr>
		<th>フリガナ<span class="hissu">*</span></th>
		<td><input class="col1 required" type="text" name="フリガナ" required><br><span class="rei">例：トウキョウハナコ</span></td>
	</tr>
	<tr>
		<th>会社名</th>
		<td><input class="col2" type="text" name="会社名"></td>
	</tr>
	<tr>
		<th>メールアドレス（半角）<span class="hissu">*</span></th>
		<td><input class="col1 required" type="text" name="Email" required></td>
	</tr>
	<tr>
		<th>電話番号（半角）<span class="hissu">*</span></th>
		<td><input class="col1 required" type="text" name="電話番号" required></td>
	</tr>
	<tr>
		<th>お問い合わせ内容</th>
		<td><textarea name="お問い合わせ内容"></textarea></td>
	</tr>
<tr>
		<th>「インターセプター」と入力下さい<span class="hissu">*</span></th>
		<td><input class="col1 required" type="text" name="認証文字" required /><br /><span class="rei">※スパム防止の為　<span class="red">インターセプター</span>　と入力してください。</span></td>
	 </tr>
</table>
<p align="center"><input type="submit" value="　 確　認 　"><input type="reset" value="リセット"></p>
</form>
</div>
<p>※IPアドレスを記録しております。いたずらや嫌がらせ等はご遠慮ください。</p>



【 CSS 】

#formWrap table{
	width:100%;
	font-size:90%;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	border-collapse:collapse;
	border-top:1px solid #808080;
	empty-cells:show;
}
#formWrap table th{
	width:30%;
	border-bottom:1px solid #808080;
	background-color:#FFFFFF;
	padding:20px 10px;
	text-align:center;
}
#formWrap table td{
	border-bottom:1px solid #808080;
	padding:20px 10px;
	text-align:left;
}

#formWrap table textarea {
	border:solid 1px #EEEEEE;
	border-radius:6px;
	width:100%;
	height:300px;
	background-color:#EEEEEE;
}

input[type="text"], input[type="email"]{
	border:solid 1px #EEEEEE;
	border-radius:6px;
	height:30px;
	background-color:#EEEEEE;
}

input[type="submit"]{
	width:250px;
	height:60px;
	background: linear-gradient(-135deg, #a40000, #e90000);
	font-size:1.2em;
	color:#FFFFFF;
	border:solid 1px #e90000;
	border-radius:10px;
	margin:20px 10px 0px 10px;
}
input[type="reset"]{
	width:250px;
	height:60px;
	background-color:#CCCCCC;
	font-size:1.2em;
	color:#FFFFFF;
	border:solid 1px #CCCCCC;
	border-radius:10px;
	margin:20px 10px 0px 10px;
}
@media screen and (min-width: 482px) {
.col1{width:60%;}
.col2{width:90%;}
.col3{width:10%;}
}
@media screen and (max-width: 481px)  {
#formWrap table th{
	width:30%;
	font-size:70%;
}
.contactTB{width:98%; margin-left:auto; margin-right:auto;}
.col1{width:100%;}
.col2{width:100%;}
.col3{width:30%;}
}
.rei{font-size:85%; color:#777777;}
.hissu{
	color:#FF0000;
	font-size:1.2em;
	padding-left:5px;
}

#formWrap .required{
	background-color: #ffeeee;
}

◆修正版　縦一列

/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

メールフォーム

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
#formWrap table{
	width:100%;
	font-size:90%;
	max-width:100%;
	margin-left:auto;
	margin-right:auto;
	border-collapse:collapse;
	border-top:1px solid #808080;
	empty-cells:show;
}
#formWrap table textarea {
	border:solid 1px #EEEEEE;
	border-radius:6px;
	width:100%;
	height:300px;
	background-color:#EEEEEE;
}
input[type="text"], input[type="email"]{
	border:solid 1px #EEEEEE;
	border-radius:6px;
	height:30px;
	background-color:#EEEEEE;
}
input[type="submit"]{
	width:250px;
	height:60px;
	background: linear-gradient(-135deg, #a40000, #e90000);
	font-size:1.2em;
	color:#FFFFFF;
	border:solid 1px #e90000;
	border-radius:10px;
	margin:20px 10px 0px 10px;
}
input[type="reset"]{
	width:250px;
	height:60px;
	background-color:#CCCCCC;
	font-size:1.2em;
	color:#FFFFFF;
	border:solid 1px #CCCCCC;
	border-radius:10px;
	margin:20px 10px 0px 10px;
}
@media screen and (min-width: 482px) {
#formWrap table th{
	width:30%;
	border-bottom:1px solid #808080;
	background-color:#FFFFFF;
	padding:20px 10px;
	text-align:center;
}
#formWrap table td{
	border-bottom:1px solid #808080;
	padding:20px 10px;
	text-align:left;
}
.col1{width:60%;}
.col2{width:90%;}
.col3{width:10%;}
}
@media screen and (max-width: 481px)  {
#formWrap table th, #formWrap table td{
	width:100%;
	display:block;
	text-align:left;
}
#formWrap table td{border-bottom:dotted 1px #CCCCCC; padding-bottom:10px!important;}
.contactTB{width:98%; margin-left:auto; margin-right:auto;}
.col1, #formWrap select, #formWrap table textarea{width:95%;}
.col2{width:80%;}
.col3{width:30%;}
}
.rei{font-size:85%; color:#777777;}
.hissu{
	color:#FF0000;
	font-size:1.2em;
	padding-left:5px;
}

#formWrap .required{
	background-color: #ffeeee;
}