Preview Form Sandboxing

Ninja Forms 3.0 introduces the sandboxed preview page for form building. The sandboxed preview is a user specific sandbox, rendering a person’s changes specific to their user session. Furthermore, it renders the form within the context of the site’s active theme, which gives you all the styling that your heart desires.

This is very different than what we expect from WordPress form builders. Normally, the expectation is either a single saved state without a preview, or if there is a preview then it is displayed in the admin outside the context of the active theme.

The Ninja Forms Sandbox Preview renders the form within the context of the site’s active theme.

This solution also addresses a major pain point from Ninja Forms 2.x, where the created Preview Page was being deleted from the site. You can read more about the issue and the solution, which I refer to as the “Invisible Preview Page”.

How it Works

The new backbone-driven form builder uses data models for organizing settings for the form, form fields, form actions, etc. These models use one-way data binding to synchronize changes with a PHP preview object on the backend. The preview object stores a single form state for display, which is separate from the live form on which the preview is based.

nf-preview-drawing

With each change the preview object is being updated, so that when visiting the preview page the preview object is served as the form. If there is no preview object, then one is built using the latest published version of the form. When the form is Published (Saved), backbone sends a separate request to update the form object also dumps the preview object.

Preview sandboxing is something that we have been wanting for a long time

This new sandboxing feature will allow site owners better control of changes to their forms and how / when they publish those changes live. Preview sandboxing is something that we have been wanting for a long time and are very happy for this feature to see the light of day.