[wordpress]お問い合わせフォームのカスタマイズ

2020年3月8日 2020年3月8日 5分20秒

WordPressでお問い合わせフォームを作成するためのプラグイン「Contact Form 7」で作成したお問い合わせフォームのカスタマイズ例

1 お問い合わせフォームのレイアウト
2 コンタクトフォーム設定例
3 CSS設定例

お問い合わせフォームのレイアウト

「Contact Form7」で特にレイアウトをカスタマイズしないと、以下のようにシンプルなレイアウトになります。

そのままでも良いかもしれませんが、少しでも見やすく、スタイリッシュに以下のようにカスタマイズすることが可能です。

また、スパム防止用にチェックボックスも入れることが可能です。

コンタクトフォーム設定例

<table class="contact">
	<tr>
		<th><span class="haveto">必須</span><span>お名前</span></th>
		<td>[text* your-name]</td>
	</tr>
	<tr>
		<th><span class="haveto">必須</span><span>メールアドレス</span></th>
		<td>[email* your-email class:mailsp]</td>
	</tr>
	<tr>
		<th><span class="haveto">必須</span><span>題名</span></th>
		<td>[text* your-subject]</td>
	</tr>
	<tr>
		<th><span class="haveto">必須</span><span>メッセージ本文</span></th>
		<td>[textarea* your-message]</td>
	</tr>
</table>
<div style="text-align: center; padding: 15px;">
[acceptance acceptance class:spam1]スパムメール防止のため、こちらのボックスにチェックを入れてから送信してください。
[submit "上記内容で送信"]
</div>

CSS設定例

/** お問い合わせフォーム */
table.contact {
	width: 100%;
}

.contact tr:first-child th{
	border-top:1px solid #d7d7d7!important;
}

.contact th{
	text-align:left;
	font-size:14px;
	color:#444;
	padding-right:5px;
	width:30%;
	background:#f7f7f7;
	border:solid 1px #d7d7d7;
}

.contact td{
	font-size:13px;
	border:solid 1px #d7d7d7;	
}

/*必須の調整*/
.haveto{
	font-size:7px;
	padding:8px;
	background:#ff9393;
	color:#fff;
	border-radius:2px;
	margin-right:8px;
	position:relative;
	bottom:1px;
}

@media(max-width:500px){
	.contact th,.contact td {
 		display:block!important;
 		width:100%!important;
 		border-top:none!important;
 		-webkit-box-sizing:border-box!important;
 		-moz-box-sizing:border-box!important;
 		box-sizing:border-box!important;
	}
	.contact tr:first-child th{
		border-top:1px solid #d7d7d7!important;
	}
	.contact .haveto {	
		font-size:10px;
	}
}

CSSの最後の設定でレスポンシブ対応も可能です。