Preview

Preview checks a form's rendering and behavior before you embed it. Core Forms offers a compact builder preview and a larger Form Preview dialog with Desktop and Mobile widths.

Open a working preview

Edit the form's fields and layout.
Click Preview in the builder toolbar. If fields have unsaved changes, use Save & preview to save them before opening the dialog.
Use Desktop or Mobile to change the preview width.
Check labels, required fields, conditional fields, and multi-step navigation.
Close the dialog to return to the editor.

Desktop form preview with step navigation and the notice that submissions run configured actions

A saved-form preview is a working form. Submitting it runs the form's configured actions, including emails, webhooks, and payment flows where enabled. Use test recipients and provider test mode when testing those actions.

Check mobile width

Select Mobile in the same dialog. Confirm that long step labels wrap, controls fit, and the Next button remains easy to reach.

Mobile preview with wrapped step buttons and fields fitting the narrow form

Compact builder preview

The builder can show a narrow preview beside the canvas when the field inspector is not in use. Use the full dialog for a clearer view of the complete flow. Select a field on the canvas to return to its editing controls.

What the preview includes

The preview loads the Core Forms rendering and runtime assets independently of the WordPress theme. Multi-step controls have their own scoped layout styles. This makes the isolated preview useful for checking the form itself.

Your published page can still contribute surrounding spacing, typography, or custom CSS. After embedding the form, check that actual page too.

Template previews are different

The Preview button on a template card opens a sample. You can inspect its fields and step navigation, but sample submission is blocked. After creating a form from the sample, its saved-form preview runs the configured actions.

If the preview looks out of date

Save the latest changes and reopen the preview. If saving reports an error, resolve it before testing. Check that you are previewing the intended form and that custom CSS selectors match the rendered controls.