Setting up a Multi-Step Landing Page Form

Growing in popularity, the multi-step form is a feature designed to help you crush those conversion rates, with an easy, step-by-step registration process on your landing page.

Pagewiz provides its own solution resembling the multi-step form – the multi-step landing page form:
you can Use Pagewiz to create a multi-step landing page form by designing multiple landing pages and linking them together so they operate as a multi-step landing page form.

The following explanation demonstrates how to create a multi-step landing page form using Pagewiz.
Each step of the form requires creating a new landing page. For instance, a three-step form will require three separate landing pages.

For the following example I have decided to build a two-step landing page form:

Step 1:

Design a primary landing page with a form containing your desired fields. This landing page is actually your form’s 1st step, and should have the fields you would like to show first.
Don’t forget to change your button’s text from ‘Submit’ to ‘Next’, ‘Continue’, ‘Click to Continue’, or some similar label.
The first step in this example collects name and related email addresses:

Step 2:

Design your secondary landing page, which will operate as your landing page’s form 2nd step. You can duplicate your primary landing page so both pages use the same design, or create a new page. To this landing page add a form including the fields you would like to appear on the second step of the form.

Step 3: 

On your secondary landing page, add hidden fields that are identical to the fields you have created on your primary landing page (step 1), like so:

multi2.png

Step 4: From your primary landing page set the form redirection to the secondary landing page you have created in the second step, like so:

multi3.png

Step 5: Add an HTML embed element to your secondary landing page and paste in the following code:

<script>
$( document ).ready(function() {
 // Set into (hidden) textboxes
 $('#PrpVeFoD').val( '{=Name}' );
 $('#VOPUaLml').val( '{=Email}' );
});
</script>

This code is designed to pre-populate the form’s hidden fields with the information collected on your primary landing page and should be modified like so:

  • The text marked in green is the ID of the hidden field element located on your secondary landing page.

To obtain this ID you need to extract it from your landing page’s HTML code:

  1. Right-click on your form field and click ‘Inspect’.
  2. An HTML code will be presented to you at the bottom of your browser.
  3. Locate and copy the ID of the hidden field element and paste it in the correct place inside the HTML code you have embedded.

multi4.png

  • The text in blue the arrows point to is the name of the hidden field on your secondary landing page. The hidden field inherits its value from the field it is bound to in the JavaScript code in step 5.

That’s it! You have successfully set up your multi-step landing page form.

Note:

  • Each step of the form is actually a separate landing page.
  • To add more steps to your landing page form, simply create more landing pages and follow steps 2 – 4. The HTML code (step 5) should be embedded only on the last step landing page, and should include all the fields created on previous pages.
  • Each field can appear only once on all landing pages.
  • All lead information captured will be visible on your last step landing page.
  • All landing pages used in the multi-step form have to be set under the same domain URL.

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.