Adding loading animation to submit button

Hi @elbradey

I hope you are doing well.

Sorry to hear you are having this slow submission, we are working on a feature that allows adding conditional to sections so instead of multiple conditionals you will be able to apply to that specific section and it will speed up the submissions too.

Unfortunately only a CSS solution is not possible, Forminator does have a BeforeSend event https://api.jquery.com/jquery.ajax/ and it allows us to add some action for example insert a class or trigger an event, you can test something like:

<?php

add_action( 'wp_footer', function(){ ?>
<script>
	(function ($) {
		$(function () {
			$(document).on("before:forminator:form:submit", function (e, draftData) {
                alert('submitting');
                $("<div>Submitting</div>").insertBefore(".forminator-button-submit");
			});
		});
	})(window.jQuery);
</script>
<?php }, 21); ?>

As a mu-plugin https://wpmudev.com/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins but it also depends on the time that the Ajax request reaches this beforeSend moment.

Let us know if this helps you.
Best Regards
Patrick Freitas

Hi @elbradey

I hope you are doing well.

You can use the jQuery Click:

jQuery( ".forminator-button-submit").click(function() {
  alert( "Handler for .click() called." );
});

https://api.jquery.com/click/

<?php

add_action( 'wp_footer', function(){ ?>
<script>
	(function ($) {
		$(function () {
			$(document).on("after.load.forminator", function (e, id) {

                // Ajax forms
                $( ".forminator-button-submit").click(function(){
                    $("<div>Submitting</div>").insertBefore(".forminator-button-submit");
                });

			});

            // Non Ajax Form
            $( ".forminator-button-submit").click(function(){
                $("<div>Submitting</div>").insertBefore(".forminator-button-submit");
            });

		});
	})(window.jQuery);
</script>
<?php }, 21); ?>

This is only an example of code, you would need to extend it to add a Div or any CSS using JS.

Best Regards
Patrick Freitas