2026年8月15日

WordPressのお問い合わせフォーム（CF7）をカスタマイズする方法

プラグイン関連

はじめに

「Contact Form 7のデフォルトデザインをカスタマイズしたい」「フォーム送信後に確認画面を表示したい」「スパムメールを減らしたい」——CF7はWordPressで最も使われているフォームプラグインですが、標準機能だけでは要件を満たせないケースも多くあります。

症状・原因

CF7のデフォルトはシンプルなフォームとメール送信機能のみで、確認画面・スパム対策・入力バリデーション強化・メール通知のカスタマイズなどは追加設定や拡張が必要です。

解決手順

ステップ1：CF7の基本フォームタグとCSSカスタマイズ

<!-- CF7フォームエディタ: カスタムフォームタグ -->
<div class="cf7-form-wrap">
    <div class="cf7-row">
        <label>お名前 <span class="required">*</span></label>
        [text* your-name placeholder "山田 太郎" minlength:2 maxlength:50]
    </div>

    <div class="cf7-row">
        <label>メールアドレス <span class="required">*</span></label>
        [email* your-email placeholder "example@example.com"]
    </div>

    <div class="cf7-row">
        <label>電話番号</label>
        [tel your-tel placeholder "090-1234-5678"]
    </div>

    <div class="cf7-row">
        <label>お問い合わせ種別 <span class="required">*</span></label>
        [select* inquiry-type "製品について" "サポート" "見積もり依頼" "その他"]
    </div>

    <div class="cf7-row">
        <label>メッセージ <span class="required">*</span></label>
        [textarea* your-message placeholder "お問い合わせ内容をご記入ください" minlength:10 maxlength:2000]
    </div>

    <div class="cf7-row">
        [acceptance accept-terms] プライバシーポリシーに同意する [/acceptance]
    </div>

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

/* CF7フォームのCSSカスタマイズ */
.cf7-form-wrap {
    max-width: 680px;
    margin: 0 auto;
    padding: 2rem;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.cf7-row {
    margin-bottom: 1.5rem;
}

.cf7-row label {
    display: block;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #1d2327;
}

.cf7-row .required {
    color: #d63638;
    margin-left: 4px;
}

/* 入力フィールド共通 */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dcdcde;
    border-radius: 4px;
    font-size: 1rem;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    outline: none;
    border-color: #2271b1;
    box-shadow: 0 0 0 2px rgba(34,113,177,0.15);
}

/* バリデーションエラー */
.wpcf7-not-valid {
    border-color: #d63638 !important;
}

.wpcf7-not-valid-tip {
    color: #d63638;
    font-size: 0.85rem;
    margin-top: 4px;
    display: block;
}

/* 送信ボタン */
.wpcf7-form input[type="submit"] {
    background: #2271b1;
    color: #fff;
    border: none;
    padding: 14px 40px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.2s;
    width: 100%;
}

.wpcf7-form input[type="submit"]:hover {
    background: #135e96;
}

/* 送信中スピナー */
.wpcf7-spinner {
    display: inline-block;
    margin-left: 10px;
}

ステップ2：メール通知テンプレートをカスタマイズする

【CF7メール設定 — 管理者通知メール】

差出人: [your-name] <wordpress@example.com>
宛先: admin@example.com
件名: 【お問い合わせ】[inquiry-type]: [your-name]様より

本文:
━━━━━━━━━━━━━━━━━━━━━━
お問い合わせを受け付けました
━━━━━━━━━━━━━━━━━━━━━━

■ お名前: [your-name]
■ メールアドレス: [your-email]
■ 電話番号: [your-tel]
■ 種別: [inquiry-type]
■ 送信日時: [_date] [_time]
■ IPアドレス: [_remote_ip]

■ メッセージ:
[your-message]

━━━━━━━━━━━━━━━━━━━━━━
このメールはWordPressサイトから自動送信されています
━━━━━━━━━━━━━━━━━━━━━━

【CF7メール設定 — 自動返信メール（メール(2)）】

差出人: サイト名 <noreply@example.com>
宛先: [your-email]
件名: お問い合わせを受け付けました

本文:
[your-name] 様

お問い合わせいただきありがとうございます。
以下の内容でお問い合わせを受け付けました。
通常2〜3営業日以内にご返信いたします。

■ お問い合わせ種別: [inquiry-type]
■ メッセージ: [your-message]

─────────────────────────
会社名 | example.com
─────────────────────────

ステップ3：送信前確認画面をfunctions.phpで追加する

// functions.php: CF7送信前確認ポップアップ
add_filter( 'wpcf7_form_elements', function( $content ) {
    // 確認ボタンのラベルを変更
    $content = str_replace(
        'type="submit"',
        'type="submit" data-confirm="この内容で送信しますか？"',
        $content
    );
    return $content;
} );

// 確認ダイアログを表示するカスタムJS
document.addEventListener('DOMContentLoaded', function() {
    const form = document.querySelector('.wpcf7-form');
    if (!form) return;

    form.addEventListener('submit', function(e) {
        const submitBtn = form.querySelector('input[type="submit"]');
        const message = submitBtn?.dataset.confirm;

        if (message && !window._cf7Confirmed) {
            e.preventDefault();
            e.stopImmediatePropagation();

            if (confirm(message)) {
                window._cf7Confirmed = true;
                // Submitイベントを再発火
                submitBtn.click();
            }
        } else {
            window._cf7Confirmed = false;
        }
    }, true);
});

ステップ4：スパム対策を強化する

// functions.php: CF7にスパム対策を追加

// ハニーポットフィールドでボットを検出
add_filter( 'wpcf7_spam', function( $spam, $submission ) {
    if ( $spam ) return $spam;

    // ハニーポット: 人間には見えない隠しフィールドに値があればスパム
    $honey = isset( $_POST['website_url'] ) ? $_POST['website_url'] : '';
    if ( ! empty( $honey ) ) {
        $submission->set_response( 'スパムとして検出されました。' );
        return true;
    }

    // 送信速度チェック: 3秒以内の送信はボットの可能性
    $posted_at  = isset( $_POST['_wpcf7_posted_at'] ) ? (float) $_POST['_wpcf7_posted_at'] : 0;
    $elapsed    = time() - $posted_at;
    if ( $posted_at > 0 && $elapsed < 3 ) {
        $submission->set_response( '送信が早すぎます。しばらくしてから再試行してください。' );
        return true;
    }

    return $spam;
}, 10, 2 );

// 日本語チェック: メッセージに日本語が含まれていない場合はスパムの可能性
add_filter( 'wpcf7_spam', function( $spam, $submission ) {
    if ( $spam ) return $spam;

    $message = $submission->get_posted_data( 'your-message' );
    if ( $message && ! preg_match( '/[\x{3000}-\x{9FFF}\x{F900}-\x{FAFF}]/u', $message ) ) {
        // 日本語が一文字もなければスパムフラグ（サイトに応じて調整）
        // return true; // 必要に応じてコメントアウトを外す
    }

    return $spam;
}, 10, 2 );

【CF7スパム対策の選択肢】

1. Akismet Anti-spam (推奨)
   CF7と自動連携。API keyをAkismet設定で入力するだけ。

2. reCAPTCHA v3 (Google)
   CF7設定 → インテグレーション → reCAPTCHA
   Site Key / Secret KeyをGoogleから取得して設定

3. Cloudflare Turnstile
   より軽量なreCAPTCHA代替。
   CF7 + Cloudflare Turnstile プラグインで連携

4. ハニーポット（上記のPHPコード）
   見えない入力フィールドでボットを検出する

ステップ5：条件分岐フォームをJavaScriptで実装する

// お問い合わせ種別によってフィールドを切り替える
document.addEventListener('DOMContentLoaded', function() {
    const typeSelect = document.querySelector('[name="inquiry-type"]');
    if (!typeSelect) return;

    // 種別ごとに表示するフィールドを定義
    const conditionalFields = {
        '見積もり依頼': ['budget-field', 'deadline-field', 'company-field'],
        'サポート':     ['product-field', 'version-field'],
    };

    // 全条件フィールドを取得
    const allConditional = Object.values(conditionalFields).flat();

    function updateFields() {
        const selected = typeSelect.value;

        // 全フィールドを非表示
        allConditional.forEach(function(id) {
            const el = document.getElementById(id);
            if (el) {
                el.style.display = 'none';
                // バリデーションを無効化
                el.querySelectorAll('input,select,textarea').forEach(function(input) {
                    input.disabled = true;
                });
            }
        });

        // 選択した種別のフィールドを表示
        const showFields = conditionalFields[selected] || [];
        showFields.forEach(function(id) {
            const el = document.getElementById(id);
            if (el) {
                el.style.display = 'block';
                el.querySelectorAll('input,select,textarea').forEach(function(input) {
                    input.disabled = false;
                });
            }
        });
    }

    typeSelect.addEventListener('change', updateFields);
    updateFields(); // 初期化
});

注意事項

CF7はAJAX送信のため、送信後のページ遷移が不要です。wpcf7mailsentイベントをJavaScriptで検知してサンクスページにリダイレクトする場合はdocument.addEventListener('wpcf7mailsent', ...)を使います。
メールの差出人アドレスはWordPressがインストールされているドメインのアドレスを使用してください。異なるドメインのメールアドレスを使うとSPFエラーでスパム判定される場合があります。
CF7 + Flamingo プラグインを組み合わせると送信データをWordPressのDBに保存できます。メール到達の問題が発生した際のバックアップとして有効です。

まとめ

CF7のカスタマイズは「フォームタグとCSSでデザイン整備→メールテンプレートで通知文をカスタマイズ→確認ダイアログをJSで実装→Akismet/reCAPTCHA/ハニーポットでスパム対策→条件分岐フォームでUXを向上」の流れで整備します。関連記事：WooCommerceを初期設定してECサイトを構築する方法、WordPressの404エラーページをカスタマイズする方法。

Post Views: 17