您是否想快速更改表单中表单字段的大小

您是否想快速更改表单中表单字段的大小，而无需费力编写代码或编辑 WordPress 主题的样式表？不用再犹豫了！

使用 Ninja Forms 的样式插件Layout & Styles，您可以轻松调整表单字段的宽度。在今天的教程中，我们将向您展示如何调整表单字段的大小，以及如何将字段设置为圆角而不是默认的矩形。让我们开始吧！

1. 如何调整WordPress表单字段的宽度（长度）？

表单字段的宽度应该取决于你的设计目标，但在设计表单字段时，一个非常重要的因素是你收集的数据类型。基于此，你可能需要调整输入字段的大小。

例如，虽然邮政编码字段的大小可以相对较短，但邮寄地址字段应该提供足够的空间来容纳用户输入所有必要的信息。

在本教程中，我们选择了“电子邮件”字段来演示如何更改表单字段的大小。我们将向您展示如何调整表单字段的长度（宽度），如下所示：

缩短至更短的长度：

一旦您安装了布局和样式插件，您将在电子邮件字段下看到一个名为“样式”的附加表单设置。

打开“样式”设置，找到“元素样式”部分。找到“宽度”，输入230px即可修改表单字段的默认长度。这个简单的调整将使你的表单字段比默认的长尺寸更短。

此外，您可以使用两列布局来调整表单字段的大小。只需拖放表单字段即可将其对齐成两列。我们将在下一节中演示这一点。

在之前的示例中，我们展示了如何使用“样式”设置更改表单字段的大小。塞内加尔电话号码库我们将此示例应用于一个表单字段在一列中对齐的表单。

但是，如果您的表单采用两列布局，则可以使用一些技巧来调整表单字段的宽度。在向您展示之前，我们先来介绍一下如何使用“布局和样式”插件轻松创建两列表单布局：

现在您已经了解如何创建两列布局，您可以轻松调整表单字段的长度，而且无需任何 CSS 代码。您只需点击新的列栏，然后用鼠标将其左右移动即可。

使用“调整大小”栏（一条灰色垂直线），您可以调整列之间字段的宽度。当您来回移动“调整大小”栏时，会显示百分比，指示每列的相对大小。

如果您想在单列表格上使用此技巧，请从第二列中删除该字段，但不要删除该列。

安装“布局和样式”插件后，您将访问一个名为“样式”的附加“功能选项卡” ，该选项卡可为您的字段解锁多个自定义选项。我们在下面的示例中选择了“电子邮件”字段。

打开“样式”选项卡后，找到“元素样式”部分。在这里，您可以随意调整并自定义表单字段的外观。

导航到“显示高级 CSS 属性”并打开按钮，使其变为绿色，如下面的屏幕截图所示。

这将显示一个附加字段。您可以在这里输入 CSS 规则。要为电子邮件字段添加圆角，请输入以下内容：

边框半径：20px；

这个技巧将把这个矩形电子邮件字段变成：

变成这样：

您可以通过更改 20px 的值来更改圆角的大小。为了获得更圆润的效果，您可以增加该值。（例如 40px）为了获得更小的圆角效果，您可以减少该值。

就是这样！这就是创建带圆角的输入文本框的方法。

不想在字段上方显示电子邮件标签？隐藏表单标签，零售媒体网络持续增长：2025 年预测改用占位符！在我们的教程“如何在 WordPress 表单字段中添加占位符”中了解更多关于占位符的信息。

布局和样式插件是一款功能强大的样式插件，可为您的 WordPress 表单提供广泛的自定义功能。使用此插件，您可以执行以下操作：

告别复杂的表单自定义方案，选择 Ninja Forms 的样式插件，電報數據开启更便捷的表单定制之旅！正在寻找其他表单功能？探索我们的插件合集。

如果您是 DIY 爱好者，欢迎查看我们的指南如何使用自定义 CSS？以及想要将自定义 CSS 添加到 WordPress 表单（初学者指南）。