「Contact form 7」のカスタマイズ | コピペでWordPressカスタマイズ（備忘録）

reCAPTHA 設定

reCAPTHA キーの取得

①以下のサイトから「サイトキー」と「シークレットキー」を取得

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

②Contact form 7の設定

「お問い合わせ」→「インテグレーション」→「reCAPTHA」に、①のキーをコピペ

「必須項目」のデザイン

フォーム内

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

CSSの例①　文字：赤、背景：白

span.required {
	border-radius: 3px;
	color: #b70000;
	background-color: #fff;
	border:1px solid #b70000;
	padding: 0 5px;
	margin-left:10px;
}

CSSの例②　右寄せで、文字：白、背景：赤

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

フォームデザインを表にする

Contact form 7 のフォームに以下を記入

１カラム

<table border="0" style="border-collapse: collapse; width: 100%;">
<tbody>
<tr>
<td style="width: 100%;">お名前<span class="required">必須</span><br />[text* your-name]</td>
</tr>
<tr>
<td style="width: 100%;">メールアドレス<span class="required">必須</span><br />[email* your-email]</td>
</tr>
<tr>
<td style="width: 100%;">電話番号<br />[tel* your-tel]</td>
</tr>
<tr>
<td style="width: 100%;">件名<br />[text your-subject]</td>
</tr>
<tr>
<td style="width: 100%;">お問い合わせ内容<br />[textarea your-message]</td>
</tr>
</tbody>
</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>

受信フォーム

名前: [your-name]
メールアドレス： [your-email]
電話番号：[your-tel]
件名: [your-subject]

メッセージ本文:
[your-message]

送信ボタンの装飾

input[type=submit] {
	background: #448AFF;
	color:#fff;
	border: 0;
	width: 200px;
	height: 50px;
	display: block;
	margin-top: 20px;
}

.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%;
}

サンクスページ

submit “送信”の下に以下を追記
※「http://sample.com/thanks/」の部分を変更

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'http://sample.com/thanks/';
}, false );
</script>

ラジオボタンの初期値を「なし」にする

default:1を0にする