如何让 Marketo 表单在嵌入到响应式 WordPress 网站时做出响应？
Posted
技术标签:
【中文标题】如何让 Marketo 表单在嵌入到响应式 WordPress 网站时做出响应？【英文标题】：How to make Marketo forms respond when embedded on a responsive WordPress site? 【发布时间】：2014-10-07 14:26:25 【问题描述】：我们在 Wordpress 中有一个响应式网站。我们已将 Marketo 表单嵌入到网站中。 （Marketo 是我们正在使用的营销自动化系统。）表单具有用于样式的自定义 CSS。现在这些表格在桌面上看起来不错，但它们破坏了手机上的视图。我们如何修改表单的自定义 CSS、嵌入代码和/或登录页面的 CMS 上的代码等，以使表单正确响应设备？是插入类标签还是更复杂的问题？
这是其中一种表单的 CSS。
.mktoFormcolor: #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;
.mktoFieldcolor: #000000; font-size: 14px !important; min-height: 33px; padding: 0px 0px 0px 5px !important; width: 100% !important; border: 1px solid #FAAA43; border-radius: 5px;
.mktoOffsetwidth:0px !important; display:none !important;
.mktoForm .mktoGutterheight:auto !important;
.mktoForm .mktoFieldWrappadding: 11px 0 0px 0;
.mktoErrorleft:0px !important;
.mktoButtoncolor: #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:hoverbackground-color: #fc9918 !important;
.mktoButtonWrapmargin-left: 72px !important; display: inline-block;
.mktoButtonRowdisplay: block !important; margin-top: 8px !important;
.mktoAsterix display:none !important;
.mktoForm span float:left;
.tophed
float: left;
margin-top: -2px;
margin-bottom: 0px;
.lastlabfloat: 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" /> [/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]
我不知道如何解决这个问题，因此非常感谢任何帮助。
谢谢， 大卫
【问题讨论】：
我从一位朋友那里得到了一些意见，他说了这句话。有人可以就我如何修改 CSS 提供建议吗？ “就响应式而言，Marketo Forms 2.0 是响应式的，但您上面的 CSS 代码声明了表单和字段的固定宽度。如果您删除该代码，您的表单应该是响应式的。” 【参考方案1】：我最近与 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%");
);
希望这会有所帮助！
【讨论】：
请注意，Marketo 还将内联 CSS 注入表单元素和<head>，并加载一些外部样式表。如果您想丢失 所有 Marketo 的样式，您还需要通过 document.stylesheets 并将 disabled=true 设置为来自 Marketo 的样式。【参考方案2】：
如果您发布的样式是您自己的样式，那么您可能希望在此处修改这些样式（可能使用基于屏幕大小的媒体查询），或者您可以使用您的网站 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 代码。
这就是你要找的吗？
【讨论】：
以上是关于如何让 Marketo 表单在嵌入到响应式 WordPress 网站时做出响应？的主要内容，如果未能解决你的问题，请参考以下文章
javascript 将PowerTip悬停添加到Marketo表单
Marketo 表单复选框 - 选中另一个复选框时取消选中复选框