Responsive Marketo Landing Pages - Solution

Anonymous
Not applicable

Re: Responsive Marketo Landing Pages - Solution

Colin:

That's correct. It goes something like this Haiku:

Static template code

[Bring in LP elements]

Static template code


Each WYSIWYG element gets thrown into some backend PHP functions to convert them into HTML. Each element is wrapped in two divs, which is where the absolute positioning comes from. The elements are just returned in the order of their creation, and they're all siblings. 

The "Bring in LP elements" piece is just a PHP echo (<?php echo $mContext['bodyElements']; ?>), which echoes all the resulting HTML of the WYSIWYG editor.

And no, there's no way to HTML-code the Marketo form within an HTML element. You can create your own DOM using the double-div HTML blocks, though!


Cheers,
Edward Unthank
Marketing Operations Specialist
Yesler

Anonymous
Not applicable

Re: Responsive Marketo Landing Pages - Solution

Edward, we are implementing a new website in Wordpress whose pages are responsive; however, the Marketo landing page with a form 1.0 that is displayed in an iframe on our website page is not responsive.  In other words the field labels don't wrap from being to the left of the field when the window is wide to being on top of the field when the window is narrow as does the form in your Responsive Marketo Landing Page Templates page,

Can we use the double-div technique with the landing page that is displayed in the iframe to make the form responsive on our web page?  Does this work with forms 1.0, 2.0 or both?



 
Brice_Dunwoodie
Level 4

Re: Responsive Marketo Landing Pages - Solution

I've been looking at this post and the related templates for a a few hours and I feel like there's an easier and less brittle way to arrive at responsive landing pages.

No doubt, it's a shame that in 2014 we have to hack Marketo to get mobile friendly landing pages, but here we are. 😞

My approach is to create a simple, clean boostrap template that renders via Marketo. I name (with IDs) a few containers where I want the Marketo components (e.g., text, form) to render. Then I establish a naming convention, (this is brittle, but we need some way to bind). Then when the page loads, I use jQuery to grab the marketo elements and move them into their proper places in the responsive grid.

Here's the jQuery and naming convention that I've tested:
<script>
$(document).ready(function() {
$('#containerHeader').append($('div.txtH1 span.lpContentsItem'));
$('#containerHeader').append($('div.txtH2 span.lpContentsItem'));
$('#containerBody').append($('div.txtBody span.lpContentsItem'));
$('#containerForm').append($('div.objForm span.formSpan'));
});
</script>

Once the jQuery runs, voila, you've got a responsive landing page.

I've implemented this quickly and it seems to work just fine. I have not tested this with Forms 2.0 yet, nor have I gotten far enough so that I'm comfortable putting this into production, but from what I can see, this is a simpler way to skin the cat, and it requires less technical skills (no Marketo Double Div) to create the landing pages, once the template is defined.

Barring a better answer, this is how we're going to make our landing page responsive.

-Brice
Anonymous
Not applicable

Re: Responsive Marketo Landing Pages - Solution

Thanks Brice, Can you post a link to a prototype LP where you've used this technique?
Anonymous
Not applicable

Re: Responsive Marketo Landing Pages - Solution

Would also be interesting in seeing this.
Brice_Dunwoodie
Level 4

Re: Responsive Marketo Landing Pages - Solution

Hi Elliot and Jason,

I can't post the prototype here as it's client specific. I'll post something once I have a generic page for review.

thanks,
Brice
Brice_Dunwoodie
Level 4

Re: Responsive Marketo Landing Pages - Solution

Hi all,

I've posted a simple example here:
http://www2.simplermedia.com/marketo-responsive-landing-page.html

This is still pretty quick and dirty, but it works and should make our process fairly easy to understand.

Feedback welcome.

-Brice
Anonymous
Not applicable

Re: Responsive Marketo Landing Pages - Solution

 Elliot Lowe, if you use gravity forms plugin there is an addon for marketo. that way you dont need to iframe the forms into the page...
 
Anonymous
Not applicable

Re: Responsive Marketo Landing Pages - Solution

Edward,

i am trying to use you LP code.
i cant get the elements to stack properly.
 http://pages.pyramidanalytics.com/Gartner-Temp_Gartner-Newsletter-v2.html
i want the form under the image.

all three elements are posOverride

please let me know