How can I create an editable forms variable? | Community
Skip to main content
A
Anonymous
May 25, 2016
Solved

How can I create an editable forms variable?

  • May 25, 2016
  • 4 replies
  • 7429 views

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.

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

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.

4 replies

A
Anonymous
Accepted solution
May 26, 2016

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
SanfordWhiteman
New Participant
May 26, 2016

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

SanfordWhiteman
SanfordWhiteman
New Participant
May 25, 2016

<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." 

A
Anonymous
May 25, 2016

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
SanfordWhiteman
New Participant
May 25, 2016

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

Josh_Hill13
Josh_Hill13
New Participant
May 25, 2016

@Sanford Whiteman​ ?

Grégoire_Miche2
Grégoire_Miche2
New Participant
May 25, 2016

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

Terms & ConditionsAccessibility statement

Loading footer...