Ninja Forms 继承了您的 WordPress 主题的风格,虽然主要的自定义魔法来自于使用样式插件,但我们的免费核心插件有一些技巧可以帮助您免费设置表单样式。
让我们看看如何使用我们的核心插件免费设计您的 WordPress 表单,该插件包含大量出色的功能,比许多其他表单构建器提供更大的灵活性!
使用 Ninja Forms 免费设计
让我们探索一下无需使用样式插件或自定义 WordPress 主题样式表即可在表单上自定义哪些内容。
创建内联单选按钮
好奇如何将广播列表字段从如下所示转换为:
看起来像这样?
导航到表单构建器,单击“单选按钮”字段,然后找到“显示”部分 >“自定义类名称”>“容器”。将three-col-list添加到“容器”部分并保存。
就是这样!如果您希望单选按钮或其他列表字段(例如复选框字段)整齐地格式化为列,请遵循以下规则:
- 双列列表
- 三列列表
- 四列列表
- 五列列表
- 六列列表
请注意,如果您没有看到“自定义类名”设置,请在您的网站内导航至 “Ninja Forms”>“设置”>“高级设置” ,并勾选“表单生成器开发者模式”复选框 。荷兰电话号码库 这将允许高级选项显示在您的表单中。要了解更多信息,请查看我们的教程:如何在 WordPress 中创建内联单选按钮。
使用可重复字段集创建多列布局
使用中继器构建多列布局非常简单,其过程与将单选按钮列表设置为水平布局非常相似。Ninja Forms 的核心版本包含自定义 辅助类,可帮助您创建列布局。
辅助类可用于并排排列重复字段,从而提供更多控制以水平而不是垂直显示重复字段。
- first – 添加到一组字段中的第一个字段以创建一行。
- 一半( 最受欢迎)
- 三分之一
- 三分之二
- 四分之一
- 四分之二
- 四分之三
- 六分之一
- 六分之二
- 六分之三
- 六分之四
- 五分之六
要创建多列布局,您需要导航至可重复字段集>显示>自定义类名称>容器。
根据您想要创建的列布局,您需要选择合适的辅助类。要了解如何创建两列布局或三列布局,请查看我们的分步教程:如何使用可重复字段集创建多列布局。
向表单添加 HTML 字段
如果您想让表单外观更上一层楼,可以使用我们免费核心插件中的HTML 字段。这个功能强大的字段允许您添加格式化文本、添加额外空格、展示链接,或添加各种媒体类型,例如视频、徽标、文档或其他。
无论您是否熟悉 HTML,您都可以使用内置的Summernote 编辑器工具定制 HTML 字段,也可以插入您自己的 HTML 代码来对其进行自定义。
要了解如何在 WordPress 表单中使用 HTML 字段,请查看教程在 WordPress 表单中使用 HTML 字段的 5 种方法。
删除标有 * 的字段为必填项
当您将字段标记为用户必填时,以下行将显示在表单顶部:
您可以通过两种方式从表单中删除“删除带 * 号的必填字段”;如果您熟悉 CSS 代码,可以使用 CSS 代码。另一种方法是导航到表单构建器的“高级”选项卡> “显示设置” > “带 * 号的必填字段”,然后输入一个空格。
就是这样!如果您需要这两种方法的分步教程,或者想了解如何更改此文本的颜色,请查看博客文章“如何删除 Ninja Forms 中标有 * 的必填字段”。
更改表单字段的标签位置
此免费功能隐藏在开发者模式下,因此请免费解锁以访问“高级”选项卡。进入后,您可以更改标签的位置,甚至可以根据需要隐藏标签。
Ninja Forms 中表单字段的默认标签位置位于元素上方。这意味着,如果您将用户输入电子邮件地址的字段命名为“Email”,则表单标签将位于用户输入电子邮件地址位置的上方。
如果您决定隐藏标签并想使用占位符,请查看我们的教程如何向 WordPress 表单字段添加占位符。
向表单字段添加显示设置
Ninja Forms 构建器提供了多种样式选项,助您增强表单字段的显示效果。通过显示设置,您可以自定义占位符、添加帮助文本以及附加说明,从而创建更加精美、用户友好的表单。
只需确保明智地使用显示设置并保持一致性,即可实现专业且用户友好的设计。
使用显示设置来设计表单样式可以改善表单的视觉效果,并更有效地引导用户浏览表单,使其看起来更整洁、更有条理。
自定义电子邮件通知
尽管电子邮件通知从技术上来说不是表单本身的一部分,但它会在之后出现,您会欣赏到在用户提交表单后向他们发送的电子邮件消息的灵活性。
您可以将文件附加到电子邮件,包括用户提交的副本,向消息添加媒体,自定义文本,甚至使用合并标签从表单中动态提取数据。
要了解有关电子邮件消息样式的更多信息,请查看我们的博客文章在 WordPress 中自定义电子邮件通知消息。
更改表单标题
在 Ninja Forms 中,您可以轻松隐藏或重命名表单标题。2025年突破销售瓶颈、加速交易的5种方法 您还可以使用 H1 到 H6 的选项自定义表单标题。您可以通过导航至表单构建器的“高级”选项卡> “显示设置”来访问此设置。
在这里,如果用户输入了不正确的信息或想要跳过表单上必需的字段,您还可以自定义错误消息。
2. 不使用样式插件来设置表单样式的其他方法
如果您需要更多样式选项,但又不想使用 Ninja Forms 的样式插件,还有其他方法可以更改表单的外观。您可以使用 WordPress 定制器或主题手动添加 CSS 来设置表单样式。style.css.
要访问WordPress 定制器,请导航到您网站的仪表板,转到外观> 选择定制>附加 CSS并添加您的自定义 CSS。
请注意,定制器可用于设置表单样式,但样式的程度取决于您的主题或表单插件与定制器的兼容性。
如果您熟悉编辑主题文件,也可以直接将 CSS 添加到主题中style.css
。这样可以更好地控制特定页面或元素。要访问样式表,请导航至主题编辑器 >样式>高级 CSS。
许多主题都带有用于表单的内置样式选项,因此请务必探索主题的设置以查看可用的选项。
此外,如果您使用Elementor、Beaver Builder或Divi 等页面构建器,则可以直接在构建器界面中自定义表单样式。不过请注意,样式选项通常比较有限。
3. 需要更多表单自定义功能?试试“布局和样式”插件吧!
如果您需要更多样式灵活性和自定义功能,電報數據 请尝试我们的布局和样式插件。它对初学者友好,但精通 CSS 的用户会喜欢高级 CSS 部分,他们可以在其中编写自定义规则,进行更多实验。
下面让我们先睹为快,看看你可以使用 Ninja Forms 的样式插件来设计哪些内容:
- 更改 WordPress 表单的布局(行和列)
- 并排显示表单字段
- 更改 WordPress 中表单字段的大小
- 为 WordPress 表单字段添加圆角
- 只需 3 个简单步骤即可制作单行表单
- 更改字体大小、颜色或字体系列
- 在多步骤表单上设置进度条的样式
- 自定义 WordPress 表单上的“上一个”和“下一个”按钮
- 在 WordPress 中设计您的“提交”按钮
- 为表单制作渐变提交按钮
- 更改 CTA 按钮悬停颜色等
与 WordPress 领域的其他表单构建器不同,您可以单独购买我们的扩展程序,无需加入会员计划。按需获取所需功能。此外,您的扩展程序可在测试版和正式版(上线)网站上同时运行,您一定会爱上它!