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.
From the left menu, browse to Content > Forms.
On the Forms page, click on the Edit button under the Actions column for Form you wish to edit.
On the ‘Edit Form’ page
Click on any of the tabs to customise settings as required.
The preview pane will automatically update to reflect your changes.
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.
Click on the bottom right Save Changes button to save your changes when done.
You can also preview the user’s experience of using the Form. Any submission made during editing are automatically discarded.
From the left menu, browse to Content > Forms.
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.
Any content uploaded whilst previewing in browser is not automatically discarded and can be easily deleted in the moderation view.
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/
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
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
Click on any of the tabs to customise settings as required.
The preview pane will automatically update to reflect your changes.
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.
Click on the bottom right Save Changes button to save your changes when done.
You can also preview the user’s experience of using the Form. Any submission made during editing are automatically discarded.
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
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.
Any content uploaded whilst previewing in browser is not automatically discarded and can be easily deleted in the moderation view.
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
Thank you!