Wordpress插件:Contact Form 7联系表单插件使用和提交表单跳转重定向高级功能使用方法
最近对一个HTML单页面站点进行Wordpress页面模板转换后,朋友那边提出新的需求,期望可以实现用户在表单点击提交后,可以跳转重定向到指定地址或页面(比如感谢页面),来进行统计网站表单的转化率,还可以在thanks页面可以加入再营销代码,这样还能筛选出用户进行二次营销。
这个Contact Form 7联系表单提交后跳转到另一个地址或页面的方法可以通过添加一个自定义DOM事件来实现
官方给出的解决方案:
自定义DOM事件
wpcf7invalid
- Ajax表单提交成功完成时触发,但由于存在无效输入的字段,因此尚未发送邮件。wpcf7spam
- 成功完成Ajax表单提交时触发,但由于检测到可能的垃圾邮件活动而未发送邮件。wpcf7mailsent
- 成功完成Ajax表单提交并且已发送邮件时触发。wpcf7mailfailed
- Ajax表单提交成功完成时触发,但发送邮件失败。wpcf7submit
- 成功完成Ajax表单提交时触发,无论其他事件如何。
最简单的方法是使用Contact Form 7的自定义DOM事件来运行JavaScript。以下在wpcf7mailsent事件发生时将您重定向到另一个URL的脚本示例:
<script>
document.addEventListener( 'wpcf7mailsent', function( event )
{ location = '/thanks/'; },
false );
</script>
将此代码段嵌入主题的模板文件中或Contact Form 7设置中。需要注意 /thanks/
这个需要重定向跳转的路径一定要设置正确。
此外,我们还可以使用 Redirection for Contact Form 7 重定向插件来实现该功能,插件安装启用后的设置截图如下:
但是,有些时候,你会发现这样设置后,根本不起作用!
而且在提交联系表单时,提交后,我的
Contact Form 7会重定向到一个 URL,后跟一个不熟悉的代码,如 #wpcf7-f123-o1。为什么?
这是因为您的Contact Form 7在非 AJAX 提交模式下工作。
联系人表单在 AJAX 提交模式下不起作用的可能原因是因为DOM事件处理程序函数仅在触发事件时执行。
Contact Form 7 的 DOM 事件 在 AJAX 表单提交过程中被触发。因此,当您的联系表单在非 AJAX 提交模式下工作时,不会触发任何事件。wpcf7mailsent
wpcf7submit
此外,当 JavaScript 代码中存在 bug 时,事件处理程序函数将不起作用。您可以使用内置于 Web 浏览器中的 Web 开发人员工具检测 JavaScript 错误。
那么为什么我的 AJAX 联系表单无法正常工作?
如果您的表单不像此演示表单那样工作,则可能是Contact Form 7的JavaScript在您的网站上无法正常工作。我将向您展示一些可能的原因。
- 未加载 JavaScript 文件这是我最近看到的原因。这是由于您的主题的模板缺少用于排队 JavaScript 的调用函数。所需的函数是
wp_head()
和wp_footer()
,在大多数正确的主题中,它们分别位于header.php
和footer.php
中。 - 与其他 JavaScript 的冲突许多插件和主题都加载了自己的JavaScript。其中一些可能创建不正确,因此与其他插件冲突。在大多数情况下,当发生此类冲突时,您可能能够在浏览器的脚本控制台中找到 JavaScript 错误。
- HTML 结构无效像其他JavaScript一样,Contact Form 7的JavaScript遍历并操纵HTML的结构。因此,如果原始 HTML 结构无效,它将不起作用。您可以使用 HTML 验证程序检查 HTML 是否有效。在这种情况下,我建议使用W3C 标记验证服务。