根据页面对 WordPress 联系表 7 进行不同的样式设置答案

【问题标题】：Styling WordPress Contact Form 7 differently depending on page根据页面对 WordPress 联系表 7 进行不同的样式设置
【发布时间】：2016-10-21 22:41:16
【问题描述】：

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

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

我对 CSS 的特殊性和继承性的了解不够，无法在使用“联系我们”页面上的 CF7 短代码插入同一个表单时创建不同样式的实例，而不是在使用 CF7 短代码在全局页脚中的引导代码。

我原以为只需在“联系我们”页面中的短代码前面插入具有更多本地化样式的<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 确定答案，但如果没有，请告诉我。

谢谢。

【问题讨论】：

这个表单没有任何引导类。我的意思是模态页面和联系页面。如果您想添加自己的课程，您需要通过 Contact Form7 进行制作。在 wp-admin 面板中编辑您的表单，然后应用您的类而不是默认值，如下所示：<div class="your-class"> [text* your-name class:your-class-for-input placeholder "Input element"] </div>

标签： jquery html css wordpress twitter-bootstrap

【解决方案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"]

【讨论】：