SAP Marketing Cloud中的表单用于从新联系人或现有联系人收集数据。在contentstudio应用程序的表单设计器中，您具有影响样式的基本功能。例如，可以更改字段序列和字段标签的位置。自1905发布以来，您可以选择将表单嵌入到新的登录页中，并且在那里您还可以选择其他选项来更改表单的样式。例如，您可以更改按钮和按钮文本的颜色。

如果您需要更高级的表单样式设置功能，我们支持在表单设计器中定义自定义CSS文件。

在本文中，我想向您概述改进表单样式的先决条件和过程。我还打算在这篇文章的基础上，发表一系列关于CSS的具体改进的文章。

在您进一步阅读之前，我想指出这将变得非常技术化，您应该具备以下知识：

HTML和CSS方面的知识。如果你不这样做，你应该先提高你的技能。一些好的起点是：w3.org–从HTML+CSS开始LinkedIn学习(琳达网)–优秀的付费在线课程。例如，基本培训只需在网上搜索"学习css"或"css入门"使用用户凭据访问公共web服务器以编辑或上载文件FTP客户端将您的CSS文件上传到web服务器（为了方便-通常您也可以使用web服务器上的工具来创建或编辑文件）

另外请注意，我在这里提供的所有CSS代码都没有保修-您需要自己尝试并彻底测试所有内容-特别是对于多种屏幕尺寸，设备或浏览器！检查您可能想要使用的任何CSS属性的全局兼容性的一个好方法是caniuse.com网站.

将您的Web服务器的域添加到CSP白名单

最近我们开始实施并启用一个新的安全功能，称为内容安全策略（CSP），请参阅). 请参阅表单文档中的"使用样式表URL"部分。当此策略完全有效时，任何外部CSS文件都将被阻止。因此，您需要将存储CSS文件的web服务器的域添加到CSP白名单中，如下所示：

注意-不要破坏UI！

使用CSS可以影响HTML页面的每个部分。在表单设计器的上下文中，这实际上意味着该网页的每个元素！如果为表单启用CSS样式表，那么该文件中的所有样式语句也可能会影响用户界面的HTML元素（因为UI也是用HTML构建的）。在最坏的情况下，这可能会使用户界面无法使用！

出于这个原因，我想在这里给出一些建议或基本规则：

不要简单地设计一个像H1、P或者更糟糕的HTML或BODY这样的HTML标签。这将是非常不具体的。不过，在更具体的类名后面使用HTML标记是可以的，例如'.MyCustomClass>P'。尽可能具体地使用CSS选择器为了避免这个问题，我的一般建议是用类".sapcpcpcontentpage"启动每个CSS选择器，因为它是表单本身的第一个DIV元素的类。通过这样做，您将永远不会影响表单设计器的任何UI元素。如果您只使用自己的自定义CSS类，并将其分配给特定字段（请参阅下一节），那么将该类用作CSS选择器是安全的（无需预先添加".sapCpContentPage"）。但是，这只有在这些类的样式不会改变字段的布局时才有效（见下一段）

一个稍微相关的问题是，您可能需要进行一些样式设置，这会影响表单元素的布局。例如，将两个输入字段并排放置在同一行上。虽然这可能是运行时表单的一个有效用例，但这种布局更改也有可能破坏表单生成器的UI。结果将是在添加新字段或移动字段时出现问题。作为一种解决方法，我建议将相关CSS样式的有效性仅限制在显示模式或运行时，或者换句话说，在编辑模式下阻止这些样式。幸运的是，物联网模块，当您处于编辑模式时，表单的顶层DIV上有一个名为".sapcpcContentPageEditable"的类。因此，我想用这一点来扩展上面的列表：

对于所有改变字段、标签或任何其他属性布局的样式，您应该在CSS选择器前面加上".sapCpCo"第页：没有（.sapCpContentPageEditable）'（而不是仅使用.sapCpContentPage'）如果您自己的自定义类是此类更改的触发器，那么也需要对它们执行此操作！

浏览器开发工具

既然我已经假设你对CSS有很好的了解，你应该知道这一点，但为了完整起见，我想指出浏览器开发工具是多么有用。每个浏览器都有工具来调查任何网页的细节。要激活这些工具，您需要检查特定的浏览器。对我来说，最直观的方法是inspect选项，当您将鼠标悬停在感兴趣的元素上，然后按鼠标右键时，每个浏览器都应该提供该选项。在上下文菜单中，您将看到一个类似"Inspect"或"Inspect Element"的选项。因此，如果您想为窗体上的特定字段创建样式，则只需将鼠标悬停在该字段上并调用Inspect选项（请参见上面屏幕截图中的弹出窗口）。