フォームデザインのカスタマイズ方法について（テーマ編集方法）

SHARE

フォームデザインのカスタマイズ方法（テーマ編集方法）

FormNestのフォームデザインを、CSSを使用してカスタマイズする方法を詳しく解説します。テーマに合わせたデザインに調整したり、ブランドカラーを反映させたりすることができます。

CSSカスタマイズの基本

FormNestのフォームは、すべての要素にCSSクラスが付与されています。これらのクラスを使用して、フォームの見た目を自由にカスタマイズできます。

CSSを追加する方法

WordPressでCSSを追加する方法は、主に以下の3つがあります：

  1. テーマのカスタマイザーを使用（推奨）
    • 「外観」→「カスタマイズ」→「追加CSS」
    • テーマを変更してもCSSが保持されます
  2. 子テーマのstyle.cssに追加
    • 子テーマを使用している場合
    • テーマの更新時にCSSが失われません
  3. カスタムCSSプラグインを使用
    • 「Simple Custom CSS」などのプラグインを使用
    • テーマに依存しない方法

主要なCSSクラス一覧

FormNestで使用されている主要なCSSクラス名です。これらのクラスを使用してスタイルを適用できます。

要素CSSクラス名説明
フォームコンテナ.wpaf-form-containerフォーム全体を囲むコンテナ
フォームタイトル.wpaf-form-titleフォームのタイトル
フォーム説明.wpaf-form-descriptionフォームの説明文
フォームテーブル.wpaf-form-tableフォームのテーブルレイアウト
フォーム行.wpaf-form-row各フィールドの行
ラベル.wpaf-form-labelフィールドのラベル
フィールド.wpaf-form-fieldフィールドの入力エリア
必須マーク.wpaf-required必須項目のマーク
テキスト入力.wpaf-inputテキスト入力フィールド
テキストエリア.wpaf-textareaテキストエリアフィールド
セレクトボックス.wpaf-selectセレクトボックスフィールド
送信ボタン.wpaf-submit-buttonフォーム送信ボタン
エラーメッセージ.wpaf-field__errorフィールドのエラーメッセージ
エラー状態.wpaf-field--errorエラーがあるフィールド
成功メッセージ.wpaf-form-success送信成功メッセージ

カスタマイズ例

1. フォーム全体のスタイル

フォームコンテナの背景色やパディングを変更します。

/* フォームコンテナのスタイル */
.wpaf-form-container {
    background-color: #f9fafb;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    max-width: 700px;
    margin: 30px auto;
}

2. フォームタイトルのスタイル

フォームタイトルの色やサイズを変更します。

/* フォームタイトルのスタイル */
.wpaf-form-title {
    color: #1a1a1a;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
    border-bottom: 3px solid #0073aa;
    padding-bottom: 15px;
}

3. 入力フィールドのスタイル

テキスト入力フィールドの見た目を変更します。

/* 入力フィールドのスタイル */
.wpaf-input,
.wpaf-textarea,
.wpaf-select {
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    background-color: #ffffff;
    transition: all 0.3s ease;
}

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

/* プレースホルダーのスタイル */
.wpaf-input::placeholder,
.wpaf-textarea::placeholder {
    color: #999;
    font-style: italic;
}

4. ラベルのスタイル

フィールドラベルのスタイルを変更します。

/* ラベルのスタイル */
.wpaf-form-label {
    font-weight: 600;
    color: #333;
    font-size: 15px;
    padding: 15px 20px 15px 0;
}

/* 必須マークのスタイル */
.wpaf-required {
    color: #e74c3c;
    font-size: 12px;
    font-weight: bold;
    margin-left: 5px;
    padding: 2px 6px;
    background-color: #ffe5e5;
    border-radius: 3px;
}

5. 送信ボタンのスタイル

送信ボタンのデザインを変更します。

/* 送信ボタンのスタイル */
.wpaf-submit-button {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    padding: 16px 48px;
    font-size: 18px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
    min-width: 200px;
}

/* ホバー時のスタイル */
.wpaf-submit-button:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(102, 126, 234, 0.4);
}

/* 無効時のスタイル */
.wpaf-submit-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

6. エラーメッセージのスタイル

エラーメッセージの表示をカスタマイズします。

/* エラーメッセージのスタイル */
.wpaf-field__error {
    color: #e74c3c;
    font-size: 13px;
    margin-top: 6px;
    padding: 8px 12px;
    background-color: #fff5f5;
    border-left: 3px solid #e74c3c;
    border-radius: 4px;
}

/* エラー状態のフィールド */
.wpaf-field--error .wpaf-input,
.wpaf-field--error .wpaf-textarea,
.wpaf-field--error .wpaf-select {
    border-color: #e74c3c;
    background-color: #fff5f5;
}

7. 成功メッセージのスタイル

送信成功時のメッセージをカスタマイズします。

/* 成功メッセージのスタイル */
.wpaf-form-success {
    background-color: #d4edda;
    border: 2px solid #28a745;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 25px;
    color: #155724;
}

.wpaf-success-message {
    font-weight: 600;
    font-size: 16px;
    margin: 0;
}

8. テーブルレイアウトのスタイル

フォームのテーブルレイアウトをカスタマイズします。

/* テーブルのスタイル */
.wpaf-form-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

/* 行のスタイル */
.wpaf-form-row {
    border-bottom: 1px solid #e5e7eb;
    transition: background-color 0.2s ease;
}

.wpaf-form-row:hover {
    background-color: #f9fafb;
}

.wpaf-form-row:last-child {
    border-bottom: none;
}

ブランドカラーに合わせたカスタマイズ

サイトのブランドカラーに合わせてフォームをカスタマイズする例です。

例：青色を基調としたデザイン

/* ブランドカラー：青 */
:root {
    --brand-primary: #0073aa;
    --brand-secondary: #005177;
    --brand-light: #e3f2fd;
    --brand-dark: #003d5c;
}

/* フォーカス時の色 */
.wpaf-input:focus,
.wpaf-textarea:focus,
.wpaf-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-light);
}

/* 送信ボタン */
.wpaf-submit-button {
    background-color: var(--brand-primary);
    color: white;
}

.wpaf-submit-button:hover:not(:disabled) {
    background-color: var(--brand-secondary);
}

/* 必須マーク */
.wpaf-required {
    color: var(--brand-primary);
    background-color: var(--brand-light);
}

例：緑色を基調としたデザイン

/* ブランドカラー：緑 */
:root {
    --brand-primary: #28a745;
    --brand-secondary: #218838;
    --brand-light: #d4edda;
}

.wpaf-input:focus,
.wpaf-textarea:focus,
.wpaf-select:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--brand-light);
}

.wpaf-submit-button {
    background-color: var(--brand-primary);
    color: white;
}

.wpaf-submit-button:hover:not(:disabled) {
    background-color: var(--brand-secondary);
}

レスポンシブデザインのカスタマイズ

モバイルデバイスでの表示を最適化します。

/* モバイル対応 */
@media (max-width: 768px) {
    /* フォームコンテナ */
    .wpaf-form-container {
        padding: 20px;
        margin: 10px;
    }

    /* タイトル */
    .wpaf-form-title {
        font-size: 22px;
    }

    /* ラベルとフィールドを縦並びに */
    .wpaf-form-label,
    .wpaf-form-field {
        display: block;
        width: 100%;
    }

    .wpaf-form-label {
        padding: 10px 0 5px 0;
        margin-bottom: 5px;
    }

    .wpaf-form-field {
        padding: 5px 0 15px 0;
    }

    /* 送信ボタンを全幅に */
    .wpaf-submit-button {
        width: 100%;
        padding: 16px;
    }
}

特定のフォームのみにスタイルを適用

複数のフォームがある場合、特定のフォームのみにスタイルを適用できます。

方法1: フォームIDを使用

フォームコンテナにはdata-form-id属性が付与されています。これを利用して特定のフォームにスタイルを適用できます。

/* フォームIDが1のフォームのみ */
.wpaf-form-container[data-form-id="1"] {
    background-color: #f0f0f0;
}

.wpaf-form-container[data-form-id="1"] .wpaf-submit-button {
    background-color: #ff6b6b;
}

方法2: カスタムクラスを使用

フォーム編集画面でカスタムクラスを設定し、そのクラスを使用してスタイルを適用できます。

/* カスタムクラス「contact-form」を持つフォーム */
.wpaf-form-container.contact-form {
    border: 2px solid #0073aa;
}

.wpaf-form-container.contact-form .wpaf-submit-button {
    background-color: #0073aa;
}

よくあるカスタマイズ例

1. 角丸を大きくする

/* すべての角丸を大きく */
.wpaf-form-container,
.wpaf-input,
.wpaf-textarea,
.wpaf-select,
.wpaf-submit-button {
    border-radius: 12px;
}

2. 影を追加する

/* フォームコンテナに影を追加 */
.wpaf-form-container {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* 入力フィールドに影を追加 */
.wpaf-input:focus,
.wpaf-textarea:focus,
.wpaf-select:focus {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

3. アニメーションを追加する

/* 入力フィールドにアニメーション */
.wpaf-input,
.wpaf-textarea,
.wpaf-select {
    transition: all 0.3s ease;
}

/* 送信ボタンにアニメーション */
.wpaf-submit-button {
    transition: all 0.3s ease;
}

.wpaf-submit-button:hover:not(:disabled) {
    transform: translateY(-2px) scale(1.02);
}

4. フォントを変更する

/* フォーム全体のフォントを変更 */
.wpaf-form-container {
    font-family: 'Noto Sans JP', sans-serif;
}

/* タイトルのフォント */
.wpaf-form-title {
    font-family: 'Noto Serif JP', serif;
}

5. 背景画像を追加する

/* フォームコンテナに背景画像 */
.wpaf-form-container {
    background-image: url('背景画像のURL');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
}

/* 背景画像の上に半透明のレイヤー */
.wpaf-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 0;
}

/* コンテンツを前面に */
.wpaf-form-container > * {
    position: relative;
    z-index: 1;
}

デバッグ方法

CSSが正しく適用されているか確認する方法です。

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

  1. フォームが表示されているページで、右クリック→「検証」を選択
  2. 開発者ツールが開いたら、左上の「要素を選択」アイコンをクリック
  3. フォームの要素をクリックして選択
  4. 右側の「スタイル」タブで、適用されているCSSを確認
  5. CSSを直接編集して、リアルタイムで変更を確認

!importantの使用

テーマのCSSが優先されてしまう場合は、!importantを使用します。

/* !importantを使用して優先度を上げる */
.wpaf-submit-button {
    background-color: #0073aa !important;
    color: white !important;
}

⚠️ 注意： !importantは必要最小限に使用してください。多用すると、CSSの保守性が低下します。

トラブルシューティング

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

原因と解決方法：

  • CSSの優先度が低い
    • より具体的なセレクタを使用する（例：.wpaf-form-container .wpaf-submit-button）
    • 必要に応じて!importantを使用
  • キャッシュの問題
    • ブラウザのキャッシュをクリア
    • WordPressのキャッシュプラグインをクリア
  • CSSの記述ミス
    • セミコロン（;）が抜けていないか確認
    • 閉じ括弧が正しいか確認
    • CSSの構文エラーがないか確認

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

原因と解決方法：

  • レスポンシブ対応のCSSが不足
    • メディアクエリを追加
    • モバイル用のスタイルを定義
  • 固定幅の設定
    • 固定幅（px）ではなく、相対単位（%、rem）を使用
    • max-widthを使用して最大幅を制限

問題3: テーマのCSSと競合する

原因と解決方法：

  • より具体的なセレクタを使用
    • 例：body .wpaf-form-containerのように、より具体的なセレクタを使用
  • 子テーマを使用
    • テーマのCSSを直接編集せず、子テーマで上書き

ベストプラクティス

  • 子テーマを使用する：テーマの更新時にCSSが失われないように
  • コメントを追加する：後で見返したときにわかりやすく
  • 段階的に変更する：一度にすべてを変更せず、少しずつ調整
  • ブラウザで確認する：複数のブラウザで表示を確認
  • モバイルで確認する：レスポンシブデザインを確認
  • バックアップを取る：変更前にCSSをバックアップ

まとめ

FormNestのフォームは、CSSクラスを使用して自由にカスタマイズできます。主要なポイント：

  • すべての要素にCSSクラスが付与されている
  • テーマのカスタマイザーや子テーマでCSSを追加できる
  • ブランドカラーに合わせてカスタマイズ可能
  • レスポンシブデザインにも対応
  • 特定のフォームのみにスタイルを適用可能

カスタマイズで問題が発生した場合は、ブラウザの開発者ツールを使用してデバッグしてください。詳細な情報が必要な場合は、ヘルプページの「よくある問題と解決方法」セクションを確認するか、サポートにお問い合わせください。

前の記事

フィールドタイプの説明と使い方

次の記事

必須項目・バリデーションの設定