Frontend Styles - Complete Guide
Comprehensive documentation for admin-controlled frontend styling with 8 step indicator styles, custom text/icons, and total design flexibility.
🎨 Frontend Styles
Complete Admin Control
8 Step Indicator Styles
Default, Filled, Outlined, Badge, Modern, 3D, Neon, and Hexagon
8 Icon Content Types
Numbers, Custom Text, Emoji Icons, Checkmarks, Dots, Arrows, Stars, Bullets
Live CSS Editor
Copy or edit generated CSS with VS Code-style interface
🎯 Step Indicator Styles
Control the visual appearance of step indicators from Settings → Step Indicators or the Advanced Theme Creator. All styles work with any icon content type.
1. Default (Numbers)
Clean numbered circles with colored border
2. Filled Background
Solid gradient background with white text
3. Outlined Only
Transparent background with colored border
4. Badge Style
Solid color with subtle shadow
5. Modern Flat
Flat color with rounded square shape
6. 3D Effect
Gradient with depth shadow
7. Neon Glow
Dark background with glowing cyan effect
⭐ Icon Content Types
Choose what displays inside step indicators. Customize from Settings → Step Indicators or Advanced Theme Creator.
| Content Type | Example | Use Case | Customizable |
|---|---|---|---|
| Numbers | 1, 2, 3 | Standard numbered progression | ❌ Automatic |
| Custom Text | INFO, PAY, DONE | Descriptive step labels | ✅ Comma-separated |
| Emoji Icons | 📋, 💳, ✅ | Visual, modern appearance | ✅ Comma-separated |
| Checkmarks | ✓, ✓, ✓ | Completion-focused design | ❌ Automatic |
| Dots | ●, ●, ● | Minimalist progress | ❌ Automatic |
| Arrows | →, →, → | Directional flow | ❌ Automatic |
| Stars | ★, ★, ★ | Premium/rating design | ❌ Automatic |
| Circle Bullets | ◉, ◉, ◉ | Clean bullet points | ❌ Automatic |
How to Use Custom Text
- 1. Select "Custom Text" from Icon Content dropdown
- 2. Enter comma-separated text:
INFO, PAYMENT, CONFIRM, DONE - 3. Text appears inside step indicators in order
- 4. Containers automatically expand for longer text
Emoji Suggestions
🛒, 💳, 📦, ✅
📋, 📝, ✉️, ✅
👤, 🔐, ✉️, 🎉
📊, 📈, 💭, ✅
🎨 Advanced Theme Creator
Visual theme builder with live preview. Access from WooFormBuilder → Advanced Theme Creator.
🎨 Visual Controls
- ✓ Primary & secondary color pickers
- ✓ Gradient support
- ✓ Border radius sliders
- ✓ Padding/spacing controls
- ✓ Font size adjustments
⚡ Live Preview
- ✓ Real-time visual updates
- ✓ See changes instantly
- ✓ Test with actual content
- ✓ Responsive preview
🎯 Step Indicators
- ✓ 8 visual styles
- ✓ 8 icon content types
- ✓ Custom text input
- ✓ Custom emoji input
💻 CSS Export
- ✓ Real-time CSS generation
- ✓ Copy to clipboard button
- ✓ Edit mode (contenteditable)
- ✓ VS Code-style interface
GENERATED CSS
LIVE💻 CSS Classes Reference
Step Indicator Classes
| Class Name | Purpose | Applied To |
|---|---|---|
| .wfb-step-indicators | Container for all indicators | Wrapper div |
| .wfb-step-indicator | Individual step circle | Each step element |
| .wfb-step-icon | Icon/emoji content | Inner span (emoji) |
| .wfb-step-text | Text content | Inner span (text) |
🚀 Usage Examples
Example 1: E-Commerce Checkout
Example 2: Visual Emoji Steps
💡 Best Practices
3-8 characters per step for best appearance
Not all emojis display identically across devices
Ensure WCAG AA minimum for accessibility
Indicators scale responsively - test on actual devices
Ready to Customize Your Forms?
Access the Advanced Theme Creator to start designing
Learn About Multi-Step Forms →