How to Enable Entry Preview for Users in WordPress Multi-Part Forms?

Enable Entry Preview in WordPress Multi-part Forms

Want to learn how to enable the entry preview option for users in WordPress multi-part forms? Let us help you with an easy step-by-step guide that’ll assist you in making one for your WordPress website.  

The preview option lets users view the data they’ve entered to fill into the previous parts of a multi-part form. This way, the users can go back and change the information they’ve provided if need be. 

So, this article will give you a detailed guide on how you can enable the entry preview for users in WordPress multi-part forms. 

Best Way to Enable Entry Preview in WordPress Multi-Part Forms  

Let’s be honest, nobody likes to fill out long forms. But here’s a little trick on how you can get your users to actually complete and submit your form. 

You can create a multi-part form that divides the long form into multiple steps. So, the form fields are more organized and easier for users to fill.  

On top of that, you can provide a preview of all the data the users filled in the fields before they submit the form. This prevents any incorrect data being entered into the system. The users can simply go to the previous part and edit the incorrect data. 

Enable Entry Preview In Multi Part Form

Therefore, all you need is the best form builder plugin, Everest Forms.  It’s a feature-rich drag and drop form builder which is suitable for making any kind of online form.

Everest Forms To Enable Entry Preview in WordPress Multi Part Forms

Most importantly, it provides you with the Multi Part Forms add-on. This add-on not only helps you create beautiful multi-part forms, but also enables entry preview for them. 

Multi Part Addon Enable Entry Preview In WordPress Multi Part Forms

With the entry preview feature, you can: 

  • Gather correct information from users 
  • Let users quickly go back to the previous part to edit the entries 

That’s why, we’ll be using Everest Forms to enable entry preview in WordPress multi-part forms in this tutorial. 

How To Enable Entry Preview in WordPress Multi-Part Forms 

Here’s a step-by-step process of enabling entry preview in WordPress multi-part forms. 

Step1: Install and Activate Everest Forms and Everest Forms Pro 

The first thing you need to do is set up Everest Forms and Everest Forms Pro on your WordPress dashboard. 

You’ll need both the free version and pro version of the plugin. That’s because the Multi Part Forms add-on is only available in the premium version (Plus plan or above). 

For a detailed tutorial, go through our article on how to install Everest Forms Pro. It’ll guide you on the process of installing the free and premium versions of Everest Forms.

Step2: Install and Activate Multi Part Forms Add-on 

Since you’ve got the pro version, you can now easily install any of the Everest Forms add-ons.

For that, navigate to Everest Forms >> Add-ons. After that, search for Multi-Part Forms. Then simply, click on the Install Addon button and press Activate.  

Multi Part Addon

You’ll know the add-on is active when the status says Activated

Step3: Create a New Multi-part Form 

Once you’ve installed and activated the Multi Part Forms add-on, go to Everest Forms >> Add new. In the Add New Form page, you’ll find a collection of pre-built form templates. However, you can also start from scratch. 

New Start from Scratch

In this tutorial, we’ll show you how to create a multi-part form from scratch. So, click on Start From Scratch and name your form. Here, we’ll name it “Multi-Part Form” and press Continue

Pop Up Name

This takes you to the Everest Forms form builder. But before you start creating your form, you must enable the multi-part feature.

For that, navigate to Settings on the top and click on the Multi-Part tab. Here, you’ll need to enable the Multi-Part Form option, and you’re good to go. 

Enable Multi Part

Right after you enable this option, the first part appears in the form builder. It’s titled Part Title, which you can later change from the Page Options

Multi Part Option Settings

Now, all you need to do is drag your desired field and drop it into your form. 

Drag Drop Multi Part Form

To add another part to your form, click on Add New Part, which you can find at the bottom of your form. This will open up the next blank page for you where you can keep adding desired fields like before. 

Part Title Add New Part

You can also adjust the individual parts or move their position. Simply drag the part right or left for that. 

Move Multi Parts

Similarly, you can edit the Part Title and labels under the Page Options. Here we’ve named the parts “Contact Details” and “Additional Information”.  

Title And Label

For a more detailed tutorial, check out this article on how to create a multi-step form using Everest Forms.

Finally, click on the Save button to save the changes you made to your form. 

Step 4: Enable Entry Preview Option 

Now, here’s the important part. The Multi Part Forms add-on also lets you enable entry preview in the form. This feature can be applied to all the parts except the first one since it doesn’t have any previous parts. 

To enable the entry preview option, select the part for which you’d like to show a preview. After that, go to Page Options on the left, and scroll down to find Enable Preview. Then, enable this option by ticking the checkbox. 

Enable Preview

Here, you can also add a custom HTML message in the Preview Message box. This will be later displayed on the part where you’ve enabled the preview.   

Preview Message

Once you’ve set the preview message, move further to select the layout from the given three layouts.  

Three Preview Layout
  • Basic Layout: It has a simple interface followed by the user’s input or selection. Here’s an example of how this layout appears on the front end. 
Basic Layout
  • Table Layout: It also uses a text layout but places the field labels and user’s input in two separate columns. Hence, this occupies less space on the form 
Table Layout
  • Column Layout: The entry data is displayed in 3 columns. 
Column Preview Layout

You can also add custom CSS classes for further customization. 

CSS Class

Save the changes and you’ve successfully enabled entry preview for the form. 

Step 5: Configure Multi-part Form Settings 

Next, you can open the Settings tab of the form to configure multi-part form settings. Here, you’ll find 4 sections with various customization options. 

General: With the General settings, you can edit Form description, Form disabled message, form layout, etc. 

General Settings

Email: The Email settings allow you to create admin and user email notification templates. 

Email Settings

WebHook: Using a WebHook, you can send the form data to any external URL. All you have to do is set the Request URL, Request Method, Request Format, and Request Header

WebHook Settings

Multi-Part: This section enables you to customize the progress indicator, part alignment, and so on. 

  • Progress Indicator: It’s a progress bar by default. However, you can choose Circle Bar, Arrow Steps, or None from the drop-down. 
  • Progress Indicator Color: You can select the desired color for the progress indicator. 
  • Part Navigation Alignment: With this option, you can select a suitable alignment for the part buttons. You can set it on the right, left, center, or split.  
Multi Part Settings

You can now click on Save to save the changes you’ve made to the form. 

Step 6: Add Your Form to the Website 

You’ve successfully created a multi-part form using Everest Forms and enabled entry preview for it. But it won’t be visible to your users unless you display your form on the website.  

Hence, to add the form to your site, you can use any of these two methods. 

The first way is by using the form shortcode. You can simply copy the shortcode you see at the top of the form builder.

Copy Form Shortcode

Then, create a new page or post, and you’ll get to the Gutenberg editor. Here, press on the Add Block (+) icon and search for the Shortcode block. Then, click on the block to add it to the page or post.

Short Code Block

Next, paste the shortcode you previously copied into the block, and click on the Publish button. 

Paste Shortcode

That’s it! Your form will be displayed on your site.  

Alternatively, you can use the Everest Forms block to display your form. For that, click on the Add Block button and search for the Everest Forms block.

Everest Forms Block

Add it to the page and select your WordPress multi-part form from the drop-down.  

Select Multi Part Form

Finally, you can hit the Publish button at the top. 

Wrapping it Up! 

And that’s a wrap for our guide on how to enable the entry preview option for users in WordPress multi-part forms. With a feature-rich form builder plugin like Everest Forms, you can create a multi-step form and enable entry preview for it in no time!  

Besides, the possibilities with Everest Forms are endless. You can use this powerful plugin to enable conditional redirection after form submission, customize the form style, and more. 

Read more about Everest Forms on our blog if you’re interested. You can even check our YouTube channel for easy video tutorials.  

Also, don’t forget to follow us on Facebook and Twitter for future updates. 

WPEverest Author

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top

Pin It on Pinterest