See exactly how your contact form will appear to customers before going live.
Accessing Preview
- Go to Form Management (
/admin/form) - Click the Preview tab
The preview shows your form exactly as customers will see it, including:
- Your custom title and description
- Brand colors and logo
- Field labels and placeholders
- Button text and styling
Contact us
We would love to hear from you.
Preview Features
Live Updates
The preview automatically reflects your current form settings:
- Colors update when you change branding
- Text changes when you edit titles and descriptions
- Logo appears when you add a logo URL
Preview Mode Indicator
When viewing the preview, the form is in "preview mode":
- Submissions are disabled (button shows "Preview Mode")
- This prevents accidental test submissions
- You can still see the full form appearance
Responsive Preview
The preview shows how your form looks on different screen sizes:
- Desktop: Full-width layout
- Mobile: Responsive, stacked layout
- Test on different devices for best results
Using Preview Effectively
Before Going Live
Always preview your form before sharing:
- Check all text is correct
- Verify colors match your brand
- Ensure logo displays properly
- Test on mobile devices if possible
After Making Changes
After editing your form:
- Click "Save Changes" in the Edit tab
- Switch to the Preview tab
- Verify all changes appear correctly
- Check for any layout issues
Viewing Live Form
To see your form as customers will experience it:
- Go to the Embed tab
- Copy your form URL
- Open it in a new browser tab
- This shows the actual live form (not preview mode)
Tip: Use the "View Live" button in the form management header to open your form in a new tab.
Troubleshooting Preview
Changes Not Appearing
- Make sure you clicked "Save Changes"
- Refresh the preview tab
- Clear your browser cache if needed
Logo Not Showing
- Verify the logo URL is publicly accessible
- Check the URL is correct and complete
- Ensure the image format is supported (PNG, JPG, SVG)
Colors Look Different
- Verify hex color codes are correct (include the #)
- Check for typos in color values
- Ensure colors have proper contrast