Here's how to embed a referral program into your WordPress website and allow people to sign up to it using Contact Form 7.

Here is what you will learn in this tutorial.

    Connect your website to your iRefer account.
    Specific campaign settings required.
    Connect Contact Form 7 to your referral campaign.
    Embedding the sharing widget into your website page.
    Testing your campaign

Here is the flow the user will take when signing up and participating in your referral program and where you will need to integrate our code outlined in the steps below.

1. Connect your website to your iRefer account.

Navigate to your campaign by clicking on the "Edit" button in your Dashboard.

In the left navigation, click on the "Installation" button, then "Custom website" as shown in this screenshot.

Copy the line of code as shown in "Step 1" of this screenshot. 

Install this script on your website site by pasting in before the closing </body> tag of the page.

Refresh the home page of your website. Then refresh this page. If installed correctly, you should see a green check here.

2. Specific campaign settings required

There are some specific campaign settings you need to set.
On the "Initial setup" page choose the "Embedded" form style and change the shortcode from <div id="shortcode"></div> to <div id="sharewidget"></div>

Click on "Advanced Options" and choose "Yes" for "Automagically sign-up new participants?"

Click Save and Continue.

For this type of campaign, you can skip the following page - "Sign-up form"  as you will be using your form.

3. Connect your Contact Form 7 form to your referral program

We need to pass the user's email address into your referral campaign when they submit your Contact Form 7 form and store this as a cookie in their browser. 

First, download and install this Contact Form 7 plugin: Contact Form 7 Redirection.

Next, add the following JavaScript code into the Contact Form 7 as shown in the below screenshot. Please remember to change the "" in 2nd line to your website domain address. Also change "your-email" in first line to the form field name for email field, if its different than "your-email".

var user_email = document.getElementsByName("your-email")[0].value;
//var domain_name = "";
var domain_name = window.location.hostname;
if (domain_name.startsWith("www.")){
    domain_name = domain_name.substring(4);

var days = 365;    
var date = new Date();    
date.setTime(date.getTime() + (days*24*60*60*1000));    
var expires = "; expires=" + date.toUTCString();
document.cookie = "vsu_ref_email=" + user_email + expires + "; domain=." + domain_name + "; path=/";

**Important** You need to make sure that you change "" to your domain name.

4. Embedding the sharing widget into your website. 

Create a new page (you could call it "Refer Friends") on your website where you would like to display the sharing widget to those who have signed up for your referral campaign.

Then insert the shortcode below into the HTML part of this page.

<div id="sharewidget"></div>

After submitting your Contact Form 7, they will then see this widget embedded into your "Refer-a-Friend" page. You should place content around this widget to explain what rewards they will get for referring friends etc.

5. Testing your campaign

Now let's test your campaign to make sure everything is correctly setup.

When someone signs up through your form and submits, their email address will be stored in their browser as a cookie. When they visit your "Refer-a-Friend" page, they will see the sharing widget. 


Did this answer your question?