Support » Plugin: Forminator - Contact Form, Payment Form & Custom Form Builder » Only Small Screen Display in Divi Overlay

  • Resolved Candlelite

    (@candlelite)


    I have created a contact form as a page in webfit.me.uk (nav button without speech bubble) and the form performs as expected – i.e. it adjusts for small screens. However I thought it would be better to have the form contained in a Divi Overlay (produced by https://divilife.com/downloads/divi-overlays/) which is a very popular plugin for the Divi template.
    If you click on the nav button with speech bubble you will see that the form is always displayed as for a small screen even when displayed on a large PC monitor. I have raised this problem with Divi Life, however, the problem may possibly be with your plugin rather than the Divi Life Overlays plugin. You may want to have a conversation with them as there is an incompatibility problem somewhere.
    Regards

    The page I need help with: [log in to see the link]

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @candlelite,

    Maybe I’m missing something here, this is what I notice in a Monitor:

    https://i.imgur.com/bQthfLa.png

    The highlighted form does seem to fit inside the “et_pb_code_inner” which is the maximum width of the Divi section. So it does seem to display without any issue in accordance with Divi.

    Am I checking the correct page? Please do advise if I’m missing anything. Looking forward to your response.

    Kind Regards,
    Nithin

    Thread Starter Candlelite

    (@candlelite)

    Yes you are missing the point. As you have done – if you compare the Contact page display of the form by clicking on the link I have provided (this is the same as the Contact navbar button – NO speech bubble) you get the screen you have sent me. However, if you click on the Contact navbar button WITH the speech bubble the same form is displayed in the Divi Overlays plugin pop up (i.e. not a page as such). You will notice the fields (First Name, Last Name etc) are displayed as for a small screen device (such as a phone) when in fact there is plenty of room to display the form exactly as shown when viewing the Contact page.
    I hope this makes more sense? Basically compare on the same size screen the display when clicking the navbar Contact with AND without the speech bubble and you will see the problem.

    Plugin Support Patrick – WPMU DEV Support

    (@wpmudevsupport12)

    Hi @candlelite

    I hope you are doing well.

    This is related to the container size, the Forminator is applying the mobile classes.

    https://monosnap.com/file/4bfZqYfIEfOvgt7QxIrRgw1jEBQ9uK

    Could you please try code as a mu-plugin?

    <?php
    
    add_action( 'wp_footer', function(){ ?>
    <script>
    (function($){
           $(function(){
               $(document).on("after.load.forminator", function(e, id){
                           jQuery("#forminator-module-2159").removeClass( 'forminator-size--small' );
                       });
               });
       })(window.jQuery);
       </script>
     <?php }, 21); ?>

    Make sure the form is set to load from ajax:
    https://monosnap.com/file/52jYkImWDXM6dH1Ez6EwDlxRIsJ5qQ

    If you are not familiar with mu-plugins, you can find a guide on:
    https://premium.wpmudev.org/docs/using-wordpress/installing-wordpress-plugins/#installing-mu-plugins

    Let us know the result you got.
    Best Regards
    Patrick Freitas

    Thread Starter Candlelite

    (@candlelite)

    Hi sorry about the delay getting back to you.
    Before I create the mu-plugin I thought I would try a few things. I set the form to load from ajax, as you requested and the form did not load at all! I then went through all of the plugins disabling each one. When I disabled Wordfence the form appeared after a short delay and the form also displayed correctly in the Contact pop up. If I turn off ajax and with Wordfence disabled the Contact form on the page appears instantly but the form in the pop up is back to small screen display. If I reactivate Wordfence with ajax disabled then I am back to how you have seen it. Clearly there is an issue with Wordfence and ajax.

    Plugin Support Nithin – WPMU DEV Support

    (@wpmudevsupport11)

    Hi @candlelite ,

    I turn off ajax and with Wordfence disabled the Contact form on the page appears instantly but the form in the pop up is back to small screen display. If I reactivate Wordfence with ajax disabled then I am back to how you have seen it. Clearly there is an issue with Wordfence and ajax.

    Maybe it could be one of its Firewall settings blocking as false positive. Please check and see whether the following helps:
    https://wordpress.org/support/topic/wordfence-blocking-ajax-requests-2/

    Regards,
    Nithin

    Plugin Support Kasia – WPMU DEV Support

    (@wpmudev-support2)

    Hello @candlelite ,

    We haven’t heard from you for some time now, so it looks like you no longer need our assistance.

    Please feel free to re-open this ticket if needed.

    kind regards,
    Kasia

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Only Small Screen Display in Divi Overlay’ is closed to new replies.