But sometimes, you need even more flexibility.
You can use Riddle’s custom lead generation form (in our Enterprise plan) to:
- use your existing lead forms or landing page when you make a quiz
- add a contest or sweepstakes form (InStyle ran this ‘Red Carpet Makeover’ giveaway)
- show videos, ads or any other content (ABC’s promo for ‘American Housewife’)
- even add a ‘like us on Facebook’ interstitial (check out this 90min.com example)
This comes in very handy if you need more than a simple form capturing name and email.
You might want to show fancy graphics, big ‘call to action’ buttons, drop-downs, video ads before you display the quiz results.
Your content will display after the last question or item in any Riddle quiz, and before the user’s results.
Custom lead generation form: 4 easy steps
1. Simply select the “Custom” option in the ‘Lead gen’ step.
2. Fill out the necessary information to load your iFrame
You can display anything here, from a video to a custom form. The content you load here needs to be inside a valid HTML (or PHP) file. To check if you have valid content, just open the URL in a new browser window. If what you want to display inside a Riddle loads in your browser, you are most likely good to go.
For the URL, you’ll need to host this page on a SSL secured server. Your URL needs to start with HTTPS://
(Because Riddle is on a secure server, your iFrame content inside your Riddle quiz also needs to as well. Otherwise the browser will throw a fit and refuse to serve it.)
3. Will you form be optional or mandatory?
When you create a quiz with a lead form, we let you decide to include a ‘skip’ option or not.
A skip button lets readers go to their results at any time – which is better for engagement (more people will complete the quiz).
However you can hide this option – so users only see their results after they finished watching your video or if they filled out and submitted your lead form.
Making the form obligatory boosts your number of leads.
To do that, your Riddle quiz will listen to our JavaScript call from your iFrame:
- Once you’re ready to let the readers get to their results, simply execute this little JavaScript: window.parent.postMessage(“iframe-complete”, “*”);
- If you’re an experienced JavaScript developer, you probably know what to do by now and can stop reading here.
- Like a bit more help a bit more help, check out our additional examples and info below.
Custom lead generation form: sample code and additional info
At this point, I’m assuming that you already have:
- a form ready to load into the custom iFrame
- a way to process the form data.
You have two options to send people to their results page after submitting your form:
- Show a thank you page – including a button or text link that takes people to the quiz results, plus you run a little timer that auto-forwards to the results after 5 seconds.
- Don’t show a thank you page – send people direct to their quiz results after submitting your form.
Custom lead generation form: using a thank you page
Using a thank you page is a bit easier from a coding point of view. This allows your server or software to process the form data first, then move to the Riddle results.
Here’s are the two bits of code to use for a form that sends the data to a thank you page and then forwards to the quiz result page after 2 seconds. You need two files on your server for this:
a) an HTML file that holds the form
b) a PHP file to process the form data and auto forward the user to the quiz results.
HTML Code for a sample lead form
<!doctype html>
<html>
<head>
<title>Custom iframe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<br>
<h1>No worries, this is just a test form</h1>
<p>Your email is not going to get stored or used anywhere</p>
<form action="path to your post.php file" method="POST"><!--make sure to add the full path or URL here-->
<div class="form-group">
<div><input class="form-control" type="text" name="name" placeholder="Name" /></div>
<div><input class="form-control" type="email" name="email" placeholder="Email" /></div>
</div>
<div><button type="submit">Submit</button></div>
</form>
</body>
</html>Form processor and auto forward to quiz results – save as post.php
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Form Processing</title>
</head>
<body>
<p>Thank you</p>
<?php
$name = $_POST['name'];
$email = $_POST['email'];
$lead = "Name: $name - Email: $email\r\n";
file_put_contents( 'leads.txt', $lead, FILE_APPEND | LOCK_EX );
?>
<p>Forwarding you to your results now</p>
<script>
//this script will auto forward to the quiz results after 1 second.
setTimeout(function () {
window.parent.postMessage("iframe-complete", "*");
}, 1000); // 1 second
</script>
</script>
</body>
</html>Custom lead generation form: Auto-forwarding without a thank you page
Does your form provider not give you a thank you page? Want to skip a thank you page to get your readers to their results faster?
It’s very doable – but you’ll need to follow a few more steps:
- Make sure your form data is processed before you tell the Riddle unit to continue on to the results.
- (Once the Riddle result screen is loaded, your server is pretty much out of the picture and cannot process any more data.)
In our example above, the thank you page takes care of that – if your form processes the code before you send the user onwards.
Without a thank you page, you need to:
- stop the default form behavior (sending the data when the submit button is pressed)
- replace it with a bit of custom code.
The easiest way to do that is to:
- load the JQuery library
- use the built in AJAX functionality to send a post request to the processing page – without leaving the current page
- once the form data is processed, tell Riddle to move on.
Also, please note: a custom form is the ideal place for FB tracking pixels as the form is loaded from your own URL, which is important for FB pixel handling.
Want to track form completions as part of your online advertising efforts?This is an ideal place to you can add code for your Facebook or other conversion pixel.
Custom lead generation form: live quiz example
Check out my demo of a custom lead generation form with Riddle’s quiz maker:
- It will show the (unstyled) custom form from the code above.
- The form action will save the lead into a text file on our servers.
- Feel free to enter fake data – this info won’t be used at all.
Quiz Maker – powered by Riddle
This was a bit geeky – so if you have any questions, just let us know at hello@www.riddle.com/blog.
