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

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 

このメールは自動返信メールです。
[your-name] 様 この度はお問合せありがとうございます。
ご入力された内容は下記のとおりです。 

２～３日以内にご返信させていただきますので今しばらくお待ちください。 
返信がない場合は、メールが届いていない可能性がありますので、電話もしくはメールでご連絡ください。 

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ 
・お問い合わせ内容 [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

/* 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%;
    }
}

// Contact Form 7 本文に「ひらがな」がなければ送信不可にする
function wpcf7_validation_textarea_hiragana($result, $tag) {
    $name = $tag->name;
    $value = (isset($_POST[$name])) ? (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 = 'https://ご自身のサイトURL/thanks/';
}, false );
</script>