×
HIDE

Multi Step Form with PAFE 7 (New method)

In certain cases, you desire to set up a conversation form or customize the Multi-Step elements as Previous button, Next Button, Progress Bar, etc.

This article will show you step by step to perform it.

Tutorials

Instead of creating multiple templates and assembling them, you just need to apply the Elementor Sections as your Steps.

Step 1: 

Click on PAFE dashboard > Add New Form/All Forms categories > create a new form.

Step 2:

Create a Section > edit Section > PAFE Tab > PAFE Multi Step Form 

Then name for Step Title

Step 3:

After implementing the necessary fields, drag & drop a Next Step Button to an inner section. 

Step 4:

Similar to Step 2, create one more section, enable PAFE Multi Step Form, and name for Step Title.

Then implement a Previous Step button and Submit Button into an Inner Section.

The Alternative Next and Previous Button

Besides our default multi-step form Next/Previous buttons in step 3+4, the feature also offers an Alternative way: set other elements to play the role of Next and Previous buttons. The elements could be text, image, icon, etc.

Back to the example, I will replace the default next/previous buttons by arrow icons:
– Firstly: Edit Form Steps.
– Afterward: Add arrow icons into the positions
– Finally: Edit the icons, in the PAFE tab, Enable PAFE Next/Previous Multi Step Form, and set suitable actions for the icons: Next or Previous.

Step 5:

Complete your setup in Submit Button as normal ways.

Step 6:

Use the Form Embedding widget and Enable Multi Step Form to render this form to a landing place.

Step 7:

You can customize the style of Progress Bar‘s elements via the Form Embedding widget.

PAFE Form Builder

Extensions

PAFE Widgets

Popup Trigger URL
Piotnet Addons For Elementor