Question

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

这是其中一个表单的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]

我很失落如何解决这个问题所以任何帮助都会非常感激。

谢谢，大卫

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

希望这有帮助！

Answer 2

如果您发布的样式是您自己的样式，那么您可能希望在那里修改它们（可能根据屏幕大小进行媒体查询），或者您可以使用您的网站css覆盖那些样式。覆盖已经拥有！important标签的css的一个好方法就是让选择器更加具体。例如，上面的css有这个：

.mktoTextField 
{
width:278px !important;
}

如果你想覆盖它，即使它已经非常重要，你只需要通过调用容器div来更具体地选择你的选择器：

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

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

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

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

那是你在找什么？

在嵌入响应式WordPress网站时，如何使Marketo表单响应？

2 个答案: