ContactForm7 CSSデザイン

html

<table class="inquiry">
	<tr>
		<th>
			<span class="haveto">必須</span><span>お名前</span>
		</th>
		<td>
			[text* your-name class:textsp placeholder"山田　総一朗"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>メールアドレス</span>
		</th>
		<td>[email* your-email class:mailsp placeholder"[e-mail]"]</td>
	</tr>
	<tr>
		<th>
			<span class="any">任意</span><span>電話番号</span>
		</th>
		<td>
			[tel your-tel class:tel placeholder"090-1111-2222"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>ドロップダウンメニュー</span>
		</th>
		<td>
			[select* dpmenu include_blank class:drop "サンプル1" "サンプル2" "サンプル3"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="any">任意</span><span>チェックボックス横並び【１つを選択】</span>
		</th>
		<td>
			[checkbox checkbox-1 exclusive use_label_element default:1 class:check1 "サンプル4" "サンプル5" "サンプル6"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>チェックボックス横並び【複数を選択】</span>
		</th>
		<td>
			[checkbox* checkbox-2 use_label_element default:1 class:check2 "サンプル7" "サンプル8" "サンプル9"]</td>
	</tr>
	<tr>
		<th>
			<span class="any">任意</span><span>チェックボックス縦並び【１つを選択】</span>
		</th>
		<td>
			[checkbox checkbox-3 exclusive use_label_element default:1 class:verticallist class:check3 "サンプル10" "サンプル11" "サンプル12"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>チェックボックス縦並び【複数を選択】</span>
		</th>
		<td>
			[checkbox* checkbox-4 use_label_element default:1 class:verticallist class:check4 "サンプル13" "サンプル14" "サンプル15"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="any">任意</span><span>ラジオボタン横並び</span>
		</th>
		<td>
			[radio radio-1 use_label_element default:1 class:radio1 "サンプル16""サンプル17""サンプル18"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>ラジオボタン縦並び</span>
		</th>
		<td>
			[radio radio-2 use_label_element default:1 class:verticallist class:radio2 "サンプル19""サンプル20""サンプル21"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="any">任意</span><span>数値のスピン形式</span>
		</th>
		<td>
			[number number-1 min:10 max:100 placeholder class:number1 "数値の値は指定できる"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>日付</span>
		</th>
		<td>
			[date* date-960 placeholder class:datesp ]
		</td>
	</tr>
	<tr>
		<th>
			<span class="any">任意</span><span>１行で収まる回答形式</span>
		</th>
		<td>
			[quiz quiz-1 class:qyizsp "例：職業"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>郵便番号</span>
		</th>
		<td>
			[text* your-postalcode class:p-postal-code placeholder"123-4567"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>都道府県</span>
		</th>
		<td>
			[text* your-prefectures class:p-region placeholder"◯◯県"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>ご住所</span>
		</th>
		<td>
			[text* your-address class:p-locality placeholder"○○市○○1-2-3 ○○マンション 101号室"]
		</td>
	</tr>
	<tr>
		<th>
			<span class="haveto">必須</span><span>お問い合わせ内容</span>
		</th>
		<td>
			[textarea* your-message class:content placeholder "１行以上のテキスト入力欄"]
		</td>
	</tr>
</table>
<div class="form-btn">[confirm id:formbtn1 "確認"][back id:formbtn2 "戻る"][submit id:formbtn3 "送信"]</div>

css

@media(max-width:1000px) {
	.inquiry th,
	.inquiry td {
		-webkit-box-sizing: border-box !important;
		-moz-box-sizing: border-box !important;
		box-sizing: border-box !important;
		border-top: none !important;
		display: block !important;
		width: 100% !important;
	}
	.inquiry tr:first-child th {
		border-top: 1px solid #d7d7d7 !important;
	}
	/* 必須・任意のサイズ調整 */
	.inquiry .haveto,
	.inquiry .any {
		font-size: 10px;
	}
}
.inquiry {
	width: 100%;
}
.inquiry th {
	background: #f7f7f7;
	border: solid 1px #d7d7d7;
	color: #444;
	font-size: 14px;
	text-align: left;
	padding-right: 5px;
	vertical-align: middle;
	width: 35%;
}
.inquiry td {
	border: solid 1px #d7d7d7;
	font-size: 13px;
}
/*横の行とテーブル全体*/
.entry-content .inquiry tr,
.entry-content table {
	border: solid 1px #d7d7d7;
}
/*必須の調整*/
.haveto {
	background: #ff9393;
	border-radius: 2px;
	bottom: 1px;
	color: #fff;
	font-size: 7px;
	margin-right: 5px;
	padding: 5px;
	position: relative;
}
/*任意の調整*/
.any {
	background: #93c9ff;
	border-radius: 2px;
	bottom: 1px;
	color: #fff;
	font-size: 7px;
	margin-right: 5px;
	padding: 5px;
	position: relative;
}
/*ラジオボタンを縦並び指定*/
.verticallist .wpcf7-list-item {
	display: block;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="url"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="number"],
.wpcf7 input[type="date"],
.wpcf7 textarea,
.wpcf7 select {
	border: 3px solid #d7d7d7;
	padding: 10px;
	width: 100%;
}
/*送信ボタンのデザイン変更*/
# formbtn1,
# formbtn2,
# formbtn3 {
	background: #93C9FF;
	border: none;
	border-radius: 2px;
	color: #fff;
	cursor: pointer;
	font-size: 18px;
	margin: 0 20px;
	padding: 10px 0;
	width: 20%;
}
# formbtn1 {
	background: #93C9FF;
}
# formbtn2 {
	background: #FF9393;
}
# formbtn3 {
	background: #9ACD32;
}
.form-btn {
	margin-top: 70px;
	text-align: center;
	width: 100%;
}