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

Posted 2021-05-13

<table class="base-table contact-table">
		<tr>
			<th>会社名</th>
			<td><input name="company" type="text"></td>
		</tr>
		<tr>
			<th>担当者指名<span class="must">必須</span></th>
			<td><input name="name" type="text"></td>
		</tr>
		<tr>
			<th>メールアドレス<span class="must">必須</span></th>
			<td><input name="mailad" type="text"></td>
		</tr>
		<tr>
			<th>住所</th>
			<td><input name="address" type="text"></td>
		</tr>
		<tr>
			<th>TEL<span class="must">必須</span></th>
			<td><input name="tel" type="text"></td>
		</tr>
        <tr>
			<th>お問い合わせ内容<span class="must">必須</span></th>
			<td><textarea name="mess" cols="" rows=""></textarea></td>
		</tr>
	</table>
	<p class="btn"><input type="submit" value="送信する"></p>

.base-table {
    width: 100%;
	border-top: 1px solid #bcbcbc;
}

.base-table th {
    padding: 25px 30px;
    text-align: left;
	letter-spacing: 0.06em;
    width: 200px;
	background: #f0f9ff;
}

.base-table td {
    padding: 20px 30px;
}

.contact-table .must {
    color: #fff;
	font-size: 1.4rem;
    background-color: #e61616;
    padding: 2px 9px;
    border-radius: 5px;
    float: right;
}

.contact-table tr {
	border-bottom: 1px solid #bcbcbc;
}

.contact-table td input[type="text"] {
  	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
font-size: 1.6rem;
    height: 30px;
    width: 100%;
	box-sizing: border-box;
	background: #ebebeb;
	border: none;
	border-radius: 5px;
}

.contact-table td textarea {
	font-family: 'メイリオ',Meiryo,'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','ＭＳ Ｐゴシック',sans-serif;
	font-size: 1.6rem;
    height: 270px;
    width: 100%;
	background: #ebebeb;
	border: none;
	border-radius: 5px;
	box-sizing: border-box;
}

.contact_text {
	vertical-align: top;
}

.btn {
    text-align: center;
    margin-top: 30px;
}

input[type="submit"] {
	font-size: 1.6rem;
    background: -moz-linear-gradient(#f7fbfc, #cbcbcb);
    background: -webkit-linear-gradient(#f7fbfc, #cbcbcb);
    background: linear-gradient(#f7fbfc, #cbcbcb);
    background-color: transparent;
    border-radius: 5px;
    cursor: pointer;
    padding: 7px 27px 6px 27px;
    border: 1px solid #c3c3c3;
}

opacity: 0.7;
    text-decoration: none;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition: 0.3s ease-in-out;
    -o-transition: 0.3s ease-in-out;
    transition: 0.3s ease-in-out;