您想使用 Elementor 的 Essential Addons 插件自定义 contact form 7 表单吗?

联系表格 7 是其中之一 WordPress插件 最受欢迎的表单生成器。 它是完全免费的,您可以用它来创建一个 联系表 在你的WordPress网站上。

您还可以创建多种类型的表单,例如预订表单或文件上传表单。 它提供了 14 种类型的字段,您可以在创建表单时使用这些字段。

另请参见: 如何将 Elementor 小部件/模板用作古腾堡块

contact form 7 插件的常见问题之一是其自定义过程。 Contact Form 7 使用您的默认样式 WordPress主题 资产。 您可以使用不同的样式,但需要 CSS 技能。 如果您没有任何 CSS 技能,可以使用该模块 基本附件 设置表单样式。

Essential Addons 是一个 Elementor 插件,可增强使用 Elementor 自定义 Contact Form 7 表单的过程。 Elementor 和 Essential Addons 是免费增值插件。 您可以使用两者的免费版本来设计您的 Contact Form 7 表单。

如何使用 Essential Addons 设计 Contact Form 7 Form 的样式

在开始设置表单样式之前,请确保已安装 Elementor et 基本附件. 安装并激活后,创建一个新页面(页面->添加) 并使用 Elementor 对其进行编辑。

使用 Elementor 的 Essential Addons 插件自定义联系表格 7 表格

在开始自定义过程之前,通过单击左下角的齿轮图标来设置页面布局。 从下拉菜单中设置布局。

使用 Elementor 的 Essential Addons 插件自定义联系表格 7 表格

通过单击编辑框中的加号图标并拖动小部件来添加新部分 EA 联系表 7 从编辑器的左侧面板。

使用 Elementor 的 Essential Addons 插件自定义联系表格 7 表格

转到左侧面板并选择要自定义其样式的表单。

选择表单后,导航到选项卡 样式. 如您所见,您可以设置多个样式选项。 以下是您可以设置的常见样式选项。

  • 表单宽度、对齐方式和背景

块下 窗体容器, 单击该部分中的颜色选择器 背景类型 并为表单的背景设置所需的颜色。 您可以使用纯色或渐变色作为背景。

另请参阅: Elementor:如何导入或导出模板

要设置表格对齐方式,只需在部分中选择您喜欢的对齐方式选项 表格对齐.

要设置表单的宽度,请在字段中设置表单的最大宽度值 表格最大宽度.

使用 Elementor 的 Essential Addons 插件自定义联系表格 7 表格
  • 背景字段、边框宽度和半径

要定义字段的背景、边框的宽度和半径,您可以打开该部分 输入和文本区域. 单击字段颜色选择器 背景颜色 设置背景。

您还可以通过单击选项卡在调试模式下设置字段的背景颜色 专注领域.

要定义字段的宽度,您可以在字段中定义值 输入宽度. 在此部分中,您还可以设置文本框字段的宽度 文本区域宽度.

要设置边框半径,只需去编辑字段 边界半径 并设置您喜欢的边框值。 您还可以通过单击字段中的铅笔图标来设置排版(字体系列、字体大小、字体样式) 活版印刷.

  • 标签

Essential Addons 还允许您自定义表单标签的样式。 您可以设置文本颜色和排版。 为此,请打开选项 标签. 通过单击字段中的颜色选择器来设置文本颜色 文字颜色.

要设置排版,请单击字段上的铅笔图标 活版印刷.

使用 Elementor 的 Essential Addons 插件自定义联系表格 7 表格
  • 提交按钮

要自定义提交按钮的样式,请打开块 提交按钮. 从这里您可以设置按钮对齐方式、宽度、背景颜色、文本颜色、边框半径以及排版。

  • 错误信息

要自定义错误消息的样式,可以打开块 故障. 您可以设置错误消息文本颜色、排版、验证错误背景颜色、验证错误文本颜色等……。

您可以设置其他几个样式选项。 您可以尝试使用左侧面板,直到您对表单的样式感到满意为止。

您可以使用 Elementor 和 Essential Addons 提供的可用小部件将其他几个元素添加到您的页面。 完成后,单击按钮 PUBLISH 在左侧面板的底部发布您的页面。

将表单集成到常规页面中

点击按钮后 PUBLISH,您的联系页面基本已经发布。 该页面本身由 Elementor 提供支持。 如果你喜欢添加你的 联系表 7 到一个常规页面(使用WordPress默认编辑器Gutenberg创建的页面),可以安装插件 古腾堡的元素块. 该插件会将 Elementor 模板转换为 Gutenberg 块。

注册您的 联系表 7 作为Elementor模板,点击按钮旁边的箭头按钮 发布/更新 在左侧面板上并选择 另存为模板.

为您的模板命名并单击按钮 登记员.

创建一个新页面(页面->添加) 并为其命名,如“联系我们”、“联系人”或您喜欢的任何其他名称。

添加一个新块并选择 元素库 并选择您刚刚创建的联系表单模板。

使用 Elementor 的 Essential Addons 插件自定义联系表格 7 表格

现在您刚刚个性化了您的 Contact Form 7 表格。

立即获取 Elementor Pro !!!

结论

这里 ! 这就是本文的全部内容,它向您展示了如何使用 Essential Addons 自定义 contact form 7 表单。 如果您对如何到达那里有任何疑虑,请在 评论.

但是,您也可以咨询 我们的资源,如果您需要更多的元素来执行创建Internet网站的项目,请参考我们关于 WordPress博客创建 或者那个 Divi:有史以来最好的WordPress主题.

但与此同时, 在您不同的社交网络上分享此文章.

...