3

我们在 Wordpress 中有一个响应式网站。我们已将 Marketo 表单嵌入到网站中。（Marketo 是我们正在使用的营销自动化系统。）表单具有用于样式的自定义 CSS。现在这些表格在桌面上看起来不错，但它们破坏了手机上的视图。我们如何修改表单的自定义 CSS、嵌入代码和/或着陆页的 CMS 上的代码等，以使表单正确响应设备？是插入类标签还是更复杂的问题？

这是其中一种形式的 CSS。

.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;
}

这是 WordPress 中此部分的 html。Marketo 提供 JavaScript 以在登录页面上嵌入表单。您将在下面看到脚本。

<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]

我对如何解决这个问题非常迷茫，所以任何帮助都将不胜感激。

谢谢，大卫

4

2 回答 2

4

我最近与 Marketo 表单进行了斗争，最终不得不删除内联样式以防止表单在表单初始化时溢出侧边栏：

// 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%");
    }
});

希望这可以帮助！

于 2015-10-13T08:45:40.280 回答
0

如果您发布的样式是您自己的样式，那么您可能想要修改那些样式（可能使用基于屏幕大小的媒体查询），或者您可以使用您的网站 css 覆盖这些样式。覆盖已经具有 !important 标记的 css 的一个绝妙技巧是使选择器更加具体。例如，上面的 css 有这个：

.mktoTextField 
{
width:278px !important;
}

如果您想覆盖它，即使它已经 !important，您只需要通过调用容器 div(s) 来更具体地使用您的选择器：

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

你甚至可以尽可能地做到超级具体：

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

我只是调用我创建的项目类，而不是注入的 Marketo 代码。

那是你要找的吗？

于 2014-10-16T14:12:03.813 回答