How can I create an editable forms variable?

[Anonymous]

I'm looking for documentation for creating a forms variable in a guided landing page, so the the person making the landing page instances can select forms on-the-fly, as opposed to embedding code for a specific form on in the landing page template.

I have looked through the Forms 2.0 page (LINK), Create a Form page (LINK) and the Add a Form to a Guided Landing Page page (LINK), but I haven't come across a straightforward example for this.

It would seem logical that you'd use something along these lines in the template's HTML:

<script>

  MktoForms2.newForm();

</script>

Is also tried this, which at least created a forms placeholder in the template along with an entry in the Elements editor pane, but the form disappears when you select one from the dialog:

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

<form id="dmack_form" mktoName="dmack_form" class="mktoForm"></form>

I appreciate any enlightenment.

Message was edited by: David Mack. Edited because text in the Insert Raw HTML blocks weren't displaying.

[Grégoire_Miche2]

Hi David,

Get a form embed code from Marketo. It will have the form of this code:

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

<form id="mktoForm_FFFF"></form>

<script>MktoForms2.loadForm("//app-e.marketo.com", "999-XXX-999", FFFF);</script>

And nothing else.

Now, form this, you should:

• Replace "999-XXX-999" with you munchkin ID
• Replace "FFFF" by a Marketo form ID (you will still need one)

And you could update the code to make it more sophisticated.

-Greg

[Josh_Hill13]

Sanford Whiteman​ ?

[SanfordWhiteman]

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

<form id="dmack_form" mktoName="dmack_form" class="mktoForm"></form>

Remove the <script>.  The GLP editor will always insert the script for you when you have an assigned <form class="mktoForm"> element.

Otherwise, this is the correct approach.  You don't use the form embed code, as this will hard-code the form and will also remove it from LP conversion reporting.

I was just demonstrating GLP forms for a client this morning, and I can't replicate this report: "but the form disappears when you select one from the dialog." 

[Anonymous]

Thanks @Sanford Whiteman –

I tried removing the <script> as you suggested, so I had:

<form id="dmack_form" mktoName="dmack_form" class="mktoForm"></form>

After approving the draft and refreshing the instance of the template, I had the same experience where I went to choose the form to use and it "disappeared" again, for lack of a better term.

I inspected the element, and it does appear to be there, but something is preventing it from displaying correctly (see screenshot).

Any other ideas? Thanks again for your help.

[SanfordWhiteman]

Please provide a URL -- no use troubleshooting a screenshot.

[Anonymous]

Here's the URL to a stripped-down version of just the form for inspection:

https://app-ab16.marketo.com/lpeditor/devicePreview?p=1166&t=agd2_RuPEnE,&m=335-QLG-882

Thank you.

[Anonymous · Accepted solution]

As it turns out, the correct syntax is:

<div class="mktoForm" id="dmack_form" mktoName="dmack_form"></div>

I had been using this:

<form id="dmack_form" mktoName="dmack_form" class="mktoForm"></form>

Note the use of <div> instead of <form>. Props to @Joel Gooch for help with this one.

[SanfordWhiteman]

Sorry I missed that typo. Yes, it is always a div.