Support » Plugin: Forminator - Contact Form, Payment Form & Custom Form Builder » Form loads in 2 phases (flashing)

  • Resolved alainmelsens

    (@alainmelsens)


    Hello,
    I started using Forminator with Elementor, and I have noticed that when loading a Forminator form, a kind of field is first shown for a fraction of a second. This also happens when reloading or refreshing the page containing the form. After that the actual form loads again.
    The entire page is first emptied, as it were, then an empty field quickly appears and is then filled with the form again.

    See the different screencaptures that I took when loading a Formniator form.
    First when the form is already loaded:
    https://prnt.sc/26qjn05
    Then when refreshing the form:
    https://prnt.sc/26qjoni and also https://prnt.sc/26qjpz9

    This does not happen with other form plugins.
    I use the standard WordPress Forminator widget to place the form in Elementor. But I have the same problem when I place the Forminator form in Elementor using the Forminator shortcode.
    I can hardly work without Elementor because the rest of the website is also built with Elementor. I have already loaded the form with and without Ajax in the settings but this does not solve the problem.
    This is a rather annoying effect and does not look very professional.
    I don’t think that I’m the only one with that kind of issue?
    Thanks in advance for any suggestion.
    Kind Regards.

    • This topic was modified 4 months, 3 weeks ago by alainmelsens.
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter alainmelsens

    (@alainmelsens)

    Hi,
    I found a similar question here in this support forum. Your answer was to use the following code:

    <?php
    
    add_filter( 'forminator_render_form_markup', function( $html ){
    
        ob_start();
        ?>
        <style>
           .forminator-ui{
       display:block!important;
    }
        </style>
        <?php
    
    	return $html . ob_get_clean();
    
    } );

    I have set this up and indeed, with this, when loading or reloading (refreshing) the page, the form is not completely removed and not completely reloaded, but at the top there is still a flicker visible with underneath still that empty field or bar.
    It is better but not completely solved.
    Are there any suggestions as to how to solve it completely?
    Thanks in advance.

    Plugin Support Pawel – WPMU DEV Support

    (@wpmudev-support9)

    Hello @alainmelsens !

    I’m very sorry to hear that you’ve experienced this issue!

    To assist you further we’d have to check the actual page with this form – would you be able to share a link to it so we can take a closer look at what’s left to fix?

    You can also set up a separate test page or site, as long as the issue is occurring there as well and share the link to it here.

    If you’d like to avoid sharing the links publicly, please feel free to use our contact form instead:

    https://wpmudev.com/contact/#i-have-a-different-question

    Please use the template below:

    Subject: “Attn: Pawel”

    Message template:

    – Link to the form
    – Link back to this thread for reference (ex. https://wordpress.org/support/topic/ticket-title/)
    – Any other relevant URLs/info

    To ensure we don’t miss this please let us know here once you’ve submitted the form.

    Kind regards,
    Pawel

    Thread Starter alainmelsens

    (@alainmelsens)

    Hello,
    I have indeed used that separate “Contact WPMU DEV” template contact form.
    Thanks in advance for wanting to investigate this problem further and inform me about it.
    I appreciate it very much.
    Kind Regards,
    Alain

    Thread Starter alainmelsens

    (@alainmelsens)

    Hello,
    I have now discovered a very interesting alternative solution myself without any annoying side effects. 😊

    I opened the pages containing the Forminator Form in Elementor.
    Then I selected the Section containing the Forminator Widget and then clicked on the properties of “Edit Section” on “Advanced”.
    Next, under “Motion Effects”, I chose next “Entrance Animation” for “Fade In”. In doing so, I then chose “Fast” at “Animation Duration” and finally entered 0 ms at “Animation Delay (ms)”.
    Finally I saved the page.
    Now when the page is loaded or refreshed the form is loaded fairly quickly but totally without any disturbing or annoying effects.
    No jerky build-ups and no bar effects or other things anymore. 😉

    I did keep that separate CSS code in PHP that I found before, this is needed. See here earlier.

    As far as I’m concerned, that’s the best solution so far.
    Kind regrads,

Viewing 4 replies - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.