"Loading" step / Auto advance

Home Forums Quform WordPress "Loading" step / Auto advance

This topic is: not resolved

This topic contains 5 replies, has 2 voices, and was last updated by  Ally 2 days, 22 hours ago.

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #30053

    adg_domme
    Participant

    Hey there,

    is there a possibility to have a step of the form advancing automatically to the next step after a certain amount of time?

    Example: User enters his/her data and clicks on the “next” button. The next step just consists of a loading animation (CSS/JS/GIF) and some info text. After some seconds, the form automatically advances to the next step.

    Thanks in advance for your help.

    #30060

    adg_domme
    Participant

    I digged a bit deeper. Actually, I’m trying to execute some JavaScript only on a certain page/step of the form, so it automatically advances to the next step after 5 seconds.

    <script>
      setTimeout(function() {
        $('.quform-form-1').data('quform').goToPage(40);
      }, 5000);
    </script>

    I added that code to the according step of the form via a HTML element. However, if I open the form (running in a popup), the code gets executed immediately and not when on the page/step that contains the code.

    #30061

    adg_domme
    Participant

    I added a pre validate filter to my functions.php, like this:

    add_filter('quform_pre_validate_1', function (array $result, Quform_Form $form) {
        if (($nextPageId = $form->getNextPageId()) == 40) {
    		echo '<script>setTimeout(function() { $(\'.quform-form-1\').data(\'quform\').goToPage(40); }, 5000);</script>';
    	}
        return $result;
    }, 10, 2);

    It should check what the current page ID is. If a certain page ID is met, it should automatically advance to the next page (with certain ID). However, nothing happens. 🙁

    • This reply was modified 1 week, 3 days ago by  adg_domme.
    • This reply was modified 1 week, 3 days ago by  adg_domme.
    #30064

    adg_domme
    Participant

    [didn’t make sense wat I tried here]

    • This reply was modified 1 week, 3 days ago by  adg_domme.
    • This reply was modified 1 week, 3 days ago by  adg_domme.
    • This reply was modified 1 week, 3 days ago by  adg_domme.
    #30068

    adg_domme
    Participant

    I noticed your support may be off for a couple of days, so I helped myself out with this custom JS in the general quform settings:

    jQuery(document).ready(function ($) {
    
        $('.quform-button-next-1_38 button').click(function() {
            setTimeout(function () {
                if ( $('.quform-page-115').hasClass('quform-current-page') ) {
                    $('.quform-form-1').data('quform').goToPage(40);
                }
            }, 5000);
        });
    
        $('.quform-button-back-1_42 button').click(function() {
            setTimeout(function () {
                $('.quform-form-1').data('quform').goToPage(36);
            }, 1000);
        });
    
    });

    Follow up question: Is it possible to override the original back button functionality? I had to add a delay of 1s to my custom back button click event (going to a certain step of the form) so it won’t interfere with the original functionality (going back one step). This results in the form going back one step (visible) and then performing my custom event. return false; and X.preventDefault(); etc. didn’t help.

    • This reply was modified 1 week, 3 days ago by  adg_domme.
    #30080

    Ally
    Support Staff

    You don't have permission to view this content. Please log in or register and then verify your purchases to gain access.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

Be inspired. © 2019 ThemeCatcher Ltd. 20-22 Wenlock Road, London, England, N1 7GU | Company No. 08120384 | Built with React | Privacy Policy