How to Design & Style Your Ninja Forms View

Overview

The Design tab in Ninja Forms Views gives you complete control over the visual appearance of your form entries.

What You Can Do:

• Apply ready-made themes with a single click
• Customize table styles (borders, colors, headers, hover effects)
• Design card layouts for list views (shadows, spacing, colors)
• Apply conditional row coloring based on field values
• Add custom CSS for advanced styling

Accessing Design Settings

Step 1: Navigate to Ninja Forms → Views in your WordPress dashboard

Step 2: Edit or create a new view

Step 3: Click on the “Design” tab in the right sidebar

Note for Free Users: If you’re using the free version, you’ll see a “Pro” badge on the Design tab. Clicking it will display an upgrade prompt with a link to view Pro features.

Quick Themes

Quick Themes allow you to instantly transform the look of your views without any coding. Choose from professionally designed themes that work with all view types (Table, List, DataTable).

Note: Theme selector displays available themes based on your current view type (Table/DataTable or List).

Table & DataTable Themes (20+ Options):

List View Themes (5 Options):

How to Apply a Theme:

1. Open the Design tab
2. Under “Quick Themes”, browse available themes
3. Click on any theme preview to apply it instantly
4. Save your view to make changes permanent

Pro Tip: The Custom theme unlocks additional panels (Table Styles or Card Styles) where you can fine-tune every design element.

Table Styles (Custom Theme)

When you select the Custom theme for Table or DataTable views, the Table Styles panel appears with extensive customization options.

The Table Styles panel provides a live preview of your customizations and allows you to adjust every aspect of your table’s appearance.

Available Options:

Example Configuration:

Border Width: 2px
Border Color: #dee2e6
Border Style: Solid
Header Background: #343a40
Header Text: #ffffff
Hover Effect: Enabled
Zebra Striping: Enabled
Zebra Color: #f8f9fa
Border Radius: 8px

Result: A modern table with a dark header, subtle borders, alternating row colors, and smooth rounded corners.

Card Styles (Custom Theme)

When you select the Custom theme for List views, the Card Styles panel lets you design beautiful card layouts for each entry.

The Card Styles panel includes a live preview and lets you customize every aspect of your card design.

Available Options:

Example Configuration:

Background: #ffffff
Border Width: 1px
Border Color: #e0e0e0
Border Style: Solid
Border Radius: 12px
Shadow: Medium
Padding: Large
Gap: 30px
Hover Effect: Enabled
Hover Scale: Enabled
Label Color: #666666
Value Color: #333333

Result: Elegant cards with smooth shadows, generous spacing, and interactive hover effects.

Row Color Rules

Row Color Rules allow you to automatically apply background colors to entries based on field values. This is perfect for status indicators, priority levels, or any conditional formatting needs.

The Row Color Rules panel includes a live preview showing how your rules will be applied to actual entries.

How It Works:

1. Enable Row Colors: Toggle the “Enable Row Colors” switch
2. Select Field: Choose which field’s value determines the color
3. Add Rules: Create rules matching field values to colors
4. Set Fallback: (Optional) Choose a default color for non-matching entries

Rule Structure:

Example Use Case: Order Status

Field: "Order Status"
Rules:
1. "Pending"     → Yellow (#fff3cd)
2. "Processing"  → Blue (#cfe2ff)
3. "Completed"   → Green (#d1e7dd)
4. "Cancelled"   → Red (#f8d7da)
Fallback Color: Gray (#f0f0f0)

Matching Behavior:

• Exact Match: Value must match exactly (case-sensitive)
• Contains Match: Also matches if the field value contains the rule value (useful for checkboxes/multi-select)

Pro Tip: Row colors work across all view types – Table, DataTable, and List views. The color is applied to the entire row (tables) or card (lists).

Custom CSS

For advanced users, the Custom CSS panel provides a code editor where you can write custom styles that apply specifically to your view.

The Custom CSS panel includes syntax highlighting, code snippets, and a comprehensive selector reference.

Features:

• Syntax highlighting for CSS code
• View-type specific code snippets
• Comprehensive CSS selector reference
• Scoped to your specific view

Quick Snippets (Table Views):

/* Add hover shadow to rows */
.nf-views-table tbody tr:hover {
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}
/* Style specific column */
.nf-views-table td:nth-child(2) {
    font-weight: bold;
    color: #2271b1;
}
/* Animate row hover */
.nf-views-table tbody tr {
    transition: all 0.3s ease;
}
/* Sticky table header */
.nf-views-table thead {
    position: sticky;
    top: 0;
    z-index: 10;
}

Quick Snippets (List Views):

/* Card shadow on hover */
.nf-view-row:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
/* Card gradient background */
.nf-view-row {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}
/* Rounded image fields */
.nf-view-row img {
    border-radius: 50%;
    width: 80px;
    height: 80px;
    object-fit: cover;
}
/* Field label styling */
.nf-view-row .field-label {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

CSS Selector Reference:

Important: Custom CSS is applied only to the specific view you’re editing. Use !important sparingly and test thoroughly on different devices.

Frequently Asked Questions

Q: Can I use Design features in the free version?

A: No, all Design features are exclusive to the Pro version. Free users will see a “Pro” badge and upgrade prompt when clicking the Design tab.

Q: Do themes affect mobile responsiveness?

A: Yes, all themes are fully responsive and automatically adapt to different screen sizes. Custom CSS should include mobile-specific styles using media queries if needed.

Q: Can I apply different row colors to different rows in the same view?

A: Yes! Row Color Rules evaluate each entry individually, so different rows can have different colors based on their field values.

Q: What happens if I switch from Custom theme to another theme?

A: Your Custom theme settings (Table/Card Styles) are preserved. If you switch back to Custom, your previous settings will still be there.

Q: Can I use Custom CSS with Quick Themes?

A: Absolutely! Custom CSS applies regardless of which theme you choose. It’s a great way to add finishing touches to pre-designed themes.

Q: Do Row Colors work with conditional display?

A: Yes, Row Colors are applied at render time. If an entry is conditionally hidden or shown, the row color rules still apply to visible entries.

Q: How do I remove all custom styles and start fresh?

A: Switch back to the “Default” theme, disable Row Colors, and clear the Custom CSS editor. Then save your view.

Q: Can I copy styles from one view to another?

A: Currently, you’ll need to manually recreate the styles. We recommend documenting your settings or using the browser’s copy/paste for Custom CSS.

Q: Will my custom styles affect other views?

A: No, all design settings are scoped to the specific view you’re editing. Each view has its own independent design configuration.

Q: Can I use CSS variables or preprocessor syntax?

A: You can use standard CSS including CSS custom properties (variables). SCSS/SASS syntax is not supported as CSS is applied directly without preprocessing.

Ready to Transform Your Views?
Upgrade to Ninja Forms Views Pro today and unlock all Design features!
View Pricing & Plans →