在 WordPress 中删除 ConvertKit 表单上的默认样式答案

【问题标题】：Remove default styles on ConvertKit form in WordPress在 WordPress 中删除 ConvertKit 表单上的默认样式
【发布时间】：2021-06-03 22:10:57
【问题描述】：

有一个 ConvertKit 表单，它是使用 ConvertKit plugin 添加的，并按如下方式上传到小部件上

应用一些样式后，当我登录时，表单是这样的

但是，当我注销时，会加载一些默认样式，并且表单最终看起来像这样

如何删除 ConvertKit 的默认样式？

可能有不同的方法可以删除 ConvertKit 应用的默认样式。我尝试了以下方法，但没有成功：

在前端查看表单，可以看到在一个类"seva-form formkit-form"的表单中，除了两个div之外，还有一个style元素，如下

<form class="seva-form formkit-form">
   <div class="formkit-background">...</div>
   <div data-style="minimal">...</div>
   <style>...</style>

正如我所见，删除样式块<div data-style="minimal">...</div> 解决了表单的问题，尝试按照@m4n0's suggestion 应用.formkit-form div[data=style="minimal"] { display: none; }，但它没有解决问题。

【问题讨论】：

.formkit-form div[data=style="minimal"] { display: none; } 应该可以工作。
@m4n0 它不起作用。我已经添加了一些自定义 CSS，当我登录到 website 时，我看到了 like this 表单。当我退出时，您也可以通过访问我之前超链接的网站看到，我看到它like this
@m4n0 我的目标是删除 ConvertKit 放置在表单上的默认样式并应用我创建的特定样式，并且我可以在登录时看到。为此，删除块<div data-style="minimal">...</div> 将解决这个问题，这就是为什么我要求一种方法来做到这一点。不过，可能还有其他方法可以删除默认样式。
如果你想去掉包装，你可以用JS来做。
要这样显示吗？ nimb.ws/P1YjR9

标签： css wordpress forms plugins widget

【解决方案1】：

根据我们通过 cmets 讨论的您不断变化的需求：

form.formkit-form[data-uid="3624b8b144"] {
   border: transparent;
   margin: 0 auto; /* To center the form, you can also use flexbox centering */
}

/* I had to increase the specificity of the below selector because there are other selectors acting on it */

form.formkit-form div.formkit-powered-by-convertkit-container a.formkit-powered-by-convertkit {
   display: none; /* To hide the copyright but check how their licensing works */
}

.formkit-guarantee a {
    color: #fff; /* To change the color of privacy link */
}

输出：

【讨论】：

效果很好 - 谢谢！我什至会用赏金来奖励你，以表示我的感激之情。我正在使用this 更改样式，但无论何时我注销更改都没有生效。
你真好。不推荐您发布的 JSfiddle 代码。当您使用 WordPress 时，选择器可能会发生变化。它仅在您登录时才起作用，因为它附加了“登录”nimb.ws/PHXby8 类。它还带来了很多条件，以至于它只在您编辑时才起作用，而不是在您刷新页面时。
甚至没有意识到这一点，感谢您帮助我微调未来的程序。下次考虑更改 CSS 时，我将以私有模式打开网站并以这种方式从控制台复制 CSS 路径，因为我不会登录。