How can I make Marketo forms responsive when embedded in a responsive WordPress site?
We have a responsive site in Wordpress. We have implemented Marketo forms on the site. (Marketo is the marketing automation system we use.) Forms have custom CSS for styling. Forms now look great on the desktop, but they break the look on phones. How do I change the custom CSS for the form, embed code and / or CMS code for the landing page, etc. to make the forms responsive to the device correctly? Is it a matter of inserting a class tag or something more complex?
Here's the CSS for one of the shapes.
.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 for embedding a form on a landing page. You will 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 fix this problem, so any help would be much appreciated.
Thanks David
source to share
I recently fought with Marketo forms and had to remove inline styles to prevent overflowing sidebars from appearing on the init form:
// 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!
source to share
If the styles you posted are your own styles, then you will either want to change them there (perhaps with media queries based on screen size), or you can simply override them with your css sites. A great trick for overriding css that already has an important tag is to make the selector even more specific. For example, the above css has the following meaning:
.mktoTextField
{
width:278px !important;
}
If you want to override this though its already! important, you just need to be more specific with your selector by calling the container div:
.myContainerDiv .mktoTextField
{
width: 100% !important;
}
You can even go as far as you can to be super specific:
body .container .mkto-wrap .myContainerDiv .mktoTextField
{
width:100% !important;
}
I am just calling the element classes that I created, as opposed to the Marketo injected code.
Is this what you were looking for?
source to share