Using a "real" Marketo form with a responsive template

[Anonymous]

Hi everyone,

I wanted to see if anyone had a better solution on this front.  We've been using a resonsive template for our landing pages.  Because it's responsive, we need the form to change size as needed, but sitll want to use a Marketo form.  So we've been using "embedded" forms.  This allow us to put the embedded form in the <div>, and it resizes well, while still using Marketo native code.

However, one issue has cropped up.  We've found that the form we're using won't show as a "form" on the Marketo landing page, in terms of the results you see.  So when you click on a landing page, you usually see what form is there.  That doesn't happen in our solution.

We'd like to be able to see what form is on what landing page.  The best idea I have is that we add a form to our Marketo landing page, and then add CSS styling to move whatever the <div> tag is for the form we add.  That way we can use a Marketo form created in the landing page editor, but still have it move with the responsive.

However, this method is tricky - we're having trouble getting it to work correctly.  Ideally, we'd have the form be styled by an existing div tag, which would move it as needed.

Anyone have any better ideas?

[Grant_Booth]

This line of php is responsible for where the landing page elements get dropped if you drag them over in the editor:
<?php echo $mContext['bodyElements']; ?>
So, in your template, you could move that line inside the responsive div.

The drawback there is that all of the landing page elements, not just forms but also rich text blocks, images, etc. would all get dropped inside that div.

In general, we advise against using the embed code on Marketo landing pages, as we've seen it create problems in the past - there are ways in which Marketo forms interact with Marketo landing pages (prefill, progressive profiling) that the embed code wasn't designed for.

[Alok_Ramsisaria]

Jordon,

Please use the default setup of the form that Marketo provides and then in Landing page template overide the style of the div where the form is. Replace the postion:absolute with position:relative. 

You can email me on haris@grazitti.com, if face any problem.

[Anonymous]

Hi Grant,

Thanks for the help! I feel like we're close.  I've added that code, and added a form.  To get it to work, I needed to remove the absolute properties that are added to it by default when you drag it into Marketo.  However, I now seem to be getting a weird issue where my form has doubled, and then displays in two places.  The area on the rigtht hand side is right, and is moving with the responsive page as it should. However, the one on the left I definitely don't want.  Any ideas?

Here's the link:

http://learn.networkforgood.org/Humane_testing.html

[Igor_Khripunov]

Hi!

Drag and drop your form and include this few script in your LP:

<script type="text/javascript">

        $(document).ready(function () {

            $('.Form_1').appendTo($('#include_form'));

        });

    </script>

when #include_form is your place (<div id="include_form">) for form in LP.

It works great.