SOLVED

Adding a Form # as a Variable

Go to solution
Highlighted

Adding a Form # as a Variable

Hey guys,

We're trying to work on a template that's "almost" blank. Our goal is to get the Form into an editable block that has a width of 100%.

Since we can't "Nest" a MKTO element in a Guided Landing Page template, I'm thinking about adding the form # as a variable.

I would have something like this:

<div class="mktoText" id="exampleText" mktoName="Main Body Text">

Optionally add default text for the editable text area.

<Insert Form with variable here>

</div>

Anyone ever did something similar and can share how he made it happen?

Thanks,

JP

1 ACCEPTED SOLUTION

Accepted Solutions
Highlighted
Level 6

Re: Adding a Form # as a Variable

I'm trying to think about the need. 

How about not nesting Marketo Element Divs and just nesting Marketo Element Divs into a regular div that carries a 100% width?  The reason being is that each div is mutually exclusive anyways.  Even if you had Marketo Elements Divs that are nested, a form div is still a form div and a text div is still a text div.  

<div style="width:100%">

<div class="mktoText" id="exampleText1" mktoName="exampleText1"></div>

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

<div class="mktoText" id="exampleText2" mktoName="exampleText2"></div>

</div>

View solution in original post

6 REPLIES 6
Highlighted
Level 10 - Champion Alumni

Re: Adding a Form # as a Variable

Highlighted
Level 6

Re: Adding a Form # as a Variable

I'm trying to think about the need. 

How about not nesting Marketo Element Divs and just nesting Marketo Element Divs into a regular div that carries a 100% width?  The reason being is that each div is mutually exclusive anyways.  Even if you had Marketo Elements Divs that are nested, a form div is still a form div and a text div is still a text div.  

<div style="width:100%">

<div class="mktoText" id="exampleText1" mktoName="exampleText1"></div>

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

<div class="mktoText" id="exampleText2" mktoName="exampleText2"></div>

</div>

View solution in original post

Highlighted

Re: Adding a Form # as a Variable

Because three heads in a meeting room couldn't think about the obvious answer.

Meeting rooms are damned.

Thanks Jim, that might actually do the trick.

Highlighted
Level 10 - Community Moderator

Re: Adding a Form # as a Variable

You don't want to use raw form IDs if you can avoid it, because Marketo knowing that something is a Form Element is crucial for presenting a friendly dropdown of forms and for automatic PreFill (although you can do the latter via tokens as well).

Like Jim, I'm curious about why you can't restructure your markup so they don't need to actually nest.

Highlighted

Re: Adding a Form # as a Variable

Yea, Jim is right.

But as to Forms, wouldn't the embed code take care of showing the form the right way + prefill?

Highlighted
Level 10 - Community Moderator

Re: Adding a Form # as a Variable

But as to Forms, wouldn't the embed code take care of showing the form the right way + prefill?

No. If you use the embed code on an LP instead of a Form Element, you have to simulate prefill with tokens. It's not at all difficult, but the JS is seen as any old "foreign JavaScript" in this case, so you have to build more yourself.

Incidentally, you can move a ​mktoForm Form Element anywhere you want in the page, including nesting it inside a ​mktoText.  By hiding it from view until you've moved it into place (so the user doesn't see it quickly jump) you can put it anywhere you want.  But best avoided unless necessary.