Lightbox embed code is not mobile responsive

  • Profile Image
    fraanco3
    Asked on November 16, 2015 at 03:04 AM

    I have used the above script (Elton) with slight modification and it very successfully displays my lightbox embed form on all mobile devices. ONE huge problem, however.  When you enter text into a textbox on the form, the form resizes itself as if it is NOT responsive and screws up the mobile user experience.

     

    I have the 'responsive form' option to YES. I have tried with AND without the responsive for mobile widget.

     

    Again, the form looks GREAT on mobile devices but it is unusable for text input.<script

    src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">

        var parentWidth = 500;

        var parentHeight = 300;

      if(window.innerWidth <= 499) {parentWidth = (window.innerWidth*.90);parentHeight = window.innerHeight *.90}  

         else  {parentWidth =  500; }

     

         var JFL_53074841533151 = new JotformFeedback({

     

           formId: '53074841533151',

     

           base: 'https://form.jotform.com/',

     

           windowTitle: 'My Window Title',

     

           background: 'darkorange',

            fontColor: '#FFFFFF',

            type: 'false',

     

           height: parentHeight,

     

           width: parentWidth,

     

           openOnLoad: false

     

         });

     

    </script>

     

    i also noticed that your form above does the same thing that mine does on an iPhone...the form expands beyond the width of the iPhone  when you put text into a textbox. In other words, invoking the iPhone (or iPad) keyboard when the lightbox is active will break the width of the form when you enter text.

  • Profile Image
    Charlie
    Answered on November 16, 2015 at 03:09 AM

    Could you share us the link to your website where you have embedded your lightbox code? That will help us to better assess custom code. We'll wait for your response.

  • Profile Image
    fraanco3
    Answered on November 17, 2015 at 12:05 AM

    i have reverted to using the pop up version of the form. The lightbox version has had issues for nearly two years and I have given up hope on it getting fixed.

    To see the issue, simply create a lightbox form and use Elton's script to enable it for mobile and responsive. Make sure your form has a text field requiring the mobile keyboard (e.g. iPad, iPhone). Once the mobile keyboard is invoked, the form loses its is mobile responsive characteristics and expands beyond the devices viewport.

  • Profile Image
    Charlie
    Answered on November 17, 2015 at 03:19 AM

    Apologies. Let me forward this to our developers to add you to the list of users who have reported this. Our developers are still working on this but I see there's still no solution for it, the codes we have provided are workarounds and may not work all the time.

    The form of the user in this thread http://www.jotform.com/answers/686728 where we suggested a custom script and tested the form works. We can check your website and the form you are using and see if we can come up with a workaround.

    Regardless, I have forwarded this to our developers, we will update you as soon as a permanent solution has been released. Apologies again.

  • Profile Image
    fraanco3
    Answered on November 17, 2015 at 09:46 AM
    Thank you for the follow up.
    This script does not work. It LOOKS great on a mobile device; however, once the mobile keyboard is invoked when entering data into a text box the form expands and shift beyond the size of the viewport. This script workaround is unusable if your form requires the use of a mobile keyboard.
    ...
  • Profile Image
    Charlie
    Answered on November 17, 2015 at 11:25 AM

    I made a test form and tried it on iPhone and Android. You can check it here: https://shots.jotform.com/charlie/lightbox_demo_form.html 

    In iPhone when you click the text input, it zooms in a little bit to have the cursor more focused on. Making the form size be out of the device's screen display.

     

    In Android, it does not do this.

     

    I'll add this findings to our developers. but I believe this behavior is part of the iPhone's behavior as a convenience for the user's to easily see the input box, but I'm not sure of this though.

    We'll update you as soon as there's a permanent solution for the responsive layout for lightbox code.

  • Profile Image
    FranckMuller
    Answered on February 02, 2017 at 08:22 AM

    Hello,

    The lightbox you have in your demo link works well, please share how you did it!

    I have looked at all the other lightbox threads and this is the only one that works. As mentionned by fraanco3, Elton's code doesn't work when you invoque the mobile keyboard to type text. I have the same issue and the form is not usable.

    Elton's code has been shared here but it doesn't work: https://www.jotform.com/answers/686728-Lightbox-embed-code-is-not-mobile-responsive

    Please share the code for this form, it works great: https://shots.jotform.com/charlie/lightbox_demo_form.html 

    Thank you,

  • Profile Image
    olivia
    Answered on February 02, 2017 at 08:50 AM

    Hi @FranckMuller ,

    I have opened a new thread for your issue.

    Your question will be answered in this thread: https://www.jotform.com/answers/1054629 

    Thank you.

  • Profile Image
    FranckMuller
    Answered on February 02, 2017 at 09:49 AM

    Why are you moving my question into another thread ?

    On the newly created thread the answer the answer you provided is besides the point. Please read our thread, it concerns lighboxes on mobile devices.

    Can "Charlie" respond directly or someone who know how he succeeded the lightbox for mobile devices ?

    Thank you,

     

     

  • Profile Image
    Welvin
    Answered on February 02, 2017 at 11:04 AM

    We do this to properly address each user and to avoid some sort of confusions that may arise on the thread. I will address you further on the new thread that is assigned by my colleague. 

  • Profile Image
    Scott
    Answered on February 24, 2017 at 06:21 AM

    Hey Frank & everyone else,

    Our UI developers fixed this situation, where the lightbox embedded forms were not responsive.

    You do not need any workarounds anymore. And also, since the lightbox embed code's updated through fetched JS files, you do not need to re-embed anything again. It should just work as responsive, still when you delete the workaround CSS codes.

    We will be still waiting for your response and feedback,

    Cheers.

  • Profile Image
    fraanco3
    Answered on February 24, 2017 at 10:40 AM

    Thanks for the effort on this. I really appreciate it. Unfortunately the lightbox/feedback methods have other issues that I have also reported, most notably neither one will work properly with "fixed positioned" elements.

    To illustrate, create a button element on a lightbox form and add the following CSS for it so that it 'floats' above the form in a fixed position while you scroll - a.k.a. a "Checkout Now" button. It will work fine in the editor, but if you publish it as a lightbox or feedback widget, the fixed position, overlay elements do not work as expected.

     

    .form-buttons-wrapper {

        z-index : 99999 !important;

        position : fixed !important;

        top : 0 !important;

        padding : 0px !important;

        margin : 0px;

    }

     

  • Profile Image
    Kevin_G
    Answered on February 24, 2017 at 01:43 PM

    @fraanco3, 

    Regarding to your report about the fixed form elements, it was moved to another thread since it's not related to this thread, you will find the new thread where we will assist you on the next link: https://www.jotform.com/answers/1075526 

    I'm not sure if you also submitted the last comment about the form jumping when typing in fields, but do note that this happens when a webpage is not mobile responsive itself, but this can be corrected adding a meta tag to avoid the form to have the zoom effect:

    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

    Please, add the given meta tag between the header tags in your webpage code. 

    If this still persists, please open a new thread about it and we will be glad to assist you, working on a different thread for the issue will help us to assist you better.