[Resolved] Submit form with AJAX style loading screen

[Author]

Posts

[Nicholas]

Hello, I would like to style the screen when the toolset form submits with AJAX?
How can I do that?

[Luo Yang]

Hello,

In the toolset form submits with AJAX, when you submit the form, it will display the loading screen with below HTML codes:

<span class="loading-spinner" style="margin-left:5px;">
<img class="cred-form-loading-spinner-image" src="<em><u>hidden link</u></em>">
</span>

So you can use CSS codes to style it, like this:

.loading-spinner{
// here add your cusotm CSS codes to the SPAN tag 
}
.cred-form-loading-spinner-image{
// here add your cusotm CSS codes to the spinner image
}

For your reference.

[Nicholas]

Thanks. But how do I customize the entire loading screen and also change the text of the redirect message when the form is redirecting after Ajax submission.

I have a header and a footer and when the form is redirected the form disappears and header and footer squeeze together. I need to keep a certain height and also change the text and layout

[Luo Yang]

You can style the entire loading screen, like this:

body.wpt-loading{
// here add your custom CSS codes 
}

For the text "Please Wait. You are being redirected...", you can translate it with WPML plugin, if you don't have WPML plugin, you can change it with WordPress built-in filter gettext, for example:

add_filter( 'gettext', 'my_text_func', 20, 3 );
/**
 * @link http://codex.wordpress.org/Plugin_API/Filter_Reference/gettext
 */
function my_text_func( $translated_text, $text, $domain ) {
    if($text == 'Please Wait. You are being redirected...' && $domain = 'wp-cred'){
        $translated_text = "My own text: Please Wait. You are being redirected...";
    }
    return $translated_text;
}

[Nicholas]

thanks, but what I mean is the following.
here's a screenshot

the screen squeezes together because the entire form disappears when redirecting.
so only header and footer is visible.

Do you know what I mean?

I would like to keep the screen height

and .wpt-loading gets only added before the redirect but then disappears so it's useless.

[Nicholas]

Maybe hook into error and success events?
But how?

success: function (response) {
                    if (response) {
                        $form.replaceWith(response.output);

                        if ('ok' === response.result) {
                            alert(credSettings.operation_ok);

                            /**
                             * cred_form_ajax_error
                             * Event that is triggered once cred form ajax call is in success state
                             *
                             * @since 1.9.3
                             */
                            Toolset.hooks.doAction('cred_form_ajax_success', formID);
                        } else {
                            /**
                             * cred_form_ajax_error
                             * Event that is triggered once cred form ajax call is in error state
                             *
                             * @since 1.9.3
                             */
                            Toolset.hooks.doAction('cred_form_ajax_error', formID);
                        }
                    }
                },

[Luo Yang]

For the question: Do you know what I mean?
That means: Toolset form display only the text "Please Wait. You are being redirected..." instead of the form itself when redirecting, so the browser screen height is changed.

And it is very easy to keep the screen height with some CSS codes, for example, you can edit your Toolset form and try these:
1) in section "Content", wrap all codes into a div tag, with CSS class "my-form", like this:

<div class="my-form">[credform class='cred-form cred-keep-original']
...
[/credform]</div>

2) Click "CSS Editor", add below CSS codes:

div.my-form{
min-height: 1000px;
}

And test again:

More help:
hidden link

[Nicholas]

Yes, but do you know how to hook into the CRED form success event?

Minesh once showed me but I can not find the thread anymore.

Thanks

[Luo Yang]

I assume the orin

For the new question:
Yes, but do you know how to hook into the CRED form success event?
I assume we are talking about this ticket:
https://toolset.com/forums/topic/message-handling-class/
If you still need more assistance for it, please create new thread for the new question, that will help other users to find the answers.

[Nicholas]

No, it was a ticket I created some time ago but I cannot find it in my created threads anymore. It was about scrolling to the top of the page when the form was submitted with ajax but had an error (you were stuck at the bottom of the page and couldn't see the error message)
Minish was able to show me how this is done without any hesitation.

And why create a new ticket? I just want to hook into the cred form success event so I can adjust the page height?

Your solution is okay but I need to do more.

Please be so kind so I can kill two birds with one stone 😉

Thank you.

New threads created by Luo Yang and linked to this one are listed below:

https://toolset.com/forums/topic/split-hook-into-the-cred-form-success-event/

[Luo Yang]

Different ticket for different question, that will help other users to find the answers. For the new question:
I just want to hook into the cred form success event so I can adjust the page height

It needs custom JS codes, please check the new ticket here:
https://toolset.com/forums/topic/split-hook-into-the-cred-form-success-event/

[Nicholas]

Thank you Luo.