Out of the box, the milestone template is made to work in a single page setup where you just add the snippet and the widgets in your page and be up and running in minutes.
Sometimes, a different kind of setup might be desired.
For example, you might have your registration form in your landing page and when users add their email they will be redirected to their referral dashboard to invite more friends and check their progress.
Users add their email address in your main page.
After the submission they are redirected to a second page to see their referral dashboard
How-to
There are two ways to achieve the above result, depending on if you are using the builtin widgets or your own custom form.
Using the widgets
In the campaign's wizard, in the Widgets step go ahead and edit your form widget.
At the bottom of the Form State go to Advanced edits and select Redirect to another page.
Like so:
Now, whenever users submit the form they will be redirected to that page.
As the note says you will need to also add the Form Widget in the second page as well. So when users land on the second page they will be greeted by the widget but this time it will have changed to the sharing form.
Please note that existing participants coming back to the campaign page, will not be redirected to the second page but will view their sharing widget on the first one. If you'd like them to be redirected, you'll need a custom Javascript code that detects existing participants.
Using a custom form
You should read the How to use a custom form instead of the form widget if you haven't completed that step already.
We are going to use the exact same concept as that guide but instead of hiding the form and showing the widgets we will be redirecting to the second page.
See the complete code here:
Note: this solution only applies on custom-built websites.
Alternatively, you can use this: Redirection after custom form submission
If you'd like to redirect the user after the form submit, you can add a data-vl-redirect-url on your data-vl-container="join-stage" . Here is an example of how it should look like with your custom form.
Email links
Since we are now using 2 pages we need to reflect that on the links of our emails.
When someone clicks the button on the welcome email or the milestone reached email they should land on their referral dashboard to check their progress and invite more friends.
Welcome Email
In your campaign's wizard, in the notifications step, go ahead and edit the welcome email:
Then inside the email editor, change the Button URL field to your referral-dashboard page:
Milestone Reached Email
In the milestones step of the wizard for each milestone that also sends an email, click the edit button:
And change the Button URL field to your referral-dashboard page like before:
Email sharing option
When participants are clicking the email sharing button to invite their friends, their email client will open with a pre-filled text that they can edit and send to their friends.
As the campaign creator, you will be able to pre-fill the subject and body of this message by editing the email sharing option. You can do that by customizing your campaign widget (Popup, Form Widget, In-app Referral widget) from your campaign wizard.
Does this article help? Let us know 😊