您现在的位置是:首页 > 网站制作 > WordpressWordpress

Contact Form 7询盘如何实现非插件thanks页面跳转

杰帅2023-06-14【Wordpress】人已围观

简介要在Contact Form 7中实现非插件的感谢页面跳转,你可以按照以下步骤进行操作

要在Contact Form 7中实现非插件的感谢页面跳转,你可以按照以下步骤进行操作:
方法一:
1. 创建感谢页面:首先,在你的WordPress网站上创建一个自定义的感谢页面。这将是提交表单后用户将被重定向到的页面。

2. 确定表单ID:在Contact Form 7中,每个表单都有一个唯一的ID。要找到表单的ID,请进入WordPress的“联系表单”部分,然后鼠标悬停在你想要设置跳转的表单上。在鼠标悬停时,你将看到一个类似于`[contact-form-7 id="1234" title="Form Title"]`的短代码。在这个短代码中,`1234`就是表单的ID。

3. 编辑感谢页面的代码:在创建的感谢页面中,你需要编辑页面的代码以添加跳转功能。你可以使用JavaScript或HTML的元标记进行跳转。以下是使用JavaScript进行跳转的示例代码:

   ```html
   <script>
   setTimeout(function(){
     window.location.href = "https://your-redirect-url.com"; // 将此URL替换为你要跳转的目标URL
   }, 3000); // 3000表示3秒后跳转,你可以根据需要进行调整
   </script>
   ```

   在这个示例代码中,我使用`setTimeout`函数来设置一个3秒的延迟,然后使用`window.location.href`将页面重定向到指定的URL。你需要将`https://your-redirect-url.com`替换为你想要跳转的实际URL。

4. 更新Contact Form 7配置:现在,你需要在Contact Form 7配置中更新表单设置,以指定跳转到感谢页面。在WordPress的“联系表单”部分,找到并点击表单的“编辑”链接。在表单编辑器中,切换到“附加设置”选项卡。在“附加设置”中,找到并添加以下代码:

   ```html
   on_sent_ok: "location = 'https://your-thank-you-page-url.com';"
   ```

   将`https://your-thank-you-page-url.com`替换为你创建的感谢页面的实际URL。

5. 保存并更新表单:保存并更新Contact Form 7表单设置。现在,当用户提交表单时,它们将被重定向到你指定的感谢页面。

请注意,这种方法不需要安装额外的插件,但需要对WordPress主题或模板进行编辑。确保在进行任何更改之前备份你的网站,并在编辑代码时小心操作。

方法二(自己实战过)

JS代码(3670是id号)

<script>
var abc = document.querySelector( '#wpcf7-f3670-o1' );
abc.addEventListener( 'wpcf7mailsent', function( event ) {
location = 'https://www.***.com/thanks/';
}, false );
</script>
附图:

 

Tags:Contact Form 7   询盘跳转

很赞哦! ()

文章评论

本站推荐

站点信息

  • 建站时间:2018-10-24
  • 网站程序:帝国CMS7.5
  • 主题模板《今夕何夕》
  • 文章统计1179篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们