How to make Marketo forms respond when embedded on a responsive WordPress site?

5 Views

We have a responsive site in WordPress. We’ve embedded Marketo forms into the site. (Marketo is a marketing automation system we’re using.) The forms have custom CSS for styling. Right now the forms look fine on desktop but they break the view on phones. How do we modify the custom CSS for the form, the embed code, and/or the code on the CMS for the landing page, etc. to make the forms respond correctly by device? Is it a matter of inserting a class tag or something more complicated?

Here is the CSS for one of the forms.

Read More
.mktoForm{color: #000000;width:378px !important; max-width: 407px; float:right; line-height: 34px; background: none repeat scroll 0% 0% #F0F0F0; padding: 10px 50px 20px 50px;
border-radius: 5px;font-family: 'Open Sans', sans-serif !important;}
label.mktoLabel {color: #000000;}
.mktoLabel {padding: 0 0 12px 0 !important; width: 109px !important;}
.mktoField{color: #000000; font-size: 14px !important; min-height: 33px; padding: 0px 0px 0px 5px !important; width: 100% !important; border: 1px solid #FAAA43; border-radius: 5px;}
.mktoOffset{width:0px !important; display:none !important;}
.mktoForm .mktoGutter{height:auto !important;}
.mktoForm .mktoFieldWrap{padding: 11px 0 0px 0;}
.mktoError{left:0px !important;}
.mktoButton{color: #000000 !important; font-size: 14px !important; min-height: 33px; padding: 0px 10px 0px 10px !important; width: 100%; border: 1px solid #FAAA43 !important; border-radius: 5px; background-color: #FFC000 !important; background-image: none !important;}
.mktoButton:hover{background-color: #fc9918 !important;}
.mktoButtonWrap{margin-left: 72px !important; display: inline-block;}
.mktoButtonRow{display: block !important; margin-top: 8px !important;}
.mktoAsterix {display:none !important;}
.mktoForm span {float:left;}
.tophed{

    float: left;
margin-top: -2px;
margin-bottom: 0px;
}
.lastlab{float: left;
margin-top: -9px !important; 
  font-size: 13px !important;

}
.mktoForm * {
font-family: 'Open Sans', sans-serif !important;
}
.mktoFormRow{
  width:250px;
}
.mktoTextField 
{
width:278px !important;
}
.mktoEmailField
{
width:278px !important;
}

Here is the html for this section in WordPress. Marketo provides JavaScript to embed the form on the landing page. You’ll see the script below. 

<p>[column lg="6" ]<span style="font-size: 17px;"><strong>Placeholder text</span> <br /> <br /> <img class="thumbnail img-responsive" style="padding-top: 7px; width: 120%;" src="Image URL" alt="alt tag goes here" /> [/column][column lg="1" ][/column][column lg="4" ]<script src="//app-ab05.marketo.com/js/forms2/js/forms2.js"></script>
<form id="mktoForm_1011"></form>
<script>MktoForms2.loadForm("//app-ab05.marketo.com", "578-AFO-782", 1011);</script>[/column][column lg="1" ][/column]

I’m pretty lost on how to address this issue so any help would be GREATLY appreciated.

Thanks,
David

Post Views: 5

Related posts

Leave a Reply

2 comments

  1. I battled Marketo forms recently and ended up having to remove inline styles to prevent forms from overflowing sidebars in the form initialisation:

    // Responsive Marketo forms in sidebars
MktoForms2.loadForm(url, munchkin, formId, function (form) {
    var parent = jQuery(form.getFormElem()).parent();
    if (parent.hasClass("widget")) {
        parent.find(".mktoHasWidth").removeAttr("style");
        parent.find(".mktoFormCol, .mktoFieldWrap").css("width", "100%");
    }
});

    Hope this helps!

  2. If the styles you posted are you own styles, then you would either want to modify those right there (potentially with media queries based on screen size), or you can just override those with your sites css. A nifty trick to overriding css that already has the !important tag is to make the selector even more specific. For example, the above css has this:

    .mktoTextField 
{
width:278px !important;
}

    If you wanted to override that, even though its already !important, you just need to be more specific with your selector by calling the container div(s):

    .myContainerDiv .mktoTextField
{
width: 100% !important;
}

    You could even go as far up as you can to be super specific:

    body .container .mkto-wrap .myContainerDiv .mktoTextField
{
width:100% !important;
}

    I am just calling the classes of items I have created as opposed to the injected Marketo code.

    Is that what you were looking for?