How to add extra pages (bridge pages) after form-submit action before showing the referral page

At its default setting with a new project (via Signup Form > Settings), when the user submits the Prefinery form it is automatically replaced by the newly signed up user's referral status widget (the same place the form is embedded at), in the same page. 

Alternatively, you have the option to - on form submit - redirect the user to a different page where their referral status widget is embedded at. 

The way it works is that signup form passes the newly signed-up user's ID to the redirect URL/page via URL parameter. When the redirect page loads up for the user, the Prefinery JavaScript Snippet then takes that user ID in the URL, checks for a referral status widget embed code on the page and if present renders the new user's referral status widget on it.

What is a "bridge page"?

A bridge page, as the term suggests, is an in-between page that bridges one page to another. It could be one bridge page, or multiple bridge pages between the signup page and the referral status page. 

In a Prefinery campaign, this could mean that instead of immediately redirecting the user to their referral status page, you may want them to go through one or more pages after signing up before eventually landing on their referral status page. 

For example, after signing up you may want the user to carefully read through and agree to a list of conditions (which the user might miss or simply ignore if it was placed in the signup form page) before they can get their referral link. 

How to add a "bridge page"

Having a bridge page requires some custom script to ensure that the user ID doesn't get lost as the user goes through the signup flow up until they reach their referral status page. 

As a baseline example for what you may be able to do:

1

Follow steps 1-2 of the guide here to setup your final (referral status) page. 

2

Set your bridge page as the redirect URL of your form like as shown below. Make sure "Include user ID in URL" is enabled.

3

Edit your bridge page and add an onClick event to your button or link (whichever HTML element the user has to click to get to the referral/final page). Here are examples:

<button onclick="window.location='https://example.com/referral-page/'+window.location.search;">View Referral Page</button>

or

<a onclick="window.location='https://example.com/referral-page/'+window.location.search;">View Referral Page</a>

Using the  window.location.search property, the script on the bridge page captures the URL parameter ?ref=abc123..., and passes it over to the next page, or referral/final page URL.

You can add as many bridge pages as you like. Just make sure the URL parameter containing the user ID is maintained throughout the flow.