Add Preview Page to Forms using Webform in Drupal

When you create a form using the Webform module, you may need a “preview” step. This is a page or step which allows the user who’s submitting the form to preview what’s being submitted.

If they see a mistake, they can go back to the form and fix the error. Once the form has been filled out and previewed then, it can be submitted.

Webform allows you to quickly create a preview step in any form, and in this tutorial, you’ll learn how to implement it.

Want to learn more about Webform? Then check out our tutorial “ Getting Started with Webform in Drupal “

📧Get notified when new tutorials are published. Subscribe to our newsletter.

Getting Started

Before we can begin, go download Webform.

composer require drupal/webform

Then go to Extend (/admin/modules) and install Webform and Webform UI.

Add Preview

Go to the settings page for a form. We will use the default Contact form that comes with Webform when you install it.

1. Go to Structure, Webforms and click on the Settings from the Operations column.

2. Then click on the Form tab (admin/structure/webform/manage/contact/settings/form).

3. Scroll down to “Form preview settings” and adjust the “Enable preview page” accordingly.

I generally make the preview required, but you can make it optional if you like.

4. Once enabled, scroll down and click on Save.

Test Preview

Go to the form and you should see a page wizard at the top with a “Preview” step and a “Preview” button.

Fill out the form and click on Preview. You’ll then see a preview of the submission before it’s submitted.

Preview Settings

Let’s now take a look at a few of the preview options.

Go back into the form settings, then click on Form (admin/structure/webform/manage/contact/settings/form) and scroll down to “Form preview settings”.

Preview label: This option allows you to change the label in the page wizard.

Preview page title: This option allows you to change the page title.

Preview message: This option allows you to change the message that’s displayed on the preview page.

If you do not want a message to appear at all then add [none] into “Preview message”.

Control which Fields are Included in the Preview.

You can even control which fields are included in the preview from the “Included preview values” section.

Uncheck which fields you do not want to be included. This is handy for when you have hidden fields used for JavaScript but you don’t want them visible.

Summary

Adding a preview step into forms is a nice touch for users as they can review and make sure what they have entered is correct. Webform makes it easy to add a preview step by simply selecting a radio button.

Originally published at https://www.webwash.net