Maître Forms 2.0

Maître’s forms have been around for a while… time for a refresh!

When we launched Maître (now ReferralHero) almost 2.5 years ago, we imagined a referral tool that anyone, whether technical or not, could use in a few minutes. At the time, implementing a referral program was a long and cumbersome task that required many hours of development, testing, etc.

We managed to bring that down to less than 5 minutes with a simple intuition: 90% of referral programs need the same features and user flow. If we can create a tool that has these features built-in, make it relatively customizable and easy to embed on a website, then we are onto a winner. The idea of a referral widget was born.

That idea turned out to be right and since then our forms have been used by almost 8,000 campaigns. We think it was probably the best embeddable referral tool on the planet

However, as the saying goes “Time is a b**ch“. Our forms have started to look outdated and lacking some features that our customers had requested for a long time. In short: it was time for a change.

Introducing Maître Forms 2.0

So we sat down to brainstorm a new form. We had a pretty good idea of what we wanted.
We wanted something fast, flexible and sexy. Something that would set the bar really high.

The result is something we are very proud of.
From the outside, not much has changed (except for a new sleek design), but inside it’s where the real magic happens.

A new code

The new form has been built from scratch. We have kept very little of the old code. It’s got zero dependencies, it uses modern Javascript and it’s 6X faster than the old form.

Internally, we have redesigned the core engine and made it modular so that it’s much easier (and therefore faster) to change things as we go. This, in turn, allows for more customization for you. You can already customize much of the form, but in the future we want to make every detail editable and the new engine makes that very easy.

A new look

I guess this is up to you to decide, but we think the new forms look sexy :)

We have redesigned many elements to make them look more modern and fresh:

Cover image
You can easily add a cover image above the sign-up form.

New sharing screen
The sharing screen is the one that has received the most attention.We have made the sharing section much more prominent to draw people’s attention and encourage more sharing.

We have also redesigned the rewards section to allow images and display your rewards better.

Here’s how the sharing screen looks as a whole:

Use your existing forms

By far one of the most requested features has been the possibility to use your existing forms instead of replacing them with ours. With the new form, this is not only possible, it’s very simple to achieve.

You will need some basic technical knowledge (or a developer) but you can integrate Maître with your existing form and send your users data with 1 line of code: Maitre.form.submit(data), where “data” is an object that contains the information about the sign-up (email, name, etc).

Let’s assume you’re currently using a sign-up form like the one below:

<form action="#" method="POST" id="my-form">
<input type="text" id="name" name="name" placeholder="Your name">
<input type="text" id="zipcode" name="zipcode" placeholder="Your zipcode">
<input type="email" id="email" name="email" placeholder="Your email">
<input type="submit" value="Submit">
</form>

You could then send the data collected in your sign-up form to Maître like this:

<script type="text/javascript">
 document.getElementById("my-form").addEventListener("submit", function(e) {
   e.preventDefault();
   data = {
     name: document.getElementById("name").value,
     extra_field: document.getElementById("zipcode").value,
     email: document.getElementById("email").value
   };

   Maitre.form.submit(data);
 });
</script>

Global tracking

Sometimes your subscribers refer people who don’t sign up immediately. They visit your website, come back after a few days and then sign up. With the old form, we don’t attribute these sign-ups to your subscribers. In other words, people are counted as referrals only if they sign up immediately when they land on your page.

This creates two problems:

1. Your subscribers are not rewarded for people they actually refer
2. Your referral rate is lower than it should actually be, perhaps giving you the wrong perception that your campaign is not working

With the new form, the form itself and the tracking technology are decoupled and independent from each other. The best part is that we have managed to obtain this without using two different scripts; instead, you will use only one script that does it all.

You might be curious to know how it works.
Here’s how: we will give you one snippet of code (we call it “Base code”) that you will put in the header of every page of your website. If you have installed Google Analytics in the past, it’s exactly the same thing. Do you use Google Tag Manager? Even better: you can create a tag and paste the Base code in it.

The Base code is responsible for loading the core engine and the libraries plus does the tracking. It is, in short, the heart of the form.

Then, on the page where you want the form to appear (if you want to use our form at all), simply put a <div> with the special ID “maitre-widget”.

<div id="maitre-widget"></div>

That’s it.
Your form will automagically appear where you put that div.

Clearly, there are some limitations. We use cookies, which means that if users delete their cookies before signing up, we won’t be able to attribute the referral. Similarly, since cookies are device-specific, if a person clicks on a referral link of a desktop and signs up a few days later on her mobile, the referral will not be attributed.

Automatic sharing screen

With the old form, if a person wanted to check their status (ie: how many people they have referred, the leaderboard, etc) they had to enter their email address again in the form.

The new form has an option to automatically display the sharing screen if it detects that the current visitor has already signed up. To enable it, simply toggle on this option in the settings page.

With this feature, you can have a page (ie: mywebsite.com/refer-a-friend) people can bookmark and constantly go back to check their status without re-entering their email every time.

Advanced features

There are many more advanced features that we have added but I’ll only mention a couple here.

Fingerprinting

Your subscribers will be automatically fingerprinted.
Fingerprinting is a way to uniquely identify users so that the same person, using the same device will be identified as a single entity. Before you ask, no personal data is ever used or exchanged. In short, we are not able to identify the name, email or other personal information from a fingerprint. We are using fingerprinting to make it more difficult for spammers to create fake referrals and tighten up our security.

Automatic UTM parameter detection

The old form already allowed you to attribute subscribers to specific marketing channels (ie: subscribers coming from Facebook rather than Twitter, etc). However, with the new form, we take this a step forward.

To start with, the new form will be able to automatically detect the marketing channel using UTM parameters. This means that if you create a campaign using UTM parameters, Maître will be able to track them and attribute your subscriber’s source correctly.

Moreover, with the global tracking engine, Maître will attribute the conversion to the right marketing channel, even if the sign-up happens days or even weeks after the first visit. You will be able to see this in your Analytics page and take better data-driven decisions.

Custom CSS

Many of you have requested a better way to manipulate the CSS of the form, so now you can add custom CSS directly from your dashboard.

Recaptcha and SMS verification

We have recently introduced two new security features: ReCaptcha and SMS verification.
At the moment, they are not available with the new form but we are working hard to add them as soon as possible.

How to use the new form

New campaigns will automatically use the new form. For old campaigns instead simply go to your campaign dashboard and you will see a banner with a button to get the new code. (New forms use a different code so you will need to replace the old form’s code.)

You DO NOT need to use the new forms if you don’t want to, but we do plan on discontinuing the old forms in 3 months time, approximately end of August. In other words, you don’t need to do anything now (unless you want to use the new form).  Don’t worry, we will send you a warning with plenty of notice.