Question

我在网站上实现了一个Contact Form 7插件表单作为Bootstrap模式。当您在站点的不同位置单击“请求报价”按钮时，将弹出Bootstrap模式，并从全局样式表中以某种方式设置样式。

但是，客户希望将相同的表单插入“联系我们”页面，而不是作为Bootstrap模式弹出，并且使用表单域<label>标签和其他元素的不同样式。

我不了解CSS特异性和继承性，以便能够在使用“联系我们”页面上的CF7短代码插入时使用CF7短代码插入相同形式的不同风格的实例。全局页脚中的Bootstrap代码。

我原本以为只需在“联系我们”页面中的短代码之前插入<style>标签以及更多本地化样式，就可以按照这种方式设置样式。但是，当我按下全局Request a Quote按钮时，Bootstrap模式也会采用该样式。

有人可以教育我，或者指出一个资源，帮助我弄清楚如何在保持Bootstrap模式以自己的方式设置风格的同时做这个造型实例？

Here's the Contact Us page使用渲染的CF7表单短代码，但减去我想要的样式，以便您可以在“之前”模式中看到它。这是我在WP后端的页面中插入的代码，试图影响这个页面的样式：

<style>
.wpcf7-form label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 100;
    font-size:.8em;
}
</style>
[contact-form-7 id="1455" title="Request a Quote Form"]

如果您查看来源，您会在页脚中看到模态内容。我想可以使用Chrome Inspector确定答案，但如果没有让我知道。

感谢。

Answer 1

我只需在“联系我们”页面上的联系表单实例中添加一个类（on-page），然后在所有特定于此实例的CSS定义中使用.on-page：

<style>
.wpcf7-form.on-page label {
    display: inline-block;
    max-width: 100%;
    margin-bottom: 5px;
    font-weight: 100;
    font-size:.8em;
}
</style>
[contact-form-7 id="1455" html_class="on-page" title="Request a Quote Form"]

样式WordPress联系表格7根据页面不同

1 个答案: