Form Design & Styling
Create beautiful forms that match your brand with NexusForm’s extensive design options.
Accessing Design Settings
Section titled “Accessing Design Settings”- Open your form in the builder
- Click the Appearance tab in the right sidebar
- Explore color schemes, styles, and layout options
Color Schemes
Section titled “Color Schemes”Pre-Built Color Schemes
Section titled “Pre-Built Color Schemes”Choose from 12 professionally designed color schemes:
Light Themes
Section titled “Light Themes”| Scheme | Description |
|---|---|
| Default | Clean white with neutral accents |
| Forest Light | Soft greens with natural tones |
| Cool Ocean | Calming blues and teals |
| Matcha Calm | Muted green tea inspired palette |
| Arctic Light | Cool grays with icy blue accents |
| Golden Dusk | Warm yellows and oranges |
| Coral Bloom | Vibrant coral and pink tones |
Dark Themes
Section titled “Dark Themes”| Scheme | Description |
|---|---|
| Forest Dark | Deep forest greens |
| Sunset Dark | Rich oranges on dark background |
| Midnight Blue | Deep navy with blue accents |
| Cosmic Purple | Dark with purple highlights |
| Deep Sea | Ocean depths inspired palette |
Applying a Color Scheme
Section titled “Applying a Color Scheme”- Go to Appearance tab
- Click on Color Scheme
- Browse available schemes
- Click to select and preview
- Changes apply immediately
Custom Colors
Section titled “Custom Colors”Create your own color scheme:
-
Select Custom at the bottom of color schemes
-
Configure each color:
- Background - Form container background
- Text - Primary text color
- Button - Submit button background
- Button Label - Submit button text
- Outline Button - Secondary button style
-
Use the color picker or enter hex codes
-
Preview changes in real-time
Form Styles
Section titled “Form Styles”Choose how form fields are styled:
Basic Style
Section titled “Basic Style”- Sharp corners
- Standard borders
- Classic appearance
- Best for: Professional, corporate forms
Flat Style
Section titled “Flat Style”- No visible borders
- Subtle background fill
- Inset focus effect
- Best for: Modern, minimal designs
Rounded Style
Section titled “Rounded Style”- Rounded corners on fields
- Softer appearance
- Friendly feel
- Best for: Consumer-facing, approachable forms
Applying Styles
Section titled “Applying Styles”- Go to Appearance tab
- Find Form Style section
- Click style to preview
- Style applies to all fields
Form Layouts
Section titled “Form Layouts”Default Layout
Section titled “Default Layout”Form renders inline where placed. Full width within its container.
Use when: Embedding forms within page content
Boxed Layout
Section titled “Boxed Layout”Form appears in a centered card with shadow/border. Creates visual separation from page content.
Use when: Form is the main focus of the page
Float Layout
Section titled “Float Layout”Form appears as a floating modal triggered by a button. Minimizes screen space until needed.
Settings:
- Button Position - Bottom-left or bottom-right
- Button Text - “Contact Us”, “Get Help”, etc.
- Button Icon - Optional icon (chat, mail)
Use when: Want a contact widget that doesn’t take up page space
Background Options
Section titled “Background Options”Solid Color
Section titled “Solid Color”Use the color from your selected scheme or customize.
Gradient Background
Section titled “Gradient Background”Create a gradient effect:
- Select Gradient as background type
- Choose start and end colors
- Select gradient direction
Image Background
Section titled “Image Background”Use an image as form background:
- Select Image as background type
- Upload or enter image URL
- Adjust overlay opacity if needed
Typography
Section titled “Typography”Forms inherit your theme’s typography by default. The form uses:
- System font stack for optimal performance
- Appropriate sizing for readability
- Proper contrast ratios for accessibility
Responsive Design
Section titled “Responsive Design”Mobile Optimization
Section titled “Mobile Optimization”All forms automatically adapt to mobile:
- Fields stack vertically on small screens
- Touch-friendly input sizes
- Readable font sizes maintained
Breakpoints
Section titled “Breakpoints”- Mobile (sm) - 370px and below
- Desktop (lg) - 1074px and above
Per-Field Responsive Settings
Section titled “Per-Field Responsive Settings”Set different column spans per breakpoint:
- Select a field
- Open column span settings
- Set mobile and desktop widths independently
Design Best Practices
Section titled “Design Best Practices”Contrast
Section titled “Contrast”- Ensure text is readable against backgrounds
- Use sufficient contrast ratios (WCAG AA minimum)
- Test with different lighting conditions
Consistency
Section titled “Consistency”- Match form colors to your brand
- Use consistent styling across all forms
- Maintain visual hierarchy
Simplicity
Section titled “Simplicity”- Avoid too many colors
- Keep styling clean and professional
- Let content be the focus
Testing
Section titled “Testing”- Preview on multiple devices
- Check both light and dark themes
- Test with real users if possible
Example: Branded Contact Form
Section titled “Example: Branded Contact Form”- Choose base scheme - Pick closest to your brand colors
- Customize colors:
- Set button to your brand color
- Adjust text for readability
- Select style - Rounded for approachable feel
- Set layout - Boxed for emphasis
- Preview - Check on mobile and desktop