Html 如何使Marketo表单在嵌入响应性WordPress站点时响应？

我们在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]

[column lg=“6”]占位符文本

[/column][column lg=“1”][/column][column lg=“4”]
MktoForms2.loadForm（“//app-ab05.marketo.com”，“578-AFO-782”，1011）；[/column][column lg=“1”][/column]

我对如何解决这个问题感到非常困惑，因此非常感谢您的帮助

谢谢，

---

David

如果你发布的样式是你自己的样式，那么你要么想在那里修改这些样式（可能是基于屏幕大小的媒体查询），要么就用你的网站css覆盖这些样式。一个漂亮的技巧来覆盖css，已经有了！重要的标记是使选择器更加具体。例如，上述css具有以下功能：

.mktoTextField 
{
width:278px !important;
}

如果你想覆盖它，即使它已经存在了！重要的是，您只需要通过调用container div来更具体地使用选择器：

你甚至可以尽你所能做到非常具体：

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

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

---

这就是您想要的吗？

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

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

---

希望这有帮助

我从一个朋友那里得到了一些信息，他说了这句话。有人能就我如何修改CSS提出建议吗？“就响应而言，Marketo Forms 2.0是响应的，但是您上面的CSS代码声明了表单和字段的固定宽度。如果删除该代码，您的表单应该是响应的。”请注意，Marketo还将内联CSS注入表单元素和

，以及加载一些外部样式表。如果您想丢失Marketo中的所有样式，还需要通过

document.stylesheets

并将

disabled=true

设置为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%");
    }
});