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

BLOG

ブログ

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>

送信ボタンの装飾

.btn-primary {
background: #17184b;
border: 0;
width: 400px;
height: 50px;
display: block;
margin: 20px auto;
}

関連記事