Back to Documentation
Customization
Styling & Themes
Customize the appearance of your forms with built-in themes, custom CSS, and styling options to match your brand.
7 min read
Updated December 2024
Built-in Themes
Choose from pre-designed themes that provide professional styling out of the box. Each theme includes carefully crafted colors, spacing, and typography.
Modern
- • Clean, contemporary design
- • Rounded corners
- • Gradient accents
- • Smooth animations
Minimal
- • Simple, uncluttered
- • Thin borders
- • Subtle shadows
- • Maximum whitespace
Bold
- • High contrast colors
- • Thick borders
- • Large typography
- • Strong visual impact
Theme Configuration
Select and customize themes from the form settings:
Theme Settings Panel
Square (0px)Rounded (8px)Very Rounded (20px)
Custom CSS
Add your own CSS to completely customize form appearance:
Custom CSS Editor
/* Custom Form Styling */
/* Form Container */
.wfb-form {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}
/* Input Fields */
.wfb-field input,
.wfb-field textarea,
.wfb-field select {
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 12px 16px;
font-size: 16px;
transition: all 0.3s ease;
}
.wfb-field input:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
/* Labels */
.wfb-field label {
font-weight: 600;
color: #1f2937;
margin-bottom: 8px;
display: block;
}
/* Submit Button */
.wfb-submit-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 14px 32px;
border-radius: 8px;
font-weight: 700;
border: none;
cursor: pointer;
transition: transform 0.2s ease;
}
.wfb-submit-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
}
/* Error Messages */
.wfb-error {
color: #ef4444;
font-size: 14px;
margin-top: 4px;
}
/* Success Messages */
.wfb-success {
background: #d1fae5;
border-left: 4px solid #10b981;
padding: 12px;
border-radius: 4px;
color: #065f46;
}
Field-Specific Styling
Input Field Classes
CSS Classes for Each Field Type
Text Fields
.wfb-text-field.wfb-textarea-field.wfb-email-field.wfb-url-fieldChoice Fields
.wfb-radio-field.wfb-checkbox-field.wfb-select-field.wfb-date-fieldNumber Fields
.wfb-number-field.wfb-phone-field.wfb-currency-fieldAdvanced Fields
.wfb-file-field.wfb-custom-code.wfb-image-fieldState Classes
Valid State
.wfb-field.validApplied when field passes validation
Error State
.wfb-field.errorApplied when field fails validation
Focus State
.wfb-field:focusApplied when field is active/focused
Disabled State
.wfb-field.disabledApplied when field is disabled
Responsive Design
All themes are mobile-responsive by default. Customize breakpoints with media queries:
Responsive CSS Example
/* Desktop - Default */
.wfb-form {
max-width: 600px;
padding: 30px;
}
.wfb-field-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
}
/* Tablet */
@media (max-width: 768px) {
.wfb-form {
padding: 20px;
}
.wfb-field-row {
grid-template-columns: 1fr;
gap: 15px;
}
}
/* Mobile */
@media (max-width: 480px) {
.wfb-form {
padding: 15px;
}
.wfb-submit-button {
width: 100%;
padding: 16px;
font-size: 18px;
}
.wfb-field input,
.wfb-field select {
font-size: 16px; /* Prevents zoom on iOS */
}
}
Color Schemes
Pre-defined color palettes for quick styling:
Blue Ocean
#2563eb Primary#60a5fa Secondary#bfdbfe LightPurple Sunset
#7c3aed Primary#a78bfa Secondary#ddd6fe LightGreen Forest
#059669 Primary#34d399 Secondary#a7f3d0 LightTypography Options
Font Customization
14px
16px
Animation Effects
Add smooth animations to enhance user experience:
Animation CSS
/* Fade In Animation */
.wfb-field {
animation: fadeIn 0.5s ease-in;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
/* Button Hover Effect */
.wfb-submit-button {
transition: all 0.3s ease;
}
.wfb-submit-button:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
/* Input Focus Effect */
.wfb-field input:focus {
transition: all 0.3s ease;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
Best Practices
💡 Styling Tips
✓
Match Your Brand: Use your brand colors and fonts for consistency
✓
Contrast Matters: Ensure text is readable against backgrounds
✓
Mobile First: Test on mobile devices before deploying
✓
Touch Targets: Make buttons and inputs large enough for fingers (44px minimum)
✓
Keep It Simple: Don't over-style; clarity is more important than fancy effects
Build Custom Layouts
Use Smart Code Visual Builder to create advanced form layouts
Explore Smart Code →