1. HOME
  2. ブログ
  3. TIPS
  4. 【TIPS】Contact form 7

BLOG

ブログ

TIPS

【TIPS】Contact form 7

WordPressプラグイン「Contact form 7」のカスタマイズに関するメモ

CSS記述/関連リンク

reCAPTHA キー取得

https://www.google.com/recaptcha/admin/create

「必須」項目のデザイン

【フォーム】

<span class="required">必須</span>

【CSS】

span.required {
	border-radius: 3px;
	float: right;
	color: #FFFFFF;
	background-color: #b70000;
	font-weight: bold;
	padding: 0 5px;
}

table形式

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 30%; vertical-align: top;">お名前<span class="required">必須</span></td>
<td style="width: 70%; vertical-align: top;">[text* your-name]</td>
</tr>
<tr>
<td style="width: 30%; vertical-align: top;">メールアドレス<span class="required">必須</span></td>
<td style="width: 70%; vertical-align: top;">[email* your-email]</td>
</tr>
<tr>
<td style="width: 30%; vertical-align: top;">電話番号</td>
<td style="width: 70%; vertical-align: top;">[tel your-tel]</td>
</tr>
<tr>
<td style="width: 30%; vertical-align: top;">件名</td>
<td style="width: 70%; vertical-align: top;">[text your-subject]</td>
</tr>
<tr>
<td style="width: 30%; vertical-align: top;">メッセージ内容</td>
<td style="width: 70%; vertical-align: top;">[textarea your-message]</td>
</tr>
</tbody>
</table>

送信ボタンの装飾

input[type=submit] {
	background: #E91E63;
	border: 0;
	width: 400px;
	height: 50px;
	display: block;
	margin: 20px auto;
}

.wpcf7-submit {
	font-size:1.1em;
}

入力欄の幅

.wpcf7 input[name="your-name"] {
	width: 85%;
}
.wpcf7 input[name="your-email"] {
	width: 85%;
}
.wpcf7 input[name="your-subject"] {
	width: 85%;
}
.wpcf7 textarea[name="your-message"] {
	width: 100%;
}

関連記事