Show a loading animation when click submit gravity form

9 Views

I am using gravity form to submit my lead to a third party the problem is when I click on submit it takes 5 seconds to get a reply and post the lead, while that is happening I want to show a loading or searching animation to the user.

I am using gravity form and I have no Idea where and how to add this function.

Read More

Can somebody please help me to get this resolved, I am not using ajax.

Post Views: 9

Related posts

Leave a Reply

1 comment

  1. The most recent update should have a default loading image, when you have AJAX as true in the PHP shortcode.

    When AJAX attribute is true like here

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

    Do this…

    To keep from getting duplicate lead submission when the submit button is clicked. Keep in mind that the Gravity Form will handle the validation. This will style the button, change the text inside of it and disable the buttons click. The loading image will show by default via 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>

    In jquery try this to override the image src when it’s visible, inside of the “submitContactForm” function.

    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');
}

    So that you won’t have to remember to override that image anytime that you update the Gravity Form plugin.