Customize Form Styling
Customizing your Form Styling
Summary: Brand your lead capture forms with custom colors, fonts, and layouts that match your website and business identity.
Overview
Professional styling makes your forms more trustworthy and increases completion rates. growlio's styling options let you match forms to your brand perfectly - from colors and fonts to button styles and spacing. This guide shows you how to create beautiful, on-brand forms that convert visitors into leads.
Prerequisites
- Existing form created in form builder
- Brand guidelines (colors, fonts, logos)
- Member-level permissions or higher
- Understanding of basic design principles
How to Customize Form Styling
Step 1: Open Form Settings
Navigate to Business > Lead Forms and select the form you want to style. Click the "Design" or "Styling" tab in the form editor.
Step 2: Choose Form Theme
Select a base theme to start from: Classic, Modern, Minimal, or Bold. Themes provide professional styling you can then customize further.
Tip: Choose themes that align with your brand personality. Modern works for tech companies, Classic for professional services.
Step 3: Set Primary Brand Color
Enter your primary brand color using hex code or color picker. This color applies to buttons, field focus states, and accents throughout the form.
Step 4: Configure Secondary Colors
Set secondary colors for backgrounds, borders, and text. Maintain sufficient contrast for readability while matching your brand palette.
Tip: Use a contrast checker to ensure text is readable on your chosen background colors.
Step 5: Select Typography
Choose fonts for headings and body text. Select from web-safe fonts or upload custom fonts matching your brand typography.
Step 6: Customize Button Styling
Configure submit button appearance: size, shape (rounded vs square), color, hover state, and text. Make buttons prominent and clickable.
Tip: Use contrasting colors for buttons so they stand out. Test hover states to ensure good UX.
Step 7: Style Input Fields
Adjust input field styling: border style, background color, text color, focus state, and padding. Ensure fields are easy to identify and use.
Step 8: Configure Spacing and Layout
Set margins, padding, and spacing between form elements. Proper spacing makes forms easier to scan and less overwhelming.
Step 9: Add Background Styling
Choose background style for the entire form: solid color, gradient, or image. Ensure backgrounds don't interfere with form readability.
Tip: If using background images, add a semi-transparent overlay to ensure text remains readable.
Step 10: Style Form Header
Customize the form title and description styling: alignment, size, color, and spacing. Add your logo if desired for brand recognition.
Step 11: Configure Error and Success Messages
Style validation error messages and success confirmations to match your brand while ensuring they're noticeable.
Step 12: Preview Across Devices
Test your styled form on desktop, tablet, and mobile using the preview function. Ensure styling works well on all screen sizes.
Tips & Best Practices
- Maintain brand consistency across all forms
- Use sufficient color contrast for accessibility
- Keep styling clean and professional, avoid clutter
- Make buttons prominent and obviously clickable
- Use your brand's official colors and fonts
- Test on various devices before publishing
- Ensure mobile styling is touch-friendly
- Add subtle animations or transitions for polish
- Keep forms readable with proper text sizes
- Use whitespace effectively to reduce overwhelm
- Style error messages to be noticeable but not alarming
- Match form styling to your website's design
Troubleshooting
Issue: Custom colors not applying
Solution: Ensure hex codes are entered correctly (include #). Clear browser cache and reload. Check if theme overrides are preventing custom colors. Try using the color picker instead of manual entry.
Issue: Form looks broken on mobile
Solution: Use responsive preview to identify issues. Ensure font sizes aren't too small. Check that buttons are large enough for touch. Test on actual mobile devices, not just preview.
Issue: Custom fonts not displaying
Solution: Verify font files are uploaded correctly and in supported formats. Check font names are spelled exactly right. Use web-safe fonts as fallbacks. Ensure font licenses allow web use.
Issue: Background image obscures form content
Solution: Add a semi-transparent overlay layer. Increase text color contrast. Use lighter background images. Position background images carefully. Consider solid colors instead.
Issue: Styling looks different after publishing
Solution: Clear website cache where form is embedded. Ensure embed code is up to date. Check for CSS conflicts with your website's styles. Use iframe embed if CSS conflicts persist.