Custom light box custom code challenge

Anonymous
Not applicable

Custom light box custom code challenge

We have quite a few articles, videos and downloads on our sites that I would like to only reveal if a user submits some details to us (name, email etc)

I am trying to modify the light box form script so that:

  • it is a non-closable light-box which
  • disappears on form submit (like a kind of barrier that reveals content when the user gives their details) and doesn't show again on different pages that share the same form
  • the form passes the url or page path of the page where it is located back to a hidden field in marketo (along with the customer data fields) so that we can reuse the same form multiple times but trigger a different response depending on the url where the lead came from.
  • light box position can be manipulated to reveal first paragraph of the underlying page - or - some html from the underlying page (eg. headline and stand-first could appear in the light-box)

I've attached a couple of sketches how it should look

I have created a light-box form and got it so that it disappears when you submit...

<script src="//app-lon04.marketo.com/js/forms2/js/forms2.min.js"></script>

<form id="mktoForm_1085"> </form>

<script>MktoForms2.loadForm("//app-lon04.marketo.com", "502-HUV-703", 1085, function(form){

    MktoForms2.lightbox(form).show();

          // Add an onSuccess handler

    form.onSuccess(function(values, followUpUrl) {

        // Get the form's jQuery element and hide it

        form.getFormElem().hide();

        // Return false to prevent the submission handler from taking the lead to the follow up url

        return false;

    });

});</script>

That's about the limit of my skill - can anyone help?

Thanks for your help!