Elementor教程-Widget 概述-表单

上一期,我们和大家分享了Elementor教程-Widget 概述-锚点,关于锚点的Widget;今天继续分享一个新的Widget-Form Widget

如果我们希望在网站上添加一个联系表单, 以便您网站的访问者可以通过简单的方式与您取得联系。 那么我们就可以使用 Form Widget 来完成。

PS:需要说明一下Form Widget只有在Pro版本中才可以使用,如需下载请点击:Elementor Pro 2.5.8 (提取码:6siu) 。

如果觉得东西不错,请支持正版。

首先我们在面板中搜索“Form”,找到Form Widget,并且将它拖拽至页面对应的位置。

 Form Widget  -  Elementor教程-Widget 概述-表单
Form Widget – Elementor教程-Widget 概述-表单

这里我们主要介绍以下几个参数:

  • Form Fields
  • Submit Button
  • Actions After Submit
  • Email
  • Additional Options

Form Widget – Form Fields

Form Fields – Form Widget – Elementor教程-Widget 概述-表单

从上图中可以看到,我们可以对表单进行基本设置。

  • Form name:设置表单名称
  • Add item:设置表单字段
  • Input size:设置输入框大小
  • Label:是否显示字段名称

这里我们需要说明一下,点击字段后,我们可以看到对该字段的编辑:

Form Fields – Form Widget – Elementor教程-Widget 概述-表单

Type包含了已知的类型:Text、Email、Text Area、URL、Tel、Radio 、Select、Checkbox、Acceptance、Number、Date、Time、File Upload、Password、HTML、Hidden、reCAPTCHA、Honeypot

Form Widget – Submit Button

Submit Button - Form Widget  -  Elementor教程-Widget 概述-表单
Submit Button – Form Widget – Elementor教程-Widget 概述-表单
  • Text – 选择“提交”按钮上显示的文本
  • Size – 设置提交按钮的大小
  • Column Width – 设置按钮的宽度
  • Alignment – 设置对齐
  • Icon – 从Font Awesome图标列表中添加图标。

Form Widget – Actions After Submit

Action after submit -  Form Widget  -  Elementor教程-Widget 概述-表单
Action after submit – Form Widget – Elementor教程-Widget 概述-表单

系统内置了最常用的Email、Redirect、Webhook、MailChimp等等动作,该参数的设置是为了指引系统,当用户点击按钮后该触发什么样的动作。

我们以Email为例,来演示:

 Email - Form Widget  -  Elementor教程-Widget 概述-表单
Email – Form Widget – Elementor教程-Widget 概述-表单

当我们在Action after submit中选择了email,我们就可以看到后台会显示email的配置选项,在该选项中可以设置From Email、From Name、Cc等等选项。


至此,详细大家对From Widget有了一定了解,建议大家动手实际去操作一下,感知度会更好一些。

发表评论

电子邮件地址不会被公开。 必填项已用*标注