首頁 » 博客 » 使用 Ninja Forms Core 插件免费设计你的 WordPress 表单

使用 Ninja Forms Core 插件免费设计你的 WordPress 表单

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

 

许多主题都带有用于表单的内置样式选项,因此请务必探索主题的设置以查看可用的选项。

此外,如果您使用ElementorBeaver BuilderDivi 等页面构建器,则可以直接在构建器界面中自定义表单样式。不过请注意,样式选项通常比较有限。

3. 需要更多表单自定义功能?试试“布局和样式”插件吧!

如果您需要更多样式灵活性和自定义功能,電報數據 请尝试我们的布局和样式插件。它对初学者友好,但精通 CSS 的用户会喜欢高级 CSS 部分,他们可以在其中编写自定义规则,进行更多实验。

 

下面让我们先睹为快,看看你可以使用 Ninja Forms 的样式插件来设计哪些内容:

  • 更改 WordPress 表单的布局(行和列)
  • 并排显示表单字段
  • 更改 WordPress 中表单字段的大小
  • 为 WordPress 表单字段添加圆角
  • 只需 3 个简单步骤即可制作单行表单
  • 更改字体大小、颜色或字体系列
  • 在多步骤表单上设置进度条的样式
  • 自定义 WordPress 表单上的“上一个”和“下一个”按钮
  • 在 WordPress 中设计您的“提交”按钮
  • 为表单制作渐变提交按钮
  • 更改 CTA 按钮悬停颜色等

与 WordPress 领域的其他表单构建器不同,您可以单独购买我们的扩展程序,无需加入会员计划。按需获取所需功能。此外,您的扩展程序可在测试版和正式版(上线)网站上同时运行,您一定会爱上它!

返回頂端