form landing page trigger

[Minnie_Kaur]

How do I make a form appear based on what they click - basically I have two forms e.g. join now and get a quote - depending on what they click the appropriate form should display. Please help!

[SanfordWhiteman]

That's kind of a broad front-end development question!

If by "display" you mean "render in a DIV that's on the same page," then create a single function that you pass a form ID.  Then each button calls that function with a different value, for example:

<button class="formLauncher" data-form-id='389'>JOIN US NOW</button>

<button class="formLauncher" data-form-id='402'>GET A QUOTE</button>

<script>

for ( var formLaunchers = document.querySelectorAll('.formLauncher'), i=0, imax=formLaunchers.length; i<imax; i++ ) {

     formLaunchers[i].onclick = function(e){

          MktoForms2.loadForm("//app-aba.marketo.com", "XXX-XXX-XXX", this.getAttribute('data-form-id'), function (form){

               MktoForms2.lightbox(form).show();

          });

     });

}

</script>

(Note: I just typed this code into the comment box from my mobile, so it may have errors but you'll get the gist, hopefully.)

[Justin_Cooperm2]

One thing you could do is use the form's Lightbox embed code, which you can find by going to the Form in Marketo, then clicking Form Actions > Embed Code and use the "Lightbox" version. For the buttons, you could make them link to part of that code. For example, if the embed code was:

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

<form id="mktoForm_9999"></form>

<script>MktoForms2.loadForm("//app-aba.marketo.com", "XXX-XXX-XXX", 9999, function (form){MktoForms2.lightbox(form).show();});</script>

Add the beginning two lines (which define the form) anywhere in the body of your page. You may want to add a string variable to the top of your template so that you can add these lines within the Guided landing page editor. You'd then call the MktoForms2.loadForm() function whenever you wanted the form to display.

As it looks like you're using a guided landing page template from our library, those buttons are declared in the template as something like:

<a href="${buttonLink}"><button class="btn btn-lg btn-trans">${buttonLabel}</button></a>

So, to avoid having to make any more changes to the template (apart from adding one string variable in the body for the first two lines of the embed code), you could add line 3 of the embed code as the button's link from within the editor:

javascript:MktoForms2.loadForm("//app-aba.marketo.com", "XXX-XXX-XXX", 9999, function (form){MktoForms2.lightbox(form).show();});

[SanfordWhiteman]

Yikes, javascript: URLs, and I thought falling back to element.onclick was bad!

Edited my response to eliminate a level of indirection.

[Justin_Cooperm2]

The way our example templates are written, that is the only way to do it without making more changes (the string variable sets the anchor's href).

Minnie - if you are technical and feel comfortable, you could make a change to the string variable that represents the button's URL and instead make the variable represent an onclick handler for the button. It's a bit cleaner, but either method works and is valid.

Here's a reference about these approaches:

http://stackoverflow.com/questions/1070760/javascript-function-in-href-vs-onclick

[SanfordWhiteman]

There's also setting the href to the form ID  and then running with that as the selector: nation.marketo.com/103524

Of course we're just bikeshedding at this point.  Minnie​ you should write back and see if our guidance is making sense to you.  Essentially, while Justin's advice is far simpler than mine, all solutions will involve some code -- that is, copy-and-pasting code, but nevertheless it's sensitive enough that you have to know where it goes.