Company Blog Support
Martin Cogburn
posted

Contents

    Back to Top

    Legacy Smart Forms: Create a Multi-step Smart Form

    Note: This knowledge base article covers multi-step forms in our legacy Smart Forms and Legacy Landing Pages. For an easier way to create modern, mobile-responsive multi-step forms using ONTRAforms, see this article instead.

    What is a Multi-step Form?

    A multi-step form is a form that begins on one page and continues on another page (or multiple). Multi-step forms are commonly used for longer forms in order to make them less of a chore to fill out all at once. They can also be used for various other purposes.

     multi2.png

    To create a multi-step form in ONTRAPORT, you'll need to create two or more Smart Forms. The first of these Smart Forms, part 1 of your form, can live on any web page or Landing Page you desire but the second and any subsequent Smart Forms (part 2 of your form and onward) must live on a PURL (Landing Page) created in Sites > Landing Pages > Legacy Pages in order to pass on the contact information from one form to the next.

     

    How to Create a Multi-step Form

    1. Create/design one Smart Form for each part of your multi-step form. You will return to edit these later.

    2. The initial form must contain at least the First Name and Email fields in order for the multi-step form to work correctly.

    3. You will create a Landing Page for each form beyond the first in Sites > Landing Pages > Legacy Pages

    4. For the second form in the series, obtain the HTML Version code. Copy and paste this code into the HTML Layer on the Landing Page for the second form. Here's how:

      1. Open the second Smart Form for editing, click the Publish button and select the HTML Version tab. Select all of the code and copy it to the clipboard.

      2. Add an HTML Layer on the Landing Page for the second form and paste the HTML Version code into it

      3. Choose your hosting option for your Landing Page and Save.

      get-html-code.png legacy-html-layer.png

    5. Open the initial form for editing again, click the Settings tab and choose the Landing Page you created above as theThank You Page. You select the Landing Page in the Use this landing page drop down:

      select-landing-page.png

      The Thank You Page of any multi-step form MUST be a PURL (Landing Page) selected from the Use this landing page drop down in order to receive information submitted on the prior form.

    6. Repeat this process for each form in the series. Always add the HTML Version of the Smart Form to an HTML Layer on the Landing Page. Then, specify that Landing Page as the Thank You Page of the form prior to it in the series.

    Important Facts

    • The initial form must contain at least the First Name and Email fields in order for the multi-step form to work correctly.

    • The initial form in the series does not have to be on a page that ONTRAPORT hosts but the second and any subsequent forms MUST be on an ONTRAPORT Landing Page, with the form's HTML Version code pasted into an HTML Layer. That Landing Page must be the Thank You Page for the prior form in the series.

    • You do not need to use the Pass CGI Variables option. It is only used if you have other scripts that need to read the form data from the URL that is used to visit the Thank You page.

    • If the initial form lives on a WordPress site (integrated or non-integrated), please test the multi-step form as there have been reported issues of cookies not passing when this method is used.

    • This feature does not work on Landing Pages with secure domains (https), only on regular Landing Pages (http)

    • To have fields on your form pre-filled with contact data, check this out.

    Have more questions? Submit a request

    Comments

    Powered by Zendesk