为你的 WordPress 主题创建内置的联系表单

本文目录[隐藏]

  • 1创建一个页面模板
  • 2创建表单
  • 3表单数据验证和错误处理
  • 4添加jQuery表单验证功能

有许多WordPress插件都可以为你的博客添加一个联系表单,但是似乎并没有这个必要,因为,在今天的这个教程中,我将向大家介绍一个不用插件就能为你的WordPress主题创建一个内置式联系表单的方法,并为表单加上一个jQuery的验证功能,简单,易用,可靠。

一个内置联系表单形如下图所示,十分简单:

add-contact-form-for-wordpress-theme-wpdaxue_com

创建一个页面模板

将主题中page.php 文件里的代码复制到一个新文件,并将这个新文件命名为contact.php,然后在此文件的开头加上这样的一段注释(你可以从WordPress后台新建一个叫"Contact"的页面):

之后这个contact.php文件看起来应该象这样:

创建表单

现在,我们需要建立一个简单的表单了,只需将下面的代码复制并粘贴到<div class="entry-content">……</div>这对标签之间:

挖鱼源码网注:如果你的页面结构不一样,可以找到

将下面的代码复制并粘贴到它的下面,这样就可以了。

代码看起来十分简单,也不用再作多余解释了。注意一下,上面最后一行inputtype值是”hidden” ,稍后用于检验表单是否已经提交。

表单数据验证和错误处理

到此,这个表单看起来已经很帅了,但还不能使用,因为还没有发送任何邮件,所以我们需要做的就是要验证一下表单提交及其所填内容是否正确。

我们需要作如下判断:如果表单填写正确,则获取管理员邮箱地址并发送内容;如果表单填写有误,则提示错误。将下面的代码粘贴到模板声明和get_header()函数的中间:

我们这样做的目的是为了确保表单已经提交并且填写正确,如果存在错误,如表单留空或者邮件地址不正确等,就会返回错误信息,表单提交发送失败。

现在,我们需要在相关表单区域设置显示错误信息,比如在姓名一栏的下方显示“请输入你的邮箱地址”等,以下是整个表单contact.php模板的代码结构:

添加jQuery表单验证功能

其实我们制作的这个表单到此已经可以正常使用了,但是我们可以在验证功能上进一步加强,添加jQuery用户端验证过程,配合一个插件validate jQuery plugin,此插件很不错,对于表单验证快速准确而且简单,我们可以到这里下载jQuery validate plugin,将插件上传到我们主题的/js目录下,然后再将下面这一段代码粘贴进一个新文件中,保存文件名为 verif.js

现在,我们必须将这个javascript文件跟我们的主题连接起来,打开 header.php文件,将下面的代码粘贴在<head> 和 </head> 这对标签的中间:

这样做之后,保存一下文件,完工!

然后,你只需要发布一个新页面,然后选择 Contact  模板即可。

参考资料:catswhocode

中文整理自:SayBlog.Me

如果本文对你有帮助,请打赏作者,鼓励我们继续写作!

版权免责声明

① 本站VIP源码资源永久免费下载 www.wayu.cn
② 本网站资源来源于网络收集,如有侵权,请联系站长进行删除处理。
③ 分享目的仅供大家学习和交流,请不要用于商业用途,否则后果自负。
④ 如果你有源码需要出售,可以联系小编,或者点击 投稿
⑤ 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解。
⑥ 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需。
⑦ 在您的能力范围内,为了大环境的良性发展,请尽可能的选择正版资源。
⑧ 网站资源不做任何二次加密和授权后门(原版加密除外)

评论0

请先

源码安装后,如有要求加QQ获取帮助的,请放弃使用,小心被骗。

没有账号? 忘记密码?