Understanding Form Type Preview – Testing Before Publishing

Your Safety Net for Perfect Forms #

Form preview in FORMEPIC gives you a powerful testing environment where you can experience your form exactly as your respondents will see it—before making it live. Preview mode lets you interact with every field, test validation rules, try conditional logic, and verify design choices across all devices without collecting any test data in your actual responses. This means you can catch errors, refine user experience, and ensure everything works perfectly before sharing your form with the world. The result is professional, error-free forms that deliver a seamless experience from the very first submission.

What Form Type Preview Is #

Interactive Testing Environment:

• Full-featured replica of your live form
• All fields, validation, and logic active
• Real-time interaction without saving responses
• Safe environment for unlimited testing
• Identical to published form appearance

Purpose and Value:

• Catch errors before publishing
• Test user experience flow
• Verify design and branding
• Validate field behavior
• Test conditional logic paths

Accessing Preview Mode #

From Form Builder:

1. Navigate to the Builder page for your form
2. Look for the Preview button in the builder header (top right area)
3. Click Preview to open preview mode
4. Form opens in preview overlay/dialog

Preview Interface:

• Full-screen form display
• Close button to return to builder
• Device toggle options (mobile/tablet/desktop)
• Test mode indicator (if enabled)
• All form pages accessible

Preview vs. Live Form #

Preview Mode Characteristics #

What Happens:

• Form displays exactly as published version
• All fields are interactive and functional
• Validation rules execute in real-time
• Conditional logic triggers correctly
• Calculations update dynamically

What Doesn’t Happen:

• Submissions are NOT saved to responses
• Email notifications are NOT sent
• Integration webhooks are NOT triggered
• Analytics/tracking codes are NOT fired
• Payment processing is NOT executed

Live Form Characteristics #

Published Form Behavior:

• All submissions save to responses list
• Email notifications sent as configured
• Integration webhooks trigger on submit
• Analytics track real user interactions
• Payment fields process actual transactions

Key Difference:

• Preview = Testing environment (no data saved)
• Live = Production environment (everything saved)

When to Use Preview #

Before Publishing:

• Test all form fields and validation
• Verify conditional logic paths
• Check form flow and user experience
• Review design and branding
• Test on different devices

After Making Changes:

• Verify edits didn’t break functionality
• Test new fields or logic
• Confirm design updates
• Validate new integrations setup
• Check responsive behavior

During Form Development:

• Iterative testing while building
• Quick field behavior checks
• Logic troubleshooting
• Design refinement
• User flow optimization

Preview Limitations #

What You Can’t Test in Preview:

Submission-Dependent Features:

• Email notifications (use test email feature instead)
• SMS notifications (use test SMS feature instead)
• Webhook integrations
• Thank you page redirects
• Post-submission automations

Data Persistence:

• Test submissions don’t save
• Can’t review test data in responses
• Can’t export preview submissions
• No analytics captured

Payment Processing:

• Stripe/PayPal test transactions
• Coupon code validation
• Payment success/failure flows
• Receipt generation

Important Note: For testing submission-dependent features, enable Test Mode and submit actual test responses that can be identified and cleared later.

Device Preview Options #

Accessing Device Views:

• Device toggle buttons in preview header
• Icons for mobile, tablet, desktop views
• Instant switching between devices
• No page reload required

Mobile View #

Display Characteristics:

• Smartphone screen width (~375px)
• Vertical/portrait orientation
• Touch-optimized interface
• Compact field layouts
• Stacked form elements

What to Test:

• Field tap targets (buttons, checkboxes)
• Text input keyboard behavior
• Dropdown menu usability
• Image and file upload on mobile
• Navigation between pages
• Submit button accessibility

Mobile-Specific Checks:

• Text readability at small sizes
• Button sizes (minimum 44x44px)
• Form fits within viewport
• No horizontal scrolling
• Touch gesture support

Tablet View #

Display Characteristics:

• Tablet screen width (~768px)
• Both portrait and landscape considerations
• Medium-sized touch targets
• Balanced layout density
• Moderate spacing

What to Test:

• Layout balance and spacing
• Multi-column field arrangements
• Image scaling and positioning
• Navigation usability
• Form page transitions

Tablet-Specific Checks:

• Optimal use of screen space
• Touch targets appropriately sized
• Text comfortable to read
• Fields not too spread out
• Consistent styling

Desktop View #

Display Characteristics:

• Full desktop screen width (≥1024px)
• Mouse/trackpad interaction
• Maximum layout width
• Multi-column support
• Expanded spacing

What to Test:

• Full layout presentation
• Multi-column field arrangements
• Large image displays
• Hover states on buttons/links
• Keyboard navigation (Tab, Enter)
• Focus states for accessibility

Desktop-Specific Checks:

• Form centered and well-proportioned
• Appropriate max-width (not too wide)
• Comfortable reading line lengths
• Clear visual hierarchy
• Professional appearance

Responsive Design Testing #

Cross-Device Consistency:

• Test same form on all device views
• Verify content displays correctly
• Check field arrangement adjusts
• Ensure buttons remain accessible
• Validate images scale properly

Layout Breakpoints:

• Mobile: <768px
• Tablet: 768px – 1023px
• Desktop: ≥1024px

Responsive Elements to Verify:

• Typography scales appropriately
• Images resize without distortion
• Buttons stack or inline correctly
• Navigation remains accessible
• Spacing adjusts for screen size

Switching Between Device Views #

How to Switch:

1. Click device icon in preview header
2. Form instantly adjusts to selected view
3. All data entered remains intact
4. Continue testing in new view
5. Switch as many times as needed

Seamless Testing:

• No data loss when switching
• Instant viewport changes
• Maintain form progress
• Test responsive transitions
• Compare device experiences

Testing Strategy:

1. Start with mobile view (most restrictive)
2. Complete entire form on mobile
3. Switch to tablet, verify appearance
4. Switch to desktop, verify appearance
5. Test navigation on each device
6. Verify all fields work on all devices

Tips and Tricks #

Efficient Preview Testing:

• Test mobile view first (catches most issues)
• Fill out form completely on each device
• Test all conditional logic paths
• Try invalid inputs to test validation
• Navigate forward and backward through pages

Common Testing Checklist:

• [ ] All fields display correctly
• [ ] Validation messages appear properly
• [ ] Required fields enforce correctly
• [ ] Conditional logic shows/hides fields
• [ ] Calculations update in real-time
• [ ] Navigation works on all pages
• [ ] Submit button is accessible
• [ ] Mobile view is fully functional
• [ ] Tablet view looks balanced
• [ ] Desktop view is professional

Time-Saving Tips:

• Use browser DevTools for precise breakpoint testing
• Test forms on actual mobile devices when possible
• Keep preview open while making builder edits
• Refresh preview after major changes
• Document issues found during preview

Important Notes #

Preview Accuracy:

• Preview is a 100% accurate representation of published form
• Any differences indicate a bug (report to support)
• Preview uses same rendering engine as live forms
• Device views match actual device behavior

Test Mode vs. Preview:

• Preview: No data saved, no integrations fired
• Test Mode: Data saved but marked as test, integrations fire
• Use preview for quick checks
• Use test mode for end-to-end testing

Browser Considerations:

• Preview works in all modern browsers
• Some older browsers may show slight differences
• Test on target audience’s likely browsers
• Mobile preview ≠ actual mobile device (test both)

Common Issues & Troubleshooting #

Preview Doesn’t Match Published Form:

• Solution: Clear browser cache and refresh
• Solution: Hard reload preview (Ctrl+Shift+R / Cmd+Shift+R)
• Solution: Check if form has pending unpublished changes

Device View Not Responding:

• Solution: Close and reopen preview
• Solution: Refresh browser page
• Solution: Try different device view then switch back

Fields Not Displaying in Preview:

• Solution: Check if fields are inside conditional logic that’s hidden
• Solution: Verify field hasn’t been accidentally deleted
• Solution: Ensure form has been saved recently

Preview Looks Different from Expected:

• Solution: Review design settings in builder
• Solution: Check custom CSS if applied
• Solution: Verify theme settings match your intent
• Solution: Test in different browser for comparison

Can’t Close Preview:

• Solution: Click close button or press Escape key
• Solution: Refresh browser if preview is frozen
• Solution: Check browser console for errors

Mobile View Shows Desktop Layout:

• Solution: Preview uses CSS breakpoints, not actual device detection
• Solution: Resize browser window to force responsive layout
• Solution: Check form design settings for responsive configuration

Changes Not Appearing in Preview:

• Solution: Save form in builder first
• Solution: Close and reopen preview
• Solution: Check if editing correct form version