Skip to main content
All CollectionsPre-launch and Giveaway Capaigns
Using an Instapage form to get registrations
Using an Instapage form to get registrations

How to connect your Instapage form with your Viral Loops campaign

Fivos Stergiannis avatar
Written by Fivos Stergiannis
Updated over 5 years ago

Here's how to install your Startup Pre-launch, Tempting Giveaway or Leaderboard Giveaway campaign on Instapage and having your campaign participants use one of your existing forms to join the campaign.  

First off, you need a page in your website with the form that your participants will be using. This is going to be your Registration page.

Step 1: Your form

The URL of the Registration page is what you need to use in your campaign settings as the sign-up page for your website. You set this up when you were creating your campaign, at the Info step of your campaign wizard.

Step 2: Your campaign Javascript snippet

While editing this page, go to Settings > JavaScript > Footer and paste there the Javascript snippet for your campaign. 

Edit your campaign and get this Javascript snippet from the Installation step of your campaign wizard in Viral Loops.

Step 3: Submitting data to Viral Loops

Now, we need to make sure that the data your visitors submit using your form, is also sent to Viral Loops. 

While editing your page, click on Settings and then JavaScript. In the Header section add the following code:

window.instapageFormSubmitSuccess = function(form)
{
// get values from form fields
var param1 = ijQuery(form).find('input[name="'+ base64_encode('First Name' ) +'"]').val();
var param2 = ijQuery(form).find('input[name="'+ base64_encode('Email' ) +'"]').val();
var param3 = ijQuery(form).find('input[name="'+ base64_encode('Last Name') +'"]').val();

// Get the actual redirect url
var redirect_url = ijQuery(form).find('input[name="redirect"]' ).val();

// Amend redirect url in form by adding fields from form
ijQuery(form).find('input[name="redirect"]').val(redirect_url + '?firstname='+ param1 + '&email='+ param2 + '&lastname=' + param3 + '&autoDetect=1');
}

Your form should necessarily submit to Viral Loops at least the following two pieces of information:

  • First Name

  • Email

That means that these two inputs should exist in your form. 

The script above relies on the placeholder texts of your form in order to work. You can see they are reflected in the script above.

Need to use different labels?

Not a problem. Just go back to edit the JavaScript you just added in Settings > JavaScript > Header and change these values too, to whatever you have named your form inputs:

For example, if you wanted to use greek, it would be like so:

// nothing changes before that part
var param1 = ijQuery(form).find( 'input[name="'+ base64_encode('Όνομα') +'"]').val();
var param2 = ijQuery(form).find('input[name="'+ base64_encode('Email') +'"]').val();
var param3 = ijQuery(form).find('input[name="'+ base64_encode('Επώνυμο') +'"]').val();
// nothing changes after that part

Alright, then click Done on the top right corner of the screen and go ahead and publish these changes.

Step 4: Add the main javascript snippet again 

After your visitors sign-up they should be redirected to a different page where they can see their unique link and invite their friends. Let's call that the Referral page. 

So, while editing your Referral page make sure you to go to Settings > JavaScript > Footer and also paste there the Javascript snippet for your campaign. Unless you do that the participation will not be registered in Viral Loops even if the form is submitted.

As before, you can get that from the Installation step of your campaign wizard.

Step 5: Triggering the popup

When participants reach the Referral page they should see the Viral Loops popup through which they get their unique link and invite their friend.

While editing your Referral page go again to Settings > JavaScript > Footer and, under the main Javascript snippet that you added earlier, add this one:

<script>
window.addEventListener('vl_ready', function(e) {
  VL.openModal();
}, false)
</script>

This makes the popup open automatically as soon as the page is loaded.

If you would rather avoid using the popup at the Referral page, please refer to this documentation article: https://intercom.help/viral-loops/faq/can-i-use-viral-loops-without-using-the-popup This is not a recommended approach, though, as it's highly advanced.

Step 6: The popup trigger

 In case a participant closes the popup in the Referral page, you want to offer them an option to launch it again.

On the top bar, click Add New and select HTML. A Custom HTML block was just placed in your website.

Place it where you want it in your website and click on and then click Edit. In the field that appears, add the following code:

<div data-vl-widget="popupTrigger"></div>

Save and publish your page and that's it!

Summary

  1. Participants join the campaign using your own form created on Instapage.

  2. They are redirected to the Referral page where the Viral Loops popup opens automatically and they can invite their friends.

  3. Unique links redirect invitees to the registration page where they can participate too.

Need more help? Just let us know! 😀

 

Did this answer your question?