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

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

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

１カラム

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

<p>[submit "送信する"]</p>

２カラム

<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>

CSSでの「行間」と「必須項目」設定

「必須」の文字：赤、背景：白

.contact-table td {
  padding-bottom: 16px;
  line-height: 1.8;
}

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

※参考：フォーム内

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

受信フォーム（コピペ用）

名前: [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にする

reCAPTHA 設定

reCAPTHA キーの取得

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

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

②Contact form 7の設定

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