MENU
無料相談はこちらから
無料相談はこちらから

【Contact Form 7】規約同意欄をスクロール可能なボックスで表示する方法

WordPress

Contact Form 7はデフォルトのデザインはシンプルなため、ある程度CSSでの調整が必要になります。

今回は、チェックボックスとラジオボタンを独自の色でカスタマイズし、規約同意欄をスクロール可能なボックスで表示する方法をご紹介します。

目次

1. フォームコードの作成

サンプルのHTMLコードです。
Contact Form 7の管理画面で以下のようなフォームを作成します。

<p>
    <label>お申込み種別<span class="required">*</span></label><br>
    [radio radio-kaiin use_label_element "レギュラー" "プレミアム"]
</p>

<p>
    <label>お名前<span class="required">*</span></label><br>
    [text* your-name placeholder "Name"]
</p>

<p>
    <label>ご住所<span class="required">*</span></label><br>
    [text* your-address placeholder "Address"]
</p>

<p>
    <label>メールアドレス<span class="required">*</span></label><br>
    [email* your-email placeholder "XXX@example.jp"]
</p>

<p>
    <label>電話番号</label><br>
    [tel your-telephone-number placeholder "090-1234-5678"]
</p>

<p>
    <label>お問い合わせ内容</label><br>
    [textarea your-message]
</p>

<div class="terms-wrapper">
    <div class="terms-title">利用規約</div>
    <div class="terms-box">
        <p>ここに利用規約の内容を記載します。長い場合は自動的にスクロールします。</p>
        <p>（実際の規約をコピー＆ペーストしてください。複数段落OK）</p>
        <!-- 必要に応じて <h4>や <ul> などを追加 -->
    </div>
    
    <p class="agreement">
        [checkbox* acceptance-rules use_label_element "上記の利用規約に同意します"]
    </p>
</div>

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

ポイント

  • use_label_element
    ラベルとフォーム要素を関連付けるために必須
  • [checkbox*]
    アスタリスクで必須項目に
  • <div class="terms-wrapper">
    規約ボックスを囲むコンテナ

2. CSSでデザインをカスタマイズ

次に、CSSでデザインを調整します。

CSSの追加場所

  • 外観 > カスタマイズ > 追加CSS
  • または、テーマのstyle.css
/* ブランドカラー定義 */
:root {
    --brand-gold: #c9a961;
    --brand-gold-dark: #b89850;
    --text-dark: #2c1810;
    --bg-light: #fdfbf7;
    --border-light: #e8dcc8;
}

/* ラジオボタン（縦並び） */
.wpcf7-radio .wpcf7-list-item {
    margin: 0.75rem 0;
}

.wpcf7-radio label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    color: var(--text-dark);
    font-size: 1.1rem;
}

/* チェックボックス（規約同意） */
.wpcf7-checkbox label {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text-dark);
    line-height: 1.6;
}

.agreement {
    margin-top: 1rem;
    font-size: 1rem;
}

/* チェック/ラジオのベーススタイル */
.wpcf7 input[type="checkbox"],
.wpcf7 input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 2px solid #ddd;
    border-radius: 4px;
    background: white;
    transition: all 0.2s ease;
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
}

.wpcf7 input[type="radio"] {
    border-radius: 50%;
}

.wpcf7 input[type="checkbox"]:hover,
.wpcf7 input[type="radio"]:hover,
.wpcf7 input[type="checkbox"]:focus-visible,
.wpcf7 input[type="radio"]:focus-visible {
    border-color: var(--brand-gold);
    outline: none;
}

/* チェック時 */
.wpcf7 input[type="checkbox"]:checked,
.wpcf7 input[type="radio"]:checked {
    background: var(--brand-gold);
    border-color: var(--brand-gold);
}

/* チェックボックスの✓マーク */
.wpcf7 input[type="checkbox"]:checked::after {
    content: "✓";
    position: absolute;
    inset: 0;
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    line-height: 20px;
}

/* ラジオの中央白丸 */
.wpcf7 input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    inset: 4px;
    background: white;
    border-radius: 50%;
}

/* 規約ボックス */
.terms-wrapper {
    margin: 2.5rem 0 1.5rem;
}

.terms-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--text-dark);
    margin-bottom: 0.75rem;
}

.terms-box {
    background: var(--bg-light);
    border: 2px solid var(--border-light);
    border-radius: 8px;
    padding: 1.5rem;
    max-height: 300px;
    overflow-y: auto;
    font-size: 0.95rem;
    line-height: 1.8;
    color: var(--text-dark);
}

/* スクロールバー（Chrome/Safari） */
.terms-box::-webkit-scrollbar {
    width: 8px;
}

.terms-box::-webkit-scrollbar-track {
    background: #f5f5f5;
    border-radius: 4px;
}

.terms-box::-webkit-scrollbar-thumb {
    background: var(--brand-gold);
    border-radius: 4px;
}

.terms-box::-webkit-scrollbar-thumb:hover {
    background: var(--brand-gold-dark);
}

/* 規約ボックス内の要素 */
.terms-box p {
    margin-bottom: 1rem;
}

.terms-box p:last-child {
    margin-bottom: 0;
}

/* レスポンシブ */
@media (max-width: 768px) {
    .terms-box {
        max-height: 250px;
        padding: 1.2rem;
        font-size: 0.9rem;
    }
}

3. 色をカスタマイズする

上記のCSSでは、ゴールド系の色(#c9a961)を使用していますが、サイトのブランドカラーに変更できます。

色を変更する箇所

:root {
    --brand-gold: #c9a961;
    --brand-gold-dark: #b89850;
    --text-dark: #2c1810;
    --bg-light: #fdfbf7;
    --border-light: #e8dcc8;
}

これらのカラーコードを、お好みの色に置き換えてください。

4. カスタマイズのポイント

appearance: none

appearance: none;
-webkit-appearance: none;

ブラウザのデフォルトスタイルをリセットするプロパティです。これにより、自由にデザインをカスタマイズできます。

::after疑似要素でチェックマークを作る

.wpcf7 form input[type="checkbox"]:checked::after {
    content: '✓';
}

チェックボックスがチェックされた時に、::after疑似要素で白いチェックマーク(✓)を表示しています。

overflow-y: auto でスクロール可能に

.terms-box {
    max-height: 300px;
    overflow-y: auto;
}

規約が長い場合、300pxを超えると自動的にスクロールバーが表示されます。

まとめ

Contact Form 7の規約同意欄のスクロールと、チェックボックスとラジオボタンをカスタマイズする方法をご紹介しました。

このカスタマイズのポイント

  • appearance: noneでブラウザのデフォルトをリセット
  • ::after疑似要素でチェックマークを自作
  • スクロール可能な規約ボックスで読みやすく
  • ブランドカラーに合わせて自由にカスタマイズ可能

CSSを調整して、フォームのデザインをサイトに合わせてカスタマイズしてみてください。

WordPress

関連記事

目次