フォームデザインのカスタマイズ方法について（カスタムCSS使用時）

SHARE

フォームデザインのカスタマイズ方法（カスタムCSS使用時）

FormNestでは、フォーム編集画面の「カスタムCSS」機能を使用して、フォーム専用のCSSスタイルを簡単に追加できます。この記事では、カスタムCSS機能の使い方を詳しく解説します。

カスタムCSS機能とは

カスタムCSS機能は、フォーム編集画面から直接CSSを記述できる機能です。この機能を使用すると、フォームが表示されるページでのみCSSが適用されるため、他のページに影響を与えません。

主な特徴：

  • フォーム編集画面から直接CSSを記述できる
  • フォームが表示されるページでのみ適用される
  • CSSが自動的にスコープ化される（他の要素に影響しない）
  • セキュリティ対策が自動で適用される
  • フォームごとに異なるCSSを設定できる

💡 ヒント： カスタムCSS機能を使用すると、テーマのCSSを変更することなく、フォームのデザインをカスタマイズできます。

カスタムCSS機能の使い方

ステップ1: カスタムCSSセクションを開く

  1. フォーム管理画面で、カスタマイズしたいフォームの「編集」をクリック
  2. フォーム編集画面で「カスタムCSS」セクションを開く
  3. カスタムCSSのテキストエリアが表示されます

ステップ2: CSSを記述

  1. テキストエリアにCSSコードを記述
  2. 利用可能なクラスを使用してスタイルを指定
  3. コメント（/* */）を使用して説明を追加可能

記述例：

/* フォーム全体のスタイル */
.wpaf-form {
    background-color: #f5f5f5;
    padding: 30px;
    border-radius: 8px;
}

/* テキストフィールドのスタイル */
.wpaf-form input[type='text'] {
    border: 2px solid #0073aa;
    border-radius: 4px;
}

/* 送信ボタンのスタイル */
.wpaf-submit-button {
    background-color: #0073aa;
    color: white;
    padding: 12px 24px;
}

ステップ3: フォームを保存

  1. CSSを記述したら、「フォームを保存」ボタンをクリック
  2. 設定が保存されます
  3. フォームが表示されるページで、CSSが適用されます

利用可能なCSSクラス

カスタムCSS機能では、以下のCSSクラスを使用できます。これらのクラスを使用して、フォームの各要素にスタイルを適用できます。

基本クラス

CSSクラス名説明使用例
.wpaf-formフォーム全体フォーム全体の背景色やパディングを設定
.wpaf-field各フィールドの容器各フィールドの間隔やレイアウトを設定
.wpaf-labelラベルラベルのフォントサイズや色を設定
.wpaf-input入力要素テキストフィールドのスタイルを設定
.wpaf-submit-button送信ボタン送信ボタンの色やサイズを設定
.wpaf-errorエラーメッセージエラーメッセージの色やスタイルを設定

その他の主要クラス

以下のクラスも使用できます：

  • .wpaf-form-container：フォーム全体を囲むコンテナ
  • .wpaf-form-title：フォームのタイトル
  • .wpaf-form-description：フォームの説明文
  • .wpaf-form-table：フォームのテーブルレイアウト
  • .wpaf-form-row：各フィールドの行
  • .wpaf-form-label：フィールドのラベル
  • .wpaf-form-field：フィールドの入力エリア
  • .wpaf-required：必須項目のマーク
  • .wpaf-textarea：テキストエリアフィールド
  • .wpaf-select：セレクトボックスフィールド
  • .wpaf-field__label：フィールドのラベル（別形式）
  • .wpaf-field__input：フィールドの入力要素（別形式）
  • .wpaf-field__error：フィールドのエラーメッセージ

カスタムCSSの動作

自動スコープ化

カスタムCSS機能では、記述したCSSが自動的にスコープ化されます。つまり、フォームが表示されるページでのみCSSが適用され、他のページの要素に影響を与えません。

動作の仕組み：

  • 記述したCSSは、自動的に[data-form-id="フォームID"]セレクタで囲まれます
  • 例：.wpaf-form { ... }は、[data-form-id="1"] .wpaf-form { ... }に変換されます
  • これにより、他のフォームやページの要素に影響を与えません

💡 ヒント： 自動スコープ化により、複数のフォームで異なるCSSを設定しても、互いに影響しません。

セキュリティ対策

カスタムCSS機能では、セキュリティ対策が自動で適用されます。以下の危険なCSSは自動的に削除されます：

  • <script>タグ
  • javascript:プロトコル
  • expression()関数
  • data:プロトコル
  • @importルール

⚠️ 注意： セキュリティ上の理由から、一部のCSS機能は使用できません。

実用的なカスタマイズ例

例1: フォーム全体のスタイルを変更

目的： フォーム全体の背景色とパディングを変更

CSSコード：

/* フォーム全体のスタイル */
.wpaf-form {
    background-color: #f9f9f9;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

例2: 入力フィールドのスタイルを変更

目的： テキストフィールドのボーダーとフォーカス時のスタイルを変更

CSSコード：

/* テキストフィールドのスタイル */
.wpaf-input,
.wpaf-textarea,
.wpaf-select {
    border: 2px solid #0073aa;
    border-radius: 6px;
    padding: 12px 16px;
    font-size: 16px;
}

/* フォーカス時のスタイル */
.wpaf-input:focus,
.wpaf-textarea:focus,
.wpaf-select:focus {
    border-color: #005177;
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 115, 170, 0.1);
}

例3: 送信ボタンのスタイルを変更

目的： 送信ボタンの色とサイズを変更

CSSコード：

/* 送信ボタンのスタイル */
.wpaf-submit-button {
    background-color: #0073aa;
    color: white;
    padding: 14px 32px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

/* ホバー時のスタイル */
.wpaf-submit-button:hover {
    background-color: #005177;
}

例4: ラベルのスタイルを変更

目的： ラベルのフォントサイズと色を変更

CSSコード：

/* ラベルのスタイル */
.wpaf-form-label,
.wpaf-label {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 8px;
}

/* 必須マークのスタイル */
.wpaf-required {
    color: #e74c3c;
    font-weight: bold;
}

例5: エラーメッセージのスタイルを変更

目的： エラーメッセージの色とスタイルを変更

CSSコード：

/* エラーメッセージのスタイル */
.wpaf-error,
.wpaf-field__error {
    color: #e74c3c;
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* エラー時の入力フィールドのスタイル */
.wpaf-field--error .wpaf-input,
.wpaf-field--error .wpaf-textarea,
.wpaf-field--error .wpaf-select {
    border-color: #e74c3c;
}

例6: レスポンシブデザインの調整

目的： モバイルデバイスでの表示を最適化

CSSコード：

/* モバイルデバイスでのスタイル */
@media (max-width: 768px) {
    .wpaf-form {
        padding: 20px;
    }

    .wpaf-form-label {
        font-size: 14px;
    }

    .wpaf-input,
    .wpaf-textarea,
    .wpaf-select {
        font-size: 16px; /* iOSでズームを防ぐ */
    }

    .wpaf-submit-button {
        width: 100%;
        padding: 16px;
    }
}

例7: ブランドカラーの適用

目的： サイトのブランドカラーをフォームに適用

CSSコード：

/* ブランドカラーを適用 */
.wpaf-submit-button {
    background-color: #ff6b6b; /* ブランドカラー */
    color: white;
}

.wpaf-input:focus,
.wpaf-textarea:focus,
.wpaf-select:focus {
    border-color: #ff6b6b; /* ブランドカラー */
    box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.1);
}

.wpaf-required {
    color: #ff6b6b; /* ブランドカラー */
}

CSSの記述のコツ

1. コメントを活用する

CSSコードにコメントを追加すると、後で見返したときに理解しやすくなります。

例：

/* フォーム全体のスタイル */
.wpaf-form {
    /* 背景色を設定 */
    background-color: #f9f9f9;
    /* パディングを設定 */
    padding: 40px;
}

2. 段階的にスタイルを追加

一度にすべてのスタイルを変更するのではなく、段階的にスタイルを追加して確認することを推奨します。

  1. まず、フォーム全体のスタイルを設定
  2. 次に、入力フィールドのスタイルを設定
  3. 最後に、ボタンやエラーメッセージのスタイルを設定

3. ブラウザの開発者ツールを使用

ブラウザの開発者ツール（F12キー）を使用して、実際のCSSクラス名を確認できます。

  1. フォームが表示されているページで、開発者ツールを開く
  2. 「要素」タブで、スタイルを変更したい要素を選択
  3. 実際のCSSクラス名を確認
  4. カスタムCSSに記述

4. 既存のスタイルを確認

フォームのデフォルトスタイルを確認してから、カスタマイズすることを推奨します。

  • ブラウザの開発者ツールで、既存のCSSを確認
  • どのプロパティが設定されているか確認
  • 必要なプロパティのみを上書き

よくあるカスタマイズパターン

パターン1: シンプルでクリーンなデザイン

特徴： 余計な装飾を省いたシンプルなデザイン

CSSコード：

/* シンプルでクリーンなデザイン */
.wpaf-form {
    background-color: #fff;
    padding: 30px;
}

.wpaf-input,
.wpaf-textarea,
.wpaf-select {
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 10px;
}

.wpaf-submit-button {
    background-color: #333;
    color: white;
    padding: 12px 24px;
    border-radius: 4px;
}

パターン2: モダンでカラフルなデザイン

特徴： カラフルでモダンなデザイン

CSSコード：

/* モダンでカラフルなデザイン */
.wpaf-form {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 40px;
    border-radius: 16px;
    color: white;
}

.wpaf-input,
.wpaf-textarea,
.wpaf-select {
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 8px;
    padding: 12px 16px;
}

.wpaf-submit-button {
    background-color: #ff6b6b;
    color: white;
    padding: 14px 32px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

パターン3: ミニマルなデザイン

特徴： 最小限の要素で構成されたミニマルなデザイン

CSSコード：

/* ミニマルなデザイン */
.wpaf-form {
    background-color: transparent;
    padding: 0;
}

.wpaf-input,
.wpaf-textarea,
.wpaf-select {
    border: none;
    border-bottom: 2px solid #333;
    border-radius: 0;
    padding: 10px 0;
    background-color: transparent;
}

.wpaf-submit-button {
    background-color: transparent;
    color: #333;
    padding: 12px 0;
    border: none;
    border-bottom: 2px solid #333;
    text-align: left;
}

トラブルシューティング

問題1: CSSが適用されない

原因と解決方法：

  • フォームを保存していない
    • CSSを記述した後、「フォームを保存」ボタンをクリック
    • 設定が保存されていないと、CSSが適用されません
  • CSSクラス名が間違っている
    • ブラウザの開発者ツールで、実際のCSSクラス名を確認
    • クラス名が正しいか確認
  • CSSの優先度が低い
    • より具体的なセレクタを使用（例：.wpaf-form .wpaf-input）
    • !importantを使用（推奨されませんが、必要な場合）
  • キャッシュの問題
    • ブラウザのキャッシュをクリア
    • WordPressのキャッシュプラグインをクリア

問題2: CSSが他のページに影響する

原因と解決方法：

  • 自動スコープ化が機能していない
    • カスタムCSS機能を使用している場合、自動的にスコープ化されます
    • 問題が発生する場合は、フォームを再保存
  • グローバルなセレクタを使用している
    • グローバルなセレクタ（例：body、div）は使用しない
    • フォーム専用のクラスを使用

問題3: 一部のCSSが削除される

原因と解決方法：

  • セキュリティ対策により削除されている
    • 危険なCSS（javascript:、expression()など）は自動的に削除されます
    • 安全なCSSのみを使用
  • @importが使用できない
    • @importルールは使用できません
    • 外部CSSファイルを読み込む場合は、テーマのfunctions.phpで読み込む

問題4: モバイルで表示が崩れる

原因と解決方法：

  • レスポンシブデザインの考慮不足
    • メディアクエリを使用して、モバイルデバイス用のスタイルを追加
    • 固定幅を使用している場合は、max-width: 100%を設定
  • フォントサイズが小さすぎる
    • モバイルデバイスでは、フォントサイズを16px以上に設定（iOSでズームを防ぐため）

ベストプラクティス

1. セレクタの優先度を理解する

CSSの優先度を理解して、適切なセレクタを使用します。

  • クラスセレクタ：.wpaf-form
  • 要素セレクタ：input
  • 組み合わせ：.wpaf-form input（より具体的）

2. 段階的にスタイルを追加

一度にすべてのスタイルを変更するのではなく、段階的にスタイルを追加して確認します。

3. ブラウザの互換性を考慮

使用するCSSプロパティが、主要なブラウザでサポートされているか確認します。

4. パフォーマンスを考慮

過度に複雑なCSSは、パフォーマンスに影響を与える可能性があります。必要最小限のCSSを記述します。

5. コメントを追加

CSSコードにコメントを追加して、後で見返したときに理解しやすくします。

よくある質問

Q: カスタムCSSはどこに保存されますか？

A: カスタムCSSは、フォームの設定データとしてデータベースに保存されます。フォームごとに独立して保存されます。

Q: 複数のフォームで同じCSSを使用できますか？

A: はい、可能です。各フォームのカスタムCSSセクションに同じCSSを記述してください。ただし、フォームごとに異なるCSSを設定することもできます。

Q: CSSが適用されない場合、どうすればよいですか？

A: まず、フォームを保存しているか確認してください。次に、ブラウザの開発者ツールで、実際のCSSクラス名を確認してください。また、キャッシュをクリアしてみてください。

Q: 外部CSSファイルを読み込むことはできますか？

A: カスタムCSS機能では、@importルールは使用できません。外部CSSファイルを読み込む場合は、テーマのfunctions.phpで読み込むか、テーマのカスタマイザーを使用してください。

Q: CSSのサイズに制限はありますか？

A: 特に制限はありませんが、パフォーマンスを考慮して、必要最小限のCSSを記述することを推奨します。

Q: カスタムCSSを削除するにはどうすればよいですか？

A: カスタムCSSセクションのテキストエリアを空にして、「フォームを保存」ボタンをクリックしてください。

まとめ

カスタムCSS機能を使用することで、フォームのデザインを簡単にカスタマイズできます。

使用のポイント：

  • フォーム編集画面の「カスタムCSS」セクションでCSSを記述
  • 利用可能なCSSクラスを使用してスタイルを指定
  • フォームを保存してCSSを適用
  • 自動スコープ化により、他のページに影響しない
  • セキュリティ対策が自動で適用される

詳細な設定方法については、「基本的なフォームの作成方法」の記事を参照してください。問題が解決しない場合は、ヘルプページの「よくある問題と解決方法」セクションを確認するか、サポートにお問い合わせください。

前の記事

送信データの確認方法について

次の記事

FormNestが動作しない場合のチェック項目