在本文中,您将了解如何使用免费的 Elementor 创建表单。

虽然表单小部件仅在 Elementor Pro 上可用,但这并不意味着您不能在 Elementor 免费版上创建表单。

如果您需要向使用 Elementor 免费版创建的页面添加表单,您可以使用我们将在本文中介绍的两种方法。

Elementor,无论是专业版还是免费版,都带有两个可用于创建表单的小部件。 这些是 HTML 和简码小部件。 使用 HTML 小部件,您可以嵌入 HTML 表单,而简码小部件允许您从使用简码的表单插件中嵌入表单,例如 联系表格 7.

使用 HTML Widget 使用 Elementor 免费版创建表单

此方法要求您具备创建表单的 HTML 技能。 或者,您可以从 Internet 下载 HTML 表单模板。 W3docs 有 60 多个 HTML 表单模板 您可以免费下载。

首先,创建一个新页面并使用 Elementor (页面->添加). 当然,您也可以修改现有页面。 如果要在新页面上创建表单,请记住通过单击左下方面板中的齿轮图标来设置表单布局。

通过单击编辑区域中的加号按钮添加一个新部分,并通过将 HTML 表单从左侧面板拖动到编辑区域来添加它。 把它放在你想要的地方。 然后转到左侧面板并将表单的 HTML 代码粘贴到字段中 HTML代码 标签下 包装内容.

使用免费的 Elementor 创建表单

完成编辑后发布/更新页面。

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

一个东西。 如果您的 HTML 表单使用外部 CSS、图像或 JavaScript 进行样式设置,请务必将包含 CSS 代码、图像和 JavaScript 的文件夹上传到您网站的根目录。

使用联系表格 7 免费在 Elementor 上创建表格

如果您没有任何 HTML 技能并且不想使用 HTML 表单模板,您可以使用插件在 Elementor 免费版上创建表单 联系表格 7.其实还有很多其他的表单插件。 我们推荐 联系表7 因为它是 WordPress 最受欢迎的表单插件,而且完全免费。

首先,安装插件 联系表格 7. 为此,请转至 扩展 -> 添加. 在搜索框中输入“contact form 7”,然后单击按钮 立即安装 一旦你找到它。

安装后立即激活插件。

使用免费的 Elementor 创建表单

Contact Form 7 附带一个默认表单(一个 联系表 ). 如果你愿意,你可以使用它。 如果你想创建一个新的表单,你可以去 联系人->添加. 为您的表单命名,以便您将来可以轻松识别它。

默认情况下,您的表单将包含四个字段:姓名、电子邮件、主题和消息。

使用免费的 Elementor 创建表单

如果要添加新字段,请将指针放在要添加新字段的区域(您可以将其放在现有字段的下方或上方)。 为格式中的新表单字段添加标签 <label> votre label préféré </label>.

使用免费的 Elementor 创建表单

将指针放在标签后面,然后在字段选项卡中选择一个字段。 您可以添加一个新的换行符,使您的新字段比其他现有字段更清晰。

填写字段并单击 插入标签 (您可以将所有内容保留为默认值)。

使用免费的 Elementor 创建表单

Contact Form 7 会将通过您的表单提交的内容发送到电子邮件。 您可以从选项卡设置电子邮件 邮箱.

使用免费的 Elementor 创建表单

你可以去选项卡 在线消息 如果您想覆盖默认消息。 您可以自定义访问者成功提交表单后出现的消息或未提交表单时出现的错误消息等。

使用免费的 Elementor 创建表单

点击按钮 Enregistrer 完成编辑表格并复制短代码后。

要将刚刚创建的表单添加到 Elementor 页面,请创建一个新页面并使用 Elementor 对其进行编辑,或者您也可以编辑现有页面。

另请参阅: 如何禁用智能手机上的 Elementor 弹出窗口

添加一个新部分来放置表单并添加 短代码小部件. 添加简码小部件后,转到左侧面板并将复制的简码粘贴到字段中 短代码 标签下 包装内容.

完成编辑后发布/更新您的页面。

Contact Form 7 使用样式格式 WordPress主题 你使用的。 您可以设计 Contact Form 7 表单的样式,但需要 CSS 技能。 您也可以在以下位置查看这篇文章 如何使用 Essential Addons 和 Elementor 自定义 Contact Form 7 表单。

立即获取 Elementor Pro !!!

结论

所以 ! 本文就是这样,它向您展示了如何使用免费的 Elementor 创建表单。 如果您对如何到达那里有任何疑问,请在 评论.

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

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

...