如何使用Fluent Form来编辑和设置你的表单

myzbx 2024-12-23 12:19 51 浏览

表单是一个外贸网站不可缺少的元素，它于用户而言，是数据的录入和提交的界面；于网站而言，是获取用户信息的途径。

小鲸在这边推荐一款表单插件—Fluent Form。

Fluent Form是一款简单易懂且极易上手的表单编辑插件，我们所要做的只是将它安装到我们的WordPress网站中，然后编辑表单样式，再将该表单代码放入网站页面即可。

这一期，就给大家讲讲如何使用Fluent Form来编辑网站表单。

来到Plugins商城安装并启动“Fluent Form”插件

1 ? 编辑表单

在后台的左侧找到“Fluent Forms”，点击“All Forms”，再点击右侧的“Add a New Form”来编辑表单；

这下面会为你提供几个官方的表单类型，可以根据个人喜好来选择其中一款作为你的表单，也可以选择点击左侧的新建空白表单来通过编辑属于自己的表单；

以空白表单为例，点击创建表单后，我们就会来到一个表单自定义界面。

1、左侧是表单预览

2、右侧的“Input Fields”是可以给表单添加的元素，从基本的姓名到自定义的HTML，可以说能用到的表单元素“Input Fields”里基本都有。

3、左侧下方的“Call To Action” 按钮也可以根据个人喜好在右侧的“Input Customization”中调整位置，内容和大小，“Input Customization”则是对在“Input Fields”中所选元素进行调整。

4、如果你用的是付费版，那还可以在表单中添加询盘的付费第三方渠道。

我们所需要做的，便是点击右侧想要的表单元素，然后根据个人喜好来调整这些表单元素的内容。

当把表单的内容编辑完成后，就可以在左上角编辑表单名称以方便之后对表单进行分类，右上方则可以保存你现在的表单。

2 ? 设置表单

把表单编辑完成保存后，回到“All Forms”，并找到刚刚做好的表单，点击下方的“Settings”对其进行功能设置。

左侧的页面里可以对我们的表单功能进行编辑：

1、“Editor”：可以重新编辑表单内容

2、“Settings & Intergrations”：可以自定义表单功能；

3、“Form Setting”：可以编辑在客户填写完成后会跳转的页面表单，也可以是弹出的感谢话语（这个感谢语也是可以自定义的），以及一些表单标签的详细设置；

4、“Email Notification”：可以用来设置客户发询盘时的邮箱通知。

3 ? 进入设置后：

●“Name”：询盘负责人的名称，可以根据个人意愿填写；

●“Send To”：用来选择询盘通知的邮箱地址的；

●“Subject”：询盘模板的名字，可自定义；

●“Email Body”：发给你的询盘的内容，这里是由代码所编写，因此我们能修改的地方就是小鲸所给出的红色区域内。

剩下的三个设置一般用不到，因为这是需要程序员以及会员才能使用的功能，不过对我们的表单设置影响不大。

当你的表单编辑和设置完成，点击旁边的那串代码便可以直接将之复制，

然后来到你的页面，将这串代码复制到文章类别模板的“Text”里，点击保存，这样你的表单就可以在网页中出现了。

如果想要你的表单具有一定的动画效果，就需要去寻找专业的程序员来对网页代码进行修改了。

表单是外贸网站不可缺少的因素

表单插件对于表单而言也是极为重要的

一个好的表单插件

可以让你拥有一个好的外贸网站

Fluent Form是个不错的选择！

以上就是今天的分享！

HTML 表单元素

上一篇：表单元素之选择类型表单元素选择器有哪些
下一篇：前端入门——css伪类和伪元素 css3伪类和伪元素

如何使用Fluent Form来编辑和设置你的表单

相关推荐

使用VSCode模板提高Vue开发效率（vscode开发vue3）

吃透 Vue 项目开发实践|16个方面深入前端工程化开发技巧【下】

说下你的vue项目的目录结构，该怎么划分?

8.7k star，一款超炫酷的动态可视化大屏项目

移动前端重构实战系列:5-7章（前端移动端主要技术有哪些）

这么牛逼的cursor功能，赶紧用起来

用上Vue3，你真的变了吗?（vue3 key）

browser-use:AI 驱动的浏览器自动化神器——DOM识别与交互详解

巧克力:从一朵花开始的华丽变身_巧克力花束教程视频

comfyui安装MimicMotion扩展，AI跳舞动作模仿