0 0 0 0

NEX-Forms Documentation

Documentation & Tutorials for NEX-Forms version 8.0 and above

Docs » Form Creation » Form Preview
Form Preview

The live preview feature in the NEX-Forms Builder allows you to see your form as it will appear to users in real time. This functionality is crucial for ensuring that your form looks and behaves as expected before it goes live. By using the live preview, you can make adjustments on the fly and immediately see the results of those changes.

This article will guide you on on how to preview your forms.

In this Article

How to Preview a Form
  1. Edit or Create a New Form.
  2. Click on the "Split" or "Preview" view in the form editor.
    NEX-Forms - Figure Arrow
    NEX-Forms - Figure Arrow
    NEX-Forms - Form Preview - Figure - 1
Preview Options
This section will guide you on using the preview options.
Split Preview
The Split Preview Option gives you a 50/50 window with the Form Editor on the left and the live preview to the right. Changes made in the form editor (left side) will give you real-time updates and immediate feedback in the preview (right hand side) for a faster and more efficient design process, as you can see the impact of your changes right away.

  1. Click on the "Split" view in the Form Editor.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  2. This will activate the Split Preview Option.
    NEX-Forms - Figure Arrow
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
Full Screen Preview
Unlike Split Preview the Normal Preview Option gives you a full view of the form preview. This is usefull when you are building forms on smaller screens like a laptop which will make a 50/50 split preview to cramped. Use this option if you are building forms on smaller screens.

  1. Click on the "Preview" view in the Form Editor.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  2. This will activate the Full Screen Preview Option.
    NEX-Forms - Managing Fields - Figure - 1
Exit the Preview
There are 2 options to exit the form preview:

  1. Option 1:
    Click on the "X" in the top right corner of the Form Preview.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
  2. Option 2:
    Hit Esc on your Keyboard.
Device Preview
While in Split or Full Screen Preview or Full Preview view you can change the device in which to preview the form between, Desktop/laptop, Tablet and Mobile.
NEX-Forms - Managing Fields - Figure - 1
Destop/Laptop Preview
  1. Edit or Create a New Form.
  2. Click on the "Split" or "Preview" view in the form editor.
  3. Click on the fill screen button.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
Tablet Preview
  1. Edit or Create a New Form.
  2. Click on the "Split" or "Preview" view in the form editor.
  3. Click on the Tablet device button.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
Mobile Preview
  1. Edit or Create a New Form.
  2. Click on the "Split" or "Preview" view in the form editor.
  3. Click on the Mobile device button.
    NEX-Forms - Figure Arrow
    NEX-Forms - Managing Fields - Figure - 1
Alternative Preview Method
Althought we at Basix take all preventative action in coding NEX-Forms to the WP best practice standards, when you embed a NEX-Forms form on the front end of your WordPress site, the form's behavior and appearance can be influenced by other plugins and the active theme. This can lead to differences between how the form appears in the NEX-Forms Builder preview within the WordPress backend and how it appears on your live site.

This section will guide you on previewing a form to make sure that 3rd party plugins and the active theme is not creating any visual or functional issues in your front end environment before going fully live with your form.
  1. Create a new WordPress Page, and call it for example "Live Form Testing".
  2. Copy the NEX-Forms shortcut and past it into this test page.
  3. Change the page's Visibility Setting to Private. This will ensure that your public users wont see this page and its only visible to you.
  4. Publish the page.
  5. Click on view page.
  6. Test the form in this alternative live preview environment.
  7. If everything looks good and the form is fully functional then paste the shortcode into your live page.
Was this article helpful?
Yes
No
Still having trouble? How can we help you?
This article was last updated on 19 November 2024
Popular Articles
Stay in Touch
Get the latest NEX-Forms news and info by following us on:
In this article