How to use a Custom Form

Learn how to connect your own custom forms with Viral Loops

Fivos Stergiannis avatar
Written by Fivos Stergiannis
Updated over a week ago

Sometimes so, it happens that you wish to use your form to add participants to your referral program. We have you covered! You can now connect your custom form with Viral Loops.
โ€‹
โ€‹
No worries we got you covered. We give you 3 options on how to do this:

A) No code installation through our Visual Installer tool

B) Client Side installation using our SDK script for a frontend installation

C) Using our API endpoints for a backend Installation

There are three logic scenarios that you need to choose from:

1) Custom form with Viral Loops participation

This means that when someone uses your form to sign up, they also get added to Viral loops

2) Custom form with Viral Loops participation + Sharing state afterward

This means that once someone signs up for your form, they become part of Viral Loops, and they instantly get the sharing state where they can find their referral link

3) Custom form with Viral loops and then redirection to another URL

This means that once someone signs up to your form, they get redirected to another URL (from there, you can show them their sharing state as well)

Before you deep dive, check our concierge service, where we set all this up, and you are avoiding all the hustling!


No Code Installation

A) For the No-code installation please log in to your account click on edit campaign and at the Installation Step you will find the No-Code installation option.

You just need to copy and paste the snippet on the head of your page where the custom form is located and follow the instructions.


For front-end installation, here is what you need to know :

1: Add the "Javascript Snippet" from your campaign to your website

Here you can find the Javascript Snippet, which you should add to your website.

You can also find it in the Installation Step of your Campaign if you choose the "I'll do it myself" option.

2: Create your own Custom Form with Viral Loops' attributes or even your attributes

We allow you to use your custom attributes by connecting them with Viral Loops. If you don't have your attributes, our documentation below has an example that you can use for the installation.
โ€‹
To proceed with Viral Loops' attributes, you have to follow this documentation here.

3: Participating in your Custom Form, and afterwards show Viral Loops' Sharing State

  1. Don't forget to change the "your Campaign ID" from the code with your actual campaign ID. (you will find it on the Installation Step of your campaign)

  2. Right now, you should pull your participant's email, too.

4: Participating in your Custom Form, and then redirection to another URL and afterward show Viral Loops' Sharing State

To do such an implementation, all you need to do is to add a URL parameter on your SUBMIT button. Here is the article that will help you: Automatically joining a Viral Loops campaign - Automatic Participation.

IMPORTANT NOTE!

Remember that even if you skip using the Form Widget to capture participation for your campaign, we still advise you to add it somewhere else on your website, as itโ€™s the only widget through which participants can get their unique link and invite others. In order to do that, you need to add the campaign snippet and Form Widget on any page you want to redirect them to.


For a back-end installation, here is what you need to know:

You would want to register the new participants over the Web API using the Registration method.

If you wish to redirect to another page where the referral state appears you need to have a page where the snippet and the widget Js is installed and triggered automatically. Here is the article that will help you: Automatically joining a Viral Loops campaign - Automatic Participation.

EXTRA STEP: If you want to capture GDPR Consent

Add the consents property to the user object. The Consent ID can be found in the app's Settings Page, where the GDPR consents are added.

Live Example

Check a full example here with the complete code using Bootstrap and jQuery.

๐Ÿ“„ Note: This article is mainly to be followed for custom-built websites and does not apply to landing page platforms with certain limitations/restrictions (e.g. Squarespace, Wix etc.)ย 

Did this answer your question?