Previewing Forms

There are two ways you can preview a Form:

• Preview in the visual editor whilst editing – good for seeing your changes as you customise the Form and without saving changes.
• Preview in a new browser window – does not include the user interface of the visual editor so you see a more realistic view of the Form, but it only shows saved changes.

How to preview a Form whilst editing

Step 1: Navigate to Forms

From the left menu, browse to Content > Forms.

Step 2: Select the Forms you wish to edit

1. On the Forms page, click on the Edit button under the Actions column for Form you wish to edit.

Step 3: Edit and preview your changes

On the ‘Edit Form’ page

1. Click on any of the tabs to customise settings as required.
2. The preview pane will automatically update to reflect your changes.
3. You can also resize the width of the preview pane to mobile, tablet and desktop sizes by clicking on the corresponding icons in the toolbar at the top.
4. Click on the bottom right Save Changes button to save your changes when done.

How to preview a Form in a browser

Step 1: Navigate to Forms

From the left menu, browse to Content > Forms.

Step 2: Select the Form you wish to preview

1. On the Forms page, click on the View button under the Actions column for Form you wish to preview. The preview will open in new browser tab/window.

You can also resize the browser window to common or specific sizes using the built-in Responsive Design Mode feature available in most browsers:

• Firefox - from the keyboard, press Ctrl + Shift + M (or Cmd + Opt + M on macOS). For full details, see https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
• Chrome - open the Developer Tools (Menu > Tools > Developer Tools, Cmd + Opt + I on macOS or F12 / Ctrl + Shift + I on Windows and Linux), then enable the browser emulator by clicking the Toggle device toolbar icon in the top left of the Developer Tools. See https://developer.chrome.com/docs/devtools/device-mode/
• Edge - from the keyboard, press Ctrl + Shift + M (or Cmd + Opt + M on macOS). For full details, see https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/device-mode/

Updated on: 03/02/2023