Design & Styling
Make your forms beautiful and on-brand with pre-built themes, custom colors, fonts, and advanced styling options.
Design Overview
WorkForm offers powerful design tools to match your forms to your brand. From simple theme selection to advanced CSS customization, you have complete control over how your forms look and feel.
Choose from professionally designed themes that work perfectly out of the box.
Add your logo, choose brand colors, and customize fonts to match your identity.
Single column, multi-column, card-based layouts - choose what works best.
Advanced users can add custom CSS for pixel-perfect control (Professional+).
Pre-built Themes
Start with a beautiful theme and customize from there. All themes are fully responsive and optimized for conversion.
Best for: SaaS products, tech companies, professional services
Best for: Creative agencies, events, consumer brands
Best for: Portfolios, luxury brands, editorial content
Custom Branding
Make your forms truly yours with custom branding options.
Upload Your Logo
Add your company logo to the form header. Supports PNG, SVG, and JPG. Recommended size: 200x60px.
Choose Primary Color
Your primary brand color for buttons, links, and accents. Use the color picker or enter a hex code.
Set Background
Choose a solid color, gradient, or upload a background image. Supports patterns and illustrations.
Customize Button Style
Rounded, square, or pill-shaped buttons. Choose what matches your brand aesthetic.
Professional and Business plans can remove the "Powered by WorkForm" footer and customize the thank you page completely with your own branding.
Typography
Choose fonts that match your brand voice and improve readability.
Inter - Modern & Clean
A versatile sans-serif perfect for SaaS products and modern brands. Highly readable at all sizes.
Georgia - Classic & Elegant
A traditional serif font that conveys trust and sophistication. Great for professional services.
Roboto - Friendly & Approachable
Google's workhorse font. Warm and friendly while maintaining professionalism.
System Font - Fast & Native
Uses the visitor's operating system font. Loads instantly and feels native.
Custom Fonts (Professional+)
Upload custom fonts or use any Google Font. Perfect for maintaining strict brand guidelines.
Layout Options
Best for: Long forms, surveys, conversational flows. Highest completion rates.
Best for: Short forms, contact forms, registration. Better for desktop users.
Best for: Multi-step forms, applications. Good visual hierarchy.
Mobile Responsiveness
All WorkForm forms are automatically mobile-responsive. Customize the mobile experience for better conversion.
Use the device preview in the form editor to see how your form looks on desktop, tablet, and mobile before publishing. Test the experience on each device.
Custom CSS
For advanced customization, add your own CSS to override any styles. Available on Professional and Business plans.
/* Custom button styles */
.workform-button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 8px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Custom input styles */
.workform-input {
border: 2px solid #e5e7eb;
border-radius: 12px;
padding: 14px 16px;
transition: all 0.3s ease;
}
.workform-input:focus {
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
/* Custom question spacing */
.workform-question {
margin-bottom: 32px;
}Use browser dev tools to inspect class names and override styles precisely.
- • Test thoroughly on all devices after adding custom CSS
- • Use specific selectors to avoid breaking form functionality
- • Avoid !important unless absolutely necessary
- • Check dark mode compatibility if your form supports it
- • Keep custom CSS minimal for faster page loads