Using marketo forms in a responsive layout.

[Anonymous]

Responsive design has become a necessity.  This can be problematic, especially using marketo's  drag and drop template system.  There's a simple approach to overcoming this using jquery. 



Here's what I've done:

Step 1. Create your responsive layout/template.  Be sure to plan a container to hold the marketo form.

<div class="large-input well"></div>


Step 2. add jquery to your layout. Something like this.

<script src="http://info.advancedmd.com/rs/advancedmd/images/jquery.js"></script>
 

Step 3.  Add the a script to clone the marketo form and place it in your container. Remove the original form.

<script>
    
    /* -- Marketo form alterations by Jeff Petersen -- */
    var p = $( ".formwrap .well" );     // create a var that can be referenced later
    var f = $( "div.Form_1" );            // var to be used later
    var f2 = $( "div.lpeCElement" );  // var for styling
    
    $(document).ready(function(e) {
        
        $( f ).clone().appendTo( p );
        var form_id = $( f ).attr("id");
        $(f).remove();
        
    });
  </script>

Step 4. Add classes and styles to make the marketo form match your styling.  These should match what your design is expecting.



...$(document).ready(function(e) {
        
        $( f ).clone().appendTo( p );
        var form_id = $( f ).attr("id");
        $(f).remove();
       
        $( "#"+form_id ).css({'position':'relative','left':'inherit','top':'inherit','width':'100%'});  //this resets the forms native positioning to use local or relative positioning instead of absolute

        //These styles are specific to my page. Your's may be similar. 
        //They override default styles and add new classes to control the style

        $('label').addClass('control-label');
        $('form li').addClass('control-group');
        $('input').parent().addClass('controls');
        $('input').addClass('input-block-level');
        
        $('#mktFrmButtons').removeClass();
        $('#mktFrmButtons label').removeClass('control-label');
        
        $("#mktFrmSubmit").attr('style','');  //remove default marketo button style               
        $("#mktFrmSubmit").attr('style','color:#FFFFFF');
        $("#mktFrmSubmit").addClass('btn btn-success btn-large');

   });
  </script>...

Step 5. Create a new landing page using your new template. Using the editor drag a form onto the lp design. Set it up as usual. Approve the draft. Preview should now show the form in your new container.

Marketo will now track traffic and conversion based on form completion. It also allows you to use any form without altering the forms code.

[Anonymous]

That is a great write up. Thanks for sharing.

I have been exploring Responsive Design for a while. I like your solution.

[Anonymous]

We are ungoing an update to our website to include a responsive design as well. This information will come in handy!

Are you currently using a CMS for your website? We are using Wordpress as a CMS and I'm hoping the Marketo Gravity Forms Add-on will be the solution to the forms being responsive. If not, I'll need this article!

[Anonymous]

I'm glad you find this helpful.  We use expression engine as our CMS outside of marketo. Marketo is our nuture landing page solution and our own website is our natural search solution.  Both communicate with marketo so we're able to track leads from both environments in s asingle CRM.

[Anonymous]

I've revisited this method after discovering it breaks the prefill feature.  I've added the following script to resolve this issue for input and select form fields. Add this script inside the document.ready call.

...
        $("#mktFrmSubmit").attr('style','color:#FFFFFF');
        $("#mktFrmSubmit").addClass('btn btn-success btn-large');
if (mktoPreFillFields != undefined) {
          
                  $('input').each(function(index,element){
                        elementId = $(element).attr('id')
                        prefillId = eval('mktoPreFillFields.'+elementId);
                        if(elementId != "mktFrmSubmit"){
                            $(this).val(prefillId);
                        }
                });
                $('select').each(function(index,element){
                        elementId = eval('mktoPreFillFields.'+$(element).attr('id'));
                        $(this).val(elementId);
                });

    }
});
  </script>...

[Matt_Rushing1]

Jeff,

Will doing this at the template level then allow marketer to create responsive LPs using the editor, or does this need to be done for each individual LP?

Awesome writeup!

[Anonymous]

Matt,

This can be done at the template level.  Since doing this, I've expanded this technique to include the other elements on the page.  I have a template that will position specific elements into my responsive containers. The trick is knowing how to target the dynamic elements. Using CSS selectors helps target the elements I want to move.

It's not perfect, but it makes the landing pages work for responsive layouts.

[Anonymous]

Will this method work for the current version of Forms 2.0??

[Anonymous]

Interesting approach to working around their absolute position restriction. I wish it worked more like their email but this might just make using their landing pages bearable.

[Anonymous]

This does work with forms 2.0.  We've just built a few programs using this technique with forms 2.0, it works great.