jquery - 根据页面不同地设计 WordPress Contact Form 7

Question

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

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

我对 CSS 特异性和继承的了解还不足以创建相同表单的不同样式的实例，当它在“联系我们”页面上使用 CF7 短代码插入时与在“联系我们”页面上使用 CF7 短代码插入时全局页脚中的 Bootstrap 代码。

我以为只要插入<style>在“联系我们”页面中的短代码之前具有更多本地化样式的标签，它将以这种方式设置样式。但是，当我按下全局请求报价按钮时，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"]