What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    Lightbox embed code is not mobile responsive

    Asked by fraanco3 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
    JotForm Support

    Answered by Charlie 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

    Answered by fraanco3 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
    JotForm Support

    Answered by Charlie 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

    Answered by fraanco3 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
    JotForm Support

    Answered by Charlie 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.