0

0

使用WordPress的拖放表单构建器

PHPz

PHPz

发布时间:2023-09-04 09:01:06

|

1882人浏览过

|

来源于php中文网

原创

表单一直是互联网不可或缺的一部分。作为 wordpress 网站所有者,如果您希望用户与您交流,您别无选择,只能使用它们。然而,创建遵循最佳实践并符合网站外观的现代表单可能是一项艰巨的任务,尤其是在您不擅长编写代码的情况下。

幸运的是,现在 CodeCanyon 上提供了几个功能强大的 WordPress 表单生成器,提供直观的所见即所得界面和拖放支持。由 CodeCanyon 精英作者 nCrafts 开发的 FormCraft 就是这样一种表单生成器。

FormCraft 是一款符合 GDPR 标准的高级 WordPress 插件,您可以使用它在几分钟内为您的网站创建漂亮的表单。它内置了大量高级功能,包括对 AJAX 请求、触发器、弹出消息甚至条件逻辑的支持。通过附加组件,它提供了额外的功能,例如与 MailChimp 和 reCAPTCHA 的集成。

在本教程中,我将向您展示如何安装该插件并使用其一些最重要的功能。

1. 安装 FormCraft

登录您的 Envato 帐户并前往 CodeCanyon,以便您可以购买使用 FormCraft 的许可证。它的销量超过 16,000 件,是那里最受欢迎的商品之一。

使用WordPress的拖放表单构建器

成功购买后,您将可以访问可用于安装插件的 ZIP 文件。

登录 WordPress 实例的管理面板并导航至插件 > 添加新插件。然后按上传插件按钮。在下一个屏幕上,首先按浏览...按钮选择 ZIP 文件,然后按立即安装按钮开始安装。

使用WordPress的拖放表单构建器

请注意,插件的大小为 2.3MB。如果您的 WordPress 实例抱怨插件的大小超出了上传文件允许的最大大小,则您必须增加 php.ini中的 upload_max_filesize 变量的值> 文件。

安装插件后,按激活插件按钮开始使用它。

2.使用模板创建表单

您的 WordPress 管理面板现在应该有一个名为 FormCraft 的新部分。打开它并按新建表单按钮,以便您可以开始创建第一个表单。

使用WordPress的拖放表单构建器

在弹出的对话框中,选择模板选项。由于 FormCraft 附带了近十几个针对常见表单类型精心设计的模板,因此使用模板是创建表单最简单、最快捷的方法。

现在,让我们创建一个联系表单。因此,选择任何联系模板,为表单命名,然后按创建表单按钮。我将使用联系人 (2) 模板。

使用WordPress的拖放表单构建器

表单准备好后,您将自动重定向到可以编辑表单的界面。

使用 FormCraft 编辑表单非常简单。通常,您所要做的就是单击要更改的表单字段并更新其属性。例如,如果您想更改名称字段的标签,请点击它,然后在弹出的对话框中更新标签属性的值。

使用WordPress的拖放表单构建器

要关闭对话框,请单击对话框外部的任意位置。

最后,当您对所有更改感到满意时,可以按保存按钮将其永久化。

3.显示表单

您可以采用两种不同的方法来显示使用 FormCraft 创建的表单。第一种方法涉及使用专用的表单页面,该页面有自己唯一的 URL,除了表单之外不显示任何内容。这种方法只需最少的努力,并且还可以让您轻松共享表单。

默认情况下,FormCraft 会自动为每个表单创建专用的表单页面。要确定您在上一步中创建的表单的网址,请点击设置按钮并切换到常规标签。

使用WordPress的拖放表单构建器

第二种方法是将表单嵌入帖子或页面中。这种方法更加灵活,因为它允许您随表单一起显示附加文本或图像。

要嵌入 FormCraft 表单,您需要其简码。要了解它是什么,请转至设置 > 嵌入 > 简码

使用WordPress的拖放表单构建器

您使用 FormCraft 创建的每个表单都将有其独特且易于记忆的短代码。

此时,您可以创建一个新帖子并输入短代码以嵌入表单。以下是包含 FormCraft 表单的示例帖子:

使用WordPress的拖放表单构建器

4.处理表单提交

用户填写完您的表单后,他或她当然会提交该表单。您可以通过两种不同的方式接收填写的表格。第一种方法是从 WordPress 服务器接收电子邮件。它不需要编程,非常适合处理少量表单提交。

Natural Language Playlist
Natural Language Playlist

探索语言和音乐之间丰富而复杂的关系,并使用 Transformer 语言模型构建播放列表。

下载

要以电子邮件形式接收提交的表单,请转至设置 > 电子邮件 > 电子邮件设置

FormCraft 可以使用默认 WordPress 邮件设置或使用自定义 SMTP 配置发送电子邮件。通常,默认设置就足够了。因此,请切换到 WP Mail 标签,然后根据您的偏好填写发件人姓名发件人电子邮件字段。您可能已经猜到,您在此处提供的电子邮件地址将是您接收所有表单提交的电子邮件地址。

使用WordPress的拖放表单构建器

接下来,展开电子邮件通知部分。在这里,您必须提供所有填写的表格必须发送到的电子邮件地址。请随意使用您之前输入的同一电子邮件地址。

保留其余配置不变,然后按保存按钮。

您的第一个表单提交处理程序已准备就绪。从现在起,每当用户提交您的表单时,您都会收到一封电子邮件。

但是,如果您认为自己将收到数千份表单提交,那么采用更具编程性的方法会更好。 FormCraft 可以将提交的表单数据发送到您指定的任何自定义 URL。如果您想采用此方法,请转到设置 > 常规并输入您的自定义网址。此外,如果您希望接收 JSON 文档形式的提交表单,请启用 POST (JSON) 选项。

使用WordPress的拖放表单构建器

使用什么逻辑来处理自定义 URL 上的表单提交取决于您。以下示例代码向您展示如何将每个提交保存为服务器文件系统上具有唯一名称的文件:

<?php
$file_name = 'wp-content/submissions/' . md5(uniqid(rand(), true));
file_put_contents($file_name, file_get_contents('php://input'));

使用上面的代码,每个表单提交都将保存在一个文件中,其内容如下所示:

{
    "": "1",
    "Describe the Issue": "This is awesome!",
    "Email": "alice@example.com",
    "Entry ID": 4,
    "Full Name": "Alice K.",
    "Reason for Contact": "Feedback",
    "Text Field": ""
}

5. 创建自定义表单

如果您认为没有一个内置模板符合您的要求,您可以继续从头开始创建一个新表单。为了举一个实际的例子,我们现在创建一个允许用户提交电影评论的表单。

首先转到 FormCraft 仪表板并再次按新建表单按钮。

这一次,选择空白选项,为表单命名,然后按创建表单按钮。

您现在将看到一个没有表单字段的空白画布。默认情况下,其宽度设置为 420 px 。如果您不希望它具有固定宽度,您可以随意将其更改为百分比值。

接下来,按添加字段按钮添加您的第一个表单字段。

使用WordPress的拖放表单构建器

如您所见,FormCraft 提供了超过 15 种不同类型的表单字段供您选择。

要向表单添加标题,请点击标题字段。添加标题后,单击它可以修改其属性。

在弹出的对话框中,您可以更改字段显示的文本、调整其填充、更改其字体,甚至为其指定背景颜色。

接下来,要接受电影名称,请点击添加字段按钮并选择单行输入选项。

单击新添加的字段以打开其属性对话框。在这里,为该字段提供适当的标签和子标签。如果需要,您可以点击图标属性以在字段旁边显示一个图标。

为确保您的用户不会将该字段留空,请检查必填字段属性。此外,由于电影名称可以包含空格,因此请选中允许空格字段。

使用最小字符数最大字符数属性,您还可以控制用户输入文本的长度。

使用WordPress的拖放表单构建器

单击属性对话框外部的任意位置将其关闭。然后选择添加字段 > 调查 > 星级。顾名思义,此字段将允许您的用户为电影评分。

使用WordPress的拖放表单构建器

同样,要允许用户输入他们对电影的看法,请添加一个文本区域表格。

最后,选择添加字段 > 提交以向表单添加提交按钮。如果您希望按钮变宽,请选中宽按钮选项。

此时,您的自定义表单已准备就绪。点击保存按钮进行保存。

要查看它,您可以直接访问其专用表单页面,您可以通过设置 > 常规来确定其 URL。

表单如下所示:

使用WordPress的拖放表单构建器

结论

在本教程中,您学习了如何使用 FormCraft WordPress 插件为您的 WordPress 网站创建基于模板的表单和自定义表单。只需发挥一点创造力,您现在就可以快速创建表单来执行基本任务,例如收集电子邮件地址、进行调查或测验以及接受预订。

FormCraft 附带其作者六个月的免费支持。如果您在使用时遇到任何问题,请使用 CodeCanyon 上的评论页面来获取帮助。

如果您想了解有关表单插件的更多信息,请查看 Envato Tuts+ 上有关 WordPress 表单插件的其他一些帖子。

相关文章

WPS零基础入门到精通全套教程!
WPS零基础入门到精通全套教程!

全网最新最细最实用WPS零基础入门到精通全套教程!带你真正掌握WPS办公! 内含Excel基础操作、函数设计、数据透视表等

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

455

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

546

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

334

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

82

2025.09.10

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

166

2023.06.14

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

170

2023.08.31

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

124

2023.11.15

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

257

2024.09.24

C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

3

2026.03.11

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
第二十三期_前端开发
第二十三期_前端开发

共98课时 | 8.3万人学习

WordPress视频教程
WordPress视频教程

共23课时 | 9.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号