Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >阻止Contact Form 7刷新表单域

阻止Contact Form 7刷新表单域
EN

Stack Overflow用户
提问于 2021-04-14 09:04:02
回答 1查看 346关注 0票数 0

我有一个关于CF7的问题,在提交时,在我重定向发生之前,我的表单会刷新...这给用户创造了一种感觉,即没有发生任何事情,并且可能会导致用户反弹。重定向确实有效,大约需要3-4秒,这是很好的,但表单的即时刷新可能会让用户感到困惑。有没有办法防止表单刷新?

下面是我们的页面,上面有供参考的CF7表单:https://coversearch.co.za/test-car-insurance-homepage/

EN

回答 1

Stack Overflow用户

发布于 2021-04-16 09:01:03

不,这是不可能的,一旦表单提交成功事件被触发,CF7 js脚本就会使用JavaScript HTMLFormElement reset()方法来清除字段。

但是,有一种方法可以在使用输入字段的defaultValue property重置字段后重新填充字段的值。这是我在我的一个插件上使用的一个技巧,用来在cf7表单上启用“保存草稿”按钮(允许用户提交和保存部分提交的表单),从而显示提交后填写的字段的值。您需要在显示表单的页面上将此脚本排入队列,

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
(function( $ ) {
    'use strict';

    $(document).ready(function(){
      
      $('form.wpcf7-form input[type=submit].wpcf7-submit').on('click', function(event){
        let $form = $(this).closest('form.wpcf7-form');
        
        
        $(':input',$form).each(function(){
            let $this = $(this);
            switch(true){
              case $this.is(':checked'):
                $this.prop("defaultChecked", true);
                break;
              case $this.is('select'):
                let values = $this.val();
                if(!$.isArray(values)) values = [values];
                $('option', $this).each(function(){
                  let $option = $(this);
                  $option[0].defaultSelected= false;
                  if(values.indexOf($option.val()) >= 0){
                    $option[0].defaultSelected=true;
                  }
                });
                break;
              default:
                $this.prop("defaultValue", $this.val());
                break;
            }
        }); //input each

      }); //submit click
      
    });//document ready

})( jQuery );
票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/67088693

复制
相关文章
Contact Form 7插件添加表单教程
作为一个网站所有者,你绝对应该学习如何添加一个联系表单到WordPress。你的网站不是一个匿名实体。大多数人都想知道,偶尔也会和他们所读内容背后的人互动。你认为为什么会有作者简介和博客评论?今天外贸
Hoan外贸建站
2020/12/03
1.8K0
Contact Form 7:最强大的 WordPress 联系表单插件
帮人做 WordPress 项目的时候,经常需要帮客户设置联系表单,一般我们都会推荐客户使用 Contact Form 7 这个 WordPress 插件。
Denis
2023/04/14
9150
Contact Form 7:最强大的 WordPress 联系表单插件
【HTML】HTML 表单 ⑤ ( form 表单域 )
从 input 表单 , textarea 文本域 , select 下拉菜单 中收集了用户信息 , 需要通过
韩曙亮
2023/03/30
4K0
【HTML】HTML 表单 ⑤ ( form 表单域 )
js – form表单提交不刷新
大家已经发现了, 当我们点击submit提交form表单的时候, 他会刷新一次, 如果不想它刷新的话有下面两种方法:
全栈程序员站长
2022/08/01
14.6K0
form表单无刷新提交文件(iframe)
先看一段代码(PHP例子) 1、表单代码(form.html): <iframe name="testIframeName" style="display:none;"></iframe> <form target="testIframeName" method="post" action="formAction.php"> <input type="text" name="username"/> <input type="password" name="password"/> <input
deepcc
2018/05/16
3K0
屏蔽垃圾留言-Contact form 7和Elementor表单插件添加google验证方法
当wordpress网站添加了contact form 7或者其他联系表单的时候,经常会收到一些垃圾或者恶意留言评论,严重影响正常使用。
蓝鲨网络建站技术
2021/03/11
2.4K0
屏蔽垃圾留言-Contact form 7和Elementor表单插件添加google验证方法
WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式
首先  Contact form 7 插件是一款免费的WordPress表单插件,用于给访客填写表单、收集信息功能。利用配合MailChimp(国外邮件营销工具)亦可实现邮件订阅功能, 由于Contact Form7插件的强大,也可以实现自动给用户发送邮件(可包含文件附件),配合Contact Form CFDB7插件可记录用户表单填写信息(Contact form 7插件默认是不会保存这些内容的,它只会发送邮件发给你 );配合Redirection for Contact Form 7 插件也实现用户提交表单后跳转至自定义url。可用于记录跳转参数便于运营数据参考,这款插件还可以将用户填写的信息传递到url,以实现简单的跨页面传参呈现用户信息。
AlexTao
2020/07/14
3.2K0
WordPress表单插件 Contact form 7介绍及拓展高级功能实现和部分表单框架样式
WordPress 技巧:只在含有联系表单的页面加载 Contact Form 7 的 JS 和 CSS
Contact Form 7 是一个非常强大并且易用的联系表单的插件,我在很多项目中都用到它,但是这个插件有个很不好的地方,会在整个博客的所有前台页面都加载 Contact Form 7 的 JavaScript 和 CSS 代码,对于性能要求极致的我们,当然不允许这样的事情发生,所以我们可以通过下面的代码实现只在含有 Contact Form 7 表单的页面加载 Contact Form 7 的 JS 和 CSS 代码。
Denis
2023/04/15
1.5K0
contact form 7如何搭配Akismet过滤垃圾邮件
  contact form 7有很多站长在用,但是经常会有一些垃圾邮件进来,如何过滤呢?两个方法:1、表单提交启用验证码功能,很多垃圾邮件是用软件扫相应的端口,然后批量群发,如果用验证码了可以过滤很大一部分垃圾邮件。2、搭配Akismet一起来拦截。Akismet是很强大的垃圾邮件过滤器,大多数wordpress站长都会用。那么,contact form 7如何搭配Akismet过滤垃圾邮件呢?随ytkah一起来看看吧
ytkah
2019/09/25
1.1K0
contact form 7如何搭配Akismet过滤垃圾邮件
Form 表单
1、form表单有什么作用?有哪些常用的input 标签,分别有什么作用? <form> 标签用于为用户输入创建 HTML 表单、向服务器传输数据。 <!--`<input type="button">`: 定义可点击的按钮,但没有任何行为,不会提交表单中的数据。button 类型常用于在用户点击按钮时启动 JavaScript 程序。,不会提交!!!--> <input type="button" value="Click me" onclick="msg()" /> <!--`<input ty
小胖
2018/06/27
2.1K0
form表单
form 表单 form表单就是填写的单子:比如登录窗口、编辑资料等 一般用于数据提交到到后端,然后保存 一、form表单的语法 <formaction="/save.do"method="POST"enctype="multipart/form-data"> </form> <form> 表单非常重要,一般用于数据提交到到后端,然后将数据保存到服务器端 属性 action,表示我们要提交的网址 属性 method,表示我们提交数据的方式,通常有 get 和 post 两种 GET 提交会将数据通过 &
鹤川
2023/03/21
1.4K0
点击form 表单中的button导致页面刷新问题
做点击按钮切换背景样式与内容的时候每次都刷新页面 ,发现button写在了form 标签当中
tianyawhl
2019/04/04
2.5K0
js form表单提交(jsp form表单提交方式)
最近工作比较忙,着急上线,写个简单的东西吧 url为你要提交的地址 params 为你提交的参数
全栈程序员站长
2022/07/30
14.8K0
ElementUI Form 表单
Form 表单由输入框、选择器、单选框、多选框等控件组成,用以收集、校验、提交数据
py3study
2021/01/06
2.6K0
ElementUI Form 表单
Django form表单
Form介绍   之前在HTML页面中利用form表单向后端提交数据时,都会写一些获取用户输入的标签并且用form标签把它们包起来。与此同时我们在好多场景下都需要对用户的输入做校验,比如校验用户是否输入,输入的长度和格式等正不正确,如果用户输入的内容有错误就需要在页面上相应的位置显示对应的错误消息。   Django form组建就实现了上面所述的功能。   总结一下,其实form组件的主要功能如下: 生成页面可用的HTML标签 对用户提交的数据进行校验 保留上次输入内容 普通的登录 views.py de
新人小试
2018/04/12
3.6K0
lnmp 环境 contact form 7 不能发送邮件的解决办法
朋友做网站安装了 contact form 7 来接收客户询盘,但是反复测试都无法收到邮件。经过思考,魏艾斯博客认为是 lnmp 环境中 vps 的 mail 函数不能正常发送邮件导致的。解决办法是重
魏艾斯博客www.vpsss.net
2018/06/01
1K2
Django form表单
form表单的作用:   1.生成HTML代码   2.验证   3.把验证的错误显示在页面上并保留原始数据 form表单的基本使用: form_obj生成HTML代码的方式   1.form_obj.as_p   2.自己挨个字段取   3.{% for field in form_obj %}   {{field.label}}   {{field}}   {% endfor %}
py3study
2020/01/19
4.3K0
Django form表单
html form表单
表单用于搜集不同类型的用户输入,表单由不同类型的标签组成,相关标签及属性用法如下:
Devops海洋的渔夫
2019/05/31
2.9K0
Contact Form 7插件中的不受限制文件上传漏洞
众所周知,Contact Form 7是一款非常受欢迎的WordPress插件。但是根据安全研究专家的最新发现,Contact Form 7中存在一个不受限制的文件上传漏洞。这个漏洞被标记为了高危漏洞,目前存在漏洞的Contact Form 7插件已经安装在了500多万个网站上,使得这些网站将成为攻击者严重的“香饽饽”。在该漏洞的帮助下,攻击者将能够对目标站点执行网络钓鱼、网站接管、数据窃取和Credit卡欺诈等攻击活动。
FB客服
2021/02/08
3.1K0
Django-form表单
构建一个表单 假设你想在你的网站上创建一个简单的表单,以获得用户的名字。你需要类似这样的模板: ? 1 2 3 4 5 <form action="/your-name/" method="post"
用户1214487
2018/01/24
4K0

相似问题

Contact Form 7 404 [contact-form-7 404“未找到”]

10

表单上未显示Contact Form 7 reCAPTCHA

60

Contact Form 7提交,不刷新页面

110

contact form 7 wordpress中的表单操作

15

在contact form 7表单标记中添加div

22
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文