Contact Form7をかっこよく、そして実用的にカスタマイズする【コピペで再現可】

<div class="contact-form-wrapper">
<table class="contact-table">
<tbody>
<tr>
<th><span class="required">必須</span>お問い合わせ内容</th>
<td>
<div class="checkbox-group">
<label><input type="checkbox" name="your-subject" value="サンプル１"> サンプル１</label>
<label><input type="checkbox" name="your-subject" value="サンプル２"> サンプル２</label>
<label><input type="checkbox" name="your-subject" value="サンプル３"> サンプル３</label>
<label><input type="checkbox" name="your-subject" value="サンプル４"> サンプル４</label>
<label><input type="checkbox" name="your-subject" value="サンプル５"> サンプル５</label>
</div>
</td>
</tr>
<tr>
<th><span class="required">必須</span>お名前</th>
<td><input type="text" name="your-name" placeholder="山田 太郎" required></td>
</tr>
<tr>
<th><span class="optional">任意</span>会社名</th>
<td><input type="text" name="company" placeholder="株式会社〇〇"></td>
</tr>
<tr>
<th><span class="required">必須</span>電話番号</th>
<td><input type="tel" name="your-tel" placeholder="03-1234-5678" required></td>
</tr>
<tr>
<th><span class="required">必須</span>メールアドレス</th>
<td><input type="email" name="your-email" placeholder="example@example.com" required></td>
</tr>
<tr>
<th><span class="required">必須</span>郵便番号</th>
<td><input type="text" name="zip" id="zip" placeholder="123-4567" required></td>
</tr>
<tr>
<th><span class="required">必須</span>都道府県</th>
<td><input type="text" name="pref" id="pref" placeholder="例：東京都" required></td>
</tr>
<tr>
<th><span class="required">必須</span>住所</th>
<td><input type="text" name="addr" id="addr" placeholder="都道府県以降の住所" required></td>
</tr>
<tr>
<th><span class="required">必須</span>お問い合わせ</th>
<td><textarea name="your-message" placeholder="こちらにお問い合わせ内容をご入力ください" rows="5" required></textarea></td>
</tr>
<tr>
<th><span class="required">必須</span>同意確認</th>
<td>
<label class="acceptance-label">
<input type="checkbox" name="accept-this-1" required>
<a href="プライバシーポリシーのURL" target="_blank" rel="noopener">プライバシーポリシー</a>についてご同意し、入力内容に間違いがないことを確認しました。
</label>
</td>
</tr>
</tbody>
</table>

<div class="contact-submit-btn">
<input type="submit" value="上記の内容で送信する">
</div>
</div>

ホームページより新しいお問い合わせがありました。
以下の内容をご確認ください。

-------------------------------------------------
■ お問い合わせ内容
-------------------------------------------------
・お問い合わせ項目：[your-subject]
・お名前：[your-name] 様
・会社名：[company]
・お電話番号：[your-tel]
・メールアドレス：[your-email]
・ご住所：〒[zip] [pref][addr]

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

-------------------------------------------------
※このメールはHPのお問い合わせフォームより送信されました。

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
このメールは自動返信メールです。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

[your-name] 様

この度はお問い合わせいただき、誠にありがとうございます。
ご入力いただきました内容は以下のとおりです。

2〜3日以内に担当者よりご返信させていただきますので、
今しばらくお待ちいただけますようお願い申し上げます。

万が一、数日経過しても返信がない場合は、メールが
正常に届いていない可能性がございます。
そのお手数ですが、お電話または直接メールにて
ご連絡いただけますと幸いです。

-------------------------------------------------
■ お問い合わせ内容
-------------------------------------------------
・お問い合わせ項目：[your-subject]
・お名前：[your-name] 様
・会社名：[company]
・お電話番号：[your-tel]
・メールアドレス：[your-email]
・ご住所：〒[zip] [pref][addr]
・メッセージ：
[your-message]

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
▼ここの部分の情報は書き換えて下さい。

Rhapsodie
〒570-0012
大阪府守口市大久保町2-29-1-3A
TEL：06-1234-5678
Mail：info@rhapsodie-web.com
HP：https://rhapsodie-web.com
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

acceptance_as_validation: on

/* Contact Form 7 テーブルカスタマイズ */
#cf-tbl {
width: 100%;
max-width: 800px;
margin: 0 auto;
}

#cf-tbl table {
width: 100%;
border-collapse: collapse;
border: 1px solid #CCC;
color: #444;
}

#cf-tbl table tr th,
#cf-tbl table tr td {
padding: 1.5em;
border: 1px solid #CCC;
vertical-align: middle;
}

#cf-tbl table tr th {
width: 30%;
background: #f7f7f7;
text-align: left;
}

/* 必須・任意ラベル */
.required {
font-size: .8em;
padding: 3px 8px;
background: #F57500;
color: #fff;
border-radius: 3px;
margin-right: 8px;
}

.optional {
font-size: .8em;
padding: 3px 8px;
background: #b0c4de;
color: #fff;
border-radius: 3px;
margin-right: 8px;
}

/* 入力フィールド */
input.wpcf7-form-control.wpcf7-text,
textarea.wpcf7-form-control.wpcf7-textarea {
width: 100%;
padding: 10px;
border: 1px solid #d0d5d8;
border-radius: 3px;
background-color: #f9f9f9;
box-sizing: border-box;
}

/* 送信ボタン */
input.wpcf7-submit {
display: block;
width: 300px;
margin: 30px auto;
padding: 15px;
background: #ffaa56;
color: #fff;
font-size: 18px;
font-weight: bold;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}

input.wpcf7-submit:hover {
background: #e69545;
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* レスポンシブ対応 (スマホ用) */
@media screen and (max-width: 768px) {
#cf-tbl table,
#cf-tbl tbody,
#cf-tbl tr,
#cf-tbl th,
#cf-tbl td {
display: block;
width: 100% !important;
}

#cf-tbl table tr th {
border-bottom: none;
}

input.wpcf7-submit {
width: 100%;
}
}

functions.php の末尾に追記します。

function wpcf7_validation_textarea_hiragana($result, $tag) {
$name = $tag->name;

if ($name === 'your-message') {
$value = isset($_POST[$name]) ? trim((string) $_POST[$name]) : '';

if ($value !== '' && !preg_match('/[ぁ-ん]/u', $value)) {
$result->invalidate($tag, 'スパム対策のため、本文には「ひらがな」を含めて入力してください。');
}
}

return $result;
}
add_filter('wpcf7_validate_textarea', 'wpcf7_validation_textarea_hiragana', 10, 2);
add_filter('wpcf7_validate_textarea*', 'wpcf7_validation_textarea_hiragana', 10, 2);

<script>
document.addEventListener('wpcf7mailsent', function(event) {
location.href = 'https://ご自身のサイトURL/thanks/';
}, false);
</script>