Load your own form in your Riddle

You can use JS to to load your own form in your Riddle.

You do not want to use the Riddle forms to collect name and email, as you must use a self-made form. In this case, you can host your form on your server and load it into the Riddle via iframe using our "Ads Block".

Suppose you still want to combine the user data entered into the form with the data collected from the riddle. In that case, you can send the form data to Riddle via the data layer, allowing Riddle to store it alongside the other data captured.

<p>Example form</p>

<div>
    <div>
        <input id="userName" type="text" placeholder="Enter your name">
    </div>

    <div> 
        <button onclick="storeData()">Store this for the Riddle</button>
    </div>
</div>

<script>
    function storeData(){
        const input = document.getElementById("userName").value;

        // This line sends the data to the data layer
        window.parent.postMessage({dataLayerItem: {key: 'userName', value: (input)}}, '*');

        // This line tells Riddle to advance to the next block once the form is submitted
        window.parent.postMessage({'ad-iframe-complete': true}, '*');
    }
</script>

But you can also use this method to serve other ads using the "Ad Block" like a video ad or a full-screen banner, and store information in the data layer that a user has seen the ad.

Please note the last line in the script:

window.parent.postMessage({'ad-iframe-complete':true},'*')

This script tells Riddle to advance to the next block once the form is submitted. This method allows you to remove the skip option from the "Ad block" in the Riddle, forcing the user to fill out the form to advance to the next question.

Any data you enter into the form will be displayed on the next block to showcase how the data layer works together with the Riddle variables.