【Contact Form 7】formタグにclass・idを設定する方法｜CSSセレクタ・デザインカスタマイズ・複数フォーム対応まで

Contact Form 7（CF7）は WordPress で最も利用されている問い合わせフォームプラグインです。しかし、デフォルトのデザインをカスタマイズしたいとき、フォームの form タグにclass や id を追加する方法を知っておくと自由度が格段に上がります。

この記事では、ショートコード属性による基本的なclass/id追加から、CF7が出力するHTML構造の理解、CSSセレクタの実践的な使い方、複数フォームのデザイン分けまで、フォームカスタマイズの全体像を解説します。

html_class / html_id でformタグにclass・idを追加する

Contact Form 7のショートコードには、formタグに任意のclassやidを付与するための属性が用意されています。

基本の書き方

<!-- classを追加 -->
エラー: コンタクトフォームが見つかりません。

<!-- idを追加 -->
エラー: コンタクトフォームが見つかりません。

<!-- classとid両方を追加 -->
エラー: コンタクトフォームが見つかりません。

出力されるHTMLの変化

<!-- html_class / html_id なし（デフォルト） -->
<form action="/contact/" method="post"
      class="wpcf7-form init">

<!-- html_class="my-contact-form" html_id="inquiry-form" を追加 -->
<form action="/contact/" method="post"
      class="wpcf7-form init my-contact-form"
      id="inquiry-form">

html_class で指定したクラスは、既存の wpcf7-form クラスに追加される形になります。既存クラスが上書きされることはありません。

Contact Form 7 が出力するHTML構造

CSSでデザインをカスタマイズする前に、CF7 が出力する HTML構造を理解しておくことが重要です。

<!-- CF7が出力するHTML構造 -->
<div class="wpcf7" id="wpcf7-f123-o1">          <!-- 最外側ラッパー -->
  <form class="wpcf7-form init">                <!-- formタグ本体 -->

    <p>お名前<br>
      <span class="wpcf7-form-control-wrap">  <!-- フィールドラッパー -->
        <input type="text"
               class="wpcf7-form-control wpcf7-text"
               name="your-name" />
      </span>
    </p>

    <p>
      <input type="submit"
             class="wpcf7-form-control wpcf7-submit"
             value="送信" />
    </p>

    <div class="wpcf7-response-output">     <!-- 送信結果メッセージ -->
    </div>

  </form>
</div>

主要なCSSセレクタ一覧

入力フィールドにclass・idを追加する方法

formタグだけでなく、個々の入力フィールドにもclassやidを追加できます。CF7のフォーム編集画面で、各タグにオプションとして指定します。

<!-- CF7フォーム編集画面での記述例 -->

<!-- classを追加 -->
[text* your-name class:input-name]

<!-- idを追加 -->
[email* your-email id:email-field]

<!-- classとid両方 -->
[textarea your-message class:input-message id:message-field]

<!-- 複数classを追加 -->
[text your-company class:input-company class:required-field]

<!-- 送信ボタンにもclass追加可能 -->
[submit class:btn-submit "送信する"]

出力されるHTMLの変化（フィールド級）

<!-- [text* your-name class:input-name id:name-field] の出力結果 -->
<span class="wpcf7-form-control-wrap" data-name="your-name">
  <input type="text"
         name="your-name"
         class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required input-name"
         id="name-field"
         aria-required="true" />
</span>

class: で指定したクラスは、CF7が自動付与するクラス（wpcf7-form-control など）の後ろに追加されます。既存クラスは保持されるので安心です。

CSSデザインカスタマイズの実践例

ここからは、html_class やCF7標準のセレクタを使って、実際にフォームデザインをカスタマイズする方法を紹介します。CSSは子テーマの style.css か、WordPress管理画面の「カスタマイズ → 追加CSS」に記述します。

パターン1: シンプルで美しいフォーム

/* フォーム全体 */
.wpcf7-form {
    max-width: 600px;
    margin: 0 auto;
    padding: 32px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
}

/* 入力フィールド共通 */
.wpcf7-form-control:not([type="submit"]) {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 16px;
    transition: border-color 0.3s;
    box-sizing: border-box;
}

/* フォーカス時のハイライト */
.wpcf7-form-control:focus {
    border-color: #4285f4;
    outline: none;
    box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

/* 送信ボタン */
.wpcf7-submit {
    display: block;
    width: 100%;
    padding: 14px;
    background: #4285f4;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s;
}
.wpcf7-submit:hover {
    background: #3367d6;
}

/* エラーメッセージ */
.wpcf7-not-valid-tip {
    color: #e53935;
    font-size: 13px;
    margin-top: 4px;
}

/* 送信結果メッセージ */
.wpcf7-response-output {
    border-radius: 8px;
    padding: 12px 16px;
    margin-top: 16px;
}

パターン2: テーブルレイアウトのフォーム

フォームのラベルと入力欄を横並びに配置するには、CF7のフォーム編集画面でHTMLタグを使います。

<!-- CF7フォーム編集画面のHTMLテンプレート -->
<div class="form-group">
  <label>お名前 <span class="required">*</span></label>
  [text* your-name class:form-input placeholder "例：山田太郎"]
</div>

<div class="form-group">
  <label>メールアドレス <span class="required">*</span></label>
  [email* your-email class:form-input placeholder "例：info@example.com"]
</div>

<div class="form-group">
  <label>お問い合わせ内容 <span class="required">*</span></label>
  [textarea* your-message class:form-input placeholder "ご用件をご記入ください"]
</div>

[submit class:btn-submit "送信する"]

/* テーブルレイアウトCSS */
.form-group {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 20px;
}
.form-group label {
    flex: 0 0 160px;
    padding-top: 10px;
    font-weight: 600;
}
.form-group .wpcf7-form-control-wrap {
    flex: 1;
}
.required {
    color: #e53935;
}

/* レスポンシブ対応: スマホでは縦並び */
@media (max-width: 600px) {
    .form-group {
        flex-direction: column;
        gap: 4px;
    }
    .form-group label {
        flex: none;
        padding-top: 0;
    }
}

複数フォームで個別にデザインを変える方法

1つのサイトに「お問い合わせフォーム」「資料請求フォーム」など複数のフォームを設置し、それぞれ異なるデザインにしたい場合の方法です。

方法1: html_class で分ける（推奨）

<!-- ショートコード -->
エラー: コンタクトフォームが見つかりません。
エラー: コンタクトフォームが見つかりません。

/* お問い合わせフォーム */
.form-inquiry .wpcf7-submit {
    background: #4285f4;
}

/* 資料請求フォーム */
.form-document .wpcf7-submit {
    background: #34a853;
}

方法2: CF7が付与するidセレクタで分ける

CF7はフォームごとに自動的にユニークなidを付与します。このidを使ってもデザインを分けられます。

/* CF7が自動付与するid: wpcf7-f[フォームID]-o[連番] */
/* 例: wpcf7-f123-o1 */

#wpcf7-f123-o1 .wpcf7-submit {
    background: #4285f4;
}

#wpcf7-f456-o1 .wpcf7-submit {
    background: #34a853;
}

PHPフィルターによる高度なカスタマイズ

ショートコード属性だけでは対応できない場合は、PHPのフィルターフックを使ってフォームのHTMLを加工できます。以下のコードは子テーマの functions.php に追加します。

do_shortcode_tag でformタグにdata属性を追加

/**
 * CF7のformタグにカスタムdata属性を追加する
 * 例: data-form-type="inquiry" を追加
 */
add_filter( 'do_shortcode_tag', function( $output, $tag, $attr ) {
    if ( 'contact-form-7' === $tag || 'contact-form' === $tag ) {
        $output = str_replace(
            '<form ',
            '<form data-form-type="inquiry" ',
            $output
        );
    }
    return $output;
}, 10, 3 );

wpcf7_form_elements で入力フィールドを加工

/**
 * wpcf7_form_elements でフォーム要素のHTMLを加工する
 * 例: 全テキストフィールドに autocomplete 属性を追加
 */
add_filter( 'wpcf7_form_elements', function( $content ) {
    // name属性で特定のフィールドを狙い撃ち
    $content = str_replace(
        'name="your-name"',
        'name="your-name" autocomplete="name"',
        $content
    );
    $content = str_replace(
        'name="your-email"',
        'name="your-email" autocomplete="email"',
        $content
    );
    return $content;
} );

wpcf7_form_class_attr でclassを動的に制御

/**
 * wpcf7_form_class_attr でformタグのclassを動的に追加する
 * 例: ログインユーザーにだけ特別なクラスを付与
 */
add_filter( 'wpcf7_form_class_attr', function( $class ) {
    if ( is_user_logged_in() ) {
        $class .= ' form-logged-in';
    }
    return $class;
} );

送信状態に応じたスタイリング

CF7はフォームの送信状態に応じて class を動的に切り替えます。これを利用してUXを向上させるCSSを書けます。

/* 送信中: ボタンを半透明にしてクリック不可に */
.wpcf7-form.submitting .wpcf7-submit {
    opacity: 0.6;
    pointer-events: none;
}

/* 送信成功: メッセージを緑色で表示 */
.wpcf7-form.sent .wpcf7-response-output {
    border-color: #4caf50;
    background: #e8f5e9;
    color: #2e7d32;
}

/* 送信失敗: メッセージを赤色で表示 */
.wpcf7-form.failed .wpcf7-response-output {
    border-color: #e53935;
    background: #fce4ec;
    color: #c62828;
}

/* バリデーションエラー: メッセージをオレンジ色で表示 */
.wpcf7-form.invalid .wpcf7-response-output {
    border-color: #ff9800;
    background: #fff3e0;
    color: #e65100;
}

よくあるトラブルと対処法

関連する記事

まとめ

Contact Form 7のデザインカスタマイズは、html_class による基本的なクラス追加から始めて、CSSセレクタの活用 → PHPフィルターによる高度な制御へと段階的にステップアップできます。まずは html_class でフォームにクラスを付与し、CSSでスタイルを調整することから試してみてください。