Re: Adding forms to a landing page

Anonymous
Not applicable
I created a landing page in Marketo, but cannot add a form or image or any elements to it so I was wondering which part of the HTML code allows a form to be added to my landing page template.  Please help!
Tags (1)
13 REPLIES 13
Justin_Cooperm2
Level 10
If you are editing a template that is not Mobile Compatible, then you need to make sure the following PHP code is in the body of your template:

<?php echo $mContext['bodyElements']; ?>

I would also recommend making sure the other PHP calls are in the template as well. Otherwise, things like Munchkin tracking won't work correctly. If you create a new template, the pre-filled code will have all of these things in it. My guess is you've deleted some of it.

Once the Mobile Friendly Landing Pages feature is rolled out to your subscription (the rollout is being completed tonight), if you create a new template (that is automatically Mobile Compatible), then everything will "just work" as long as you have a special system defined div within the body:

<div class="mktoContent">
</div>
Anonymous
Not applicable

I've created a Mobile template that includes the code:

<div class="mktoContent" align="center" >

</div>

This allows for the template to be centered, but any element I add to the asset (forms, banners, etc) does not center, they remain in the same place I've added them. How do I get elements to adjust to page width?

Justin_Cooperm2
Level 10

That's not how "Free-form" landing page templates work. Those templates are just the skeleton of the page. Any content the user drags on in the landing page editor is absolute positioned on the resulting page, meaning it doesn't matter what you've coded into the template since it won't be applied.

Anonymous
Not applicable

Hi Justin,

Thanks for the response. Do you have a suggestion on how to add forms to a Free-form page? I have all of my content/banners added as tokens, and everything is working perfectly. I need to add a form, however, I'm not sure how to do that so that it does not remain absolute. Perhaps this not how to go about creating a landing page with a form?

Thanks for your help.

SanfordWhiteman
Level 10 - Community Moderator

Johnine Hoehn​ you can strip all the positioning styles from the  <DIV id="lpeCDiv_..."> that Mkto inserts to the hold the form, then relocate the form within the DOM... gotta know what you're doing there, though.  Can you post the link to your LP?

Justin_Cooperm2
Level 10

If the form is going into a fixed region of the page that is already structured, why wouldn't you use a "Guided" landing page for this? Probably more what you're looking for if you don't want people dragging things around.

Justin

Sent via mobile

SanfordWhiteman
Level 10 - Community Moderator

I would use a Guided!  I was just saying, if a freeform already exists and needed to be tweaked instead of being replaced, there are desperate measures you can take.

Anonymous
Not applicable

I was wondering if I should be using a Guided Template. And it can still be converted to be Mobile Compatible?

Thanks

-J

Justin_Cooperm2
Level 10

There is no such thing as “Mobile Compatible” for a Guided template, as the look-and-feel of the page is entirely driven by the template. So, if you are using a responsive template that adapts to different screen sizes (like our example templates do https://docs.marketo.com/display/DOCS/GuidedLandingPage+Templates), then your page will already look good on mobile. The “auto create a mobile version of the page” feature only works with Free-form templates.

Thanks,

Justin

Anonymous
Not applicable

I see that now.

Thanks.

Kristen_Malkov1
Level 8
Maybe try cloning it, it could just be a glitch. Or have someone check your HTML that it's on a par with being mkt-editable, and lastly, submit a ticket if you can't resolve it. 
Anonymous
Not applicable
It isn't working though.  I've created a new landing page template and it looks perfect but when I go to drag a form onto the template it won't let me.  So I've been fussing with how to fix it so that it will drag a form over.
Kristen_Malkov1
Level 8
You drag the option for a form over from the bar on the right, then select the corresponding form. No html coding needed!