Toggle .js in guided landing pages? | Community
Skip to main content
June 17, 2016
Solved

Toggle .js in guided landing pages?

  • June 17, 2016
  • 3 replies
  • 3889 views

I have a basic javascript that overrides form redirects when I want the user to stay on the page, and returns a thank-you message. What I'd like is the ability to turn that on or off in the options. I was blindly hoping something like this would work:

<meta class="mktoBoolean" id="formsendrule" mktoName="Stay or redirect form" default="false" true_value="<script>//the script here</script>" false_value=" " false_value_name="Hide" true_value_name="Show">

But all the characters in the script break the meta tag.

I saw a couple suggestions for future improvements to solve this problem, in this post:

But I'm wondering if anybody's come up with a work-around? One thought I had is maybe using the mktoBoolean to show/hide a simple class name somewhere, then adding an if statement to the .js script itself so it only fires if div X has class Y, or something.

For reference, the basic .JS is:

<script>

MktoForms2.whenReady(function (form){

  form.onSuccess(function(values, followUpUrl){

   form.getFormElem().hide();

   document.getElementById('confirmform').style.visibility = 'visible';

   return false;

});

});

</script>

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by

Aha!

I was a dingbat and forgot to include the forms2.min.js script

So, to recap: in a guided landing page, if somebody wants the ability to toggle between a page that stays put and displays a message sitting in a hidden div, or redirects to another page.

I added the metatag:

<meta class="mktoBoolean" id="formsendrule" mktoName="Stay or redirect form" default="false" true_value="true" false_value="false" false_value_name="Redirect" true_value_name="Stay">

Then added a touch of .js:

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

<script>

if (${formsendrule}) {

MktoForms2.whenReady(function (form){

  form.onSuccess(function(values, followUpUrl){

    form.getFormElem().hide();

    document.getElementById('confirmform').style.visibility = 'visible';

     return false;

  });

});

};

</script>

3 replies

Accepted solution
June 17, 2016

Aha!

I was a dingbat and forgot to include the forms2.min.js script

So, to recap: in a guided landing page, if somebody wants the ability to toggle between a page that stays put and displays a message sitting in a hidden div, or redirects to another page.

I added the metatag:

<meta class="mktoBoolean" id="formsendrule" mktoName="Stay or redirect form" default="false" true_value="true" false_value="false" false_value_name="Redirect" true_value_name="Stay">

Then added a touch of .js:

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

<script>

if (${formsendrule}) {

MktoForms2.whenReady(function (form){

  form.onSuccess(function(values, followUpUrl){

    form.getFormElem().hide();

    document.getElementById('confirmform').style.visibility = 'visible';

     return false;

  });

});

};

</script>

June 17, 2016

I haven't had a situation quite like this, but I never like using the page guides to load in content. Here's how I would do it:

var value = ${formsendrule};

if (value == true){

  your script here

}

Let me know if this works!

SanfordWhiteman
New Participant
June 17, 2016

That's exactly the same approach as my post. You don't need the temporary variable, though.

June 17, 2016

Ah.. even simpler. I think I might be missing something though. Doesn't seem to work yet. The default redirect is still happening. I must be missing something on this.. Here's what I have:

<meta class="mktoBoolean" id="formsendrule" mktoName="Stay or redirect form" default="false" true_value="true" false_value="false" false_value_name="Redirect" true_value_name="Stay">

Then, further down in the header tag is my script:

<script>

MktoForms2.whenReady(function (form){

  form.onSuccess(function(values, followUpUrl){

     if (${formsendrule}) {

     // Also Tried: if(${formsendrule} == true) { ... neither worked

    // and tried putting the if statement in different spots, ie wrapping the entire function in it. still didn't work

       form.getFormElem().hide();

       document.getElementById('confirmform').style.visibility = 'visible';

       return false;

     }

   });

});

</script>

which turns on : <div id="confirmform">${formmessage}</div>

SanfordWhiteman
New Participant
June 17, 2016

No reason to have the whole script in the variable!

Use the variable as you would a JS boolean. Use values "true" and "false" in the <meta> declaration. Then

if (${myvarname}) {

...

}