4 min read

We’ve designed Riddle’s online quiz creator to make it easy to collect quiz emails through a custom lead generation form. Sure, Riddle has native integrations with MailChimp and AWeber (and more coming soon!) – and you can connect pretty much any available lead management tool through zapier.com.

But sometimes, you need even more flexibility.

You can use Riddle’s custom lead generation form (in our Enterprise plan) to:

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.

Custom Lead Generation Form

Custom Lead Gen Form

2. Enter the URL of your custom lead generation form

You can display anything here, from a video to a custom form.

IMPT: You’ll need to host this page on a SSL secured server.

(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. Enter your URL (please make sure it starts with https:// and NOT http://)

custom lead generation form

4. 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:

  1. 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.
  2. 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 on your thank you page:

  • a text link to forward the reader to the Riddle results when clicked
  • a timer to auto forward the reader.

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.

The code below shows you how that is done.

  1. (Replace the form action post.php with your own form handler to process the form data.
  2. Make sure that your form handler works without errors.
  3. If it returns an error, the auto forwarding to the results will simply not work.

Also, please note the comment in the code block.

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.

This was a bit geeky – so if you have any questions, just let me know at hello@riddle.com.

I’m known as the Über-geek here at Riddle, and I love to help people get the most out of Riddle’s online quiz creator. 🙂

Riddle on,

Boris
CEO
Riddle

custom lead generation form