单击提交重力表单时显示加载动画

Posted 2023-05-09

【中文标题】单击提交重力表单时显示加载动画

【英文标题】：Show a loading animation when click submit gravity form

【发布时间】：2012-09-21 18:39:36

【问题描述】：

我正在使用重力表单将我的潜在客户提交给第三方，问题是当我点击提交时，需要 5 秒才能获得回复并发布潜在客户，而在这种情况下，我想显示加载或搜索动画给用户。

我正在使用重力形式，我不知道在哪里以及如何添加此功能。

有人可以帮我解决这个问题，我不使用Ajax。

【问题讨论】：

当然可以。但首先，What have you tried?

你是通过 gform_post_submission 钩子来做的吗？

问题是我什至不知道从哪里开始我只是有点迷茫，我的一些活动是实时的，因此在我知道在哪里进行更改之前不要或不能冒险....任何方向都会非常有帮助

您只需要为您的表单设置 ajax 提交即可。 [gravityform id="1" title="false" description="false" ajax="true"]。如果要替换默认的 ajax spinner 图片，可以check this solution。

【参考方案1】：

当您在 php 短代码中将 AJAX 设置为 true 时，最新的更新应该有一个默认的加载图像。

当 AJAX 属性为真时，像这里

<?php 
    echo do_shortcode('[gravityform id="1" title="false" description="false" ajax="true"]');
?>

这样做...

为了避免在单击提交按钮时收到重复的潜在客户提交。请记住，重力表单将处理验证。这将为按钮设置样式，更改其中的文本并禁用按钮单击。默认情况下，加载图像将通过 Gravity Forms 显示。

<script type="text/javascript" language="JavaScript">
$(document).ready(function()


    $('#gform_1 input.gform_button').live('click', function()

        submitContactForm( $(this) );

    );

);

    function submitContactForm( _this )

        _this.die('click');
        _this.css('opacity', '0.5');
        _this.val('Sending...');

        _this.attr('disabled', 'disabled');// using this will stop the form from submitting
        $('#gform_1').submit();// this will make sure that it submits

        //console.log('calibrating...');        
    

</script>

在 jquery 中，尝试在“submitContactForm”函数内部覆盖图像 src。

if ( _this.closest('.gform_footer').find('img.gform_ajax_spinner').is(':visible') )
    _this.closest('.gform_footer').find('img.gform_ajax_spinner').attr('src','DIRECTORY OF YOUR CUSTOM SPINNER IMAGE');

这样您就不必记住在更新重力形式插件时随时覆盖该图像。

【讨论】：

这段代码似乎对我有用，但后来我遇到了 Firefox 和 Gravity Forms 的 Stripe 插件的问题。似乎此代码会干扰 Stripe.js 在 Firefox 中被正确识别（在 Mac 和 PC 上测试版本 36 和 48）。其他浏览器运行良好，但 Firefox 用户收到“Stripe.js 无响应”错误。

这是一个好的开始。我遇到了一些替换“live”的技巧，因为它现在已被弃用，但这似乎对我有用。我使用了：$('#gform_wrapper_1').on('click', '.gform_button', function() 并将_this.die('click')（也已弃用）替换为_this.off('click');。谢谢。