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

    How to make Lightbox embed code mobile responsive

    Asked by goshow on January 25, 2016 at 01:03 PM
    So we are now end of Jan 2016, any news on this update? Really a show-stopper for me having to spend hours trying to get the form working responsively in lightbox..
  • Profile Image
    JotForm Support

    Answered by Charlie on January 25, 2016 at 01:29 PM

    Unfortunately, the lightbox is still not yet mobile responsive.

    However, we do have a workaround that might make it mobile friendly at first load. But is not 100% mobile responsive. 

    You can check the custom script on this thread that I have suggested to another user: https://www.jotform.com/answers/686728.

    Here's how you can implement the workaround in your end:

    1. First, get you lightbox embed code and paste it in your text editor.

    Here's mine:

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

          var JFL_60244871950962 = new JotformFeedback({

            formId: '60244871950962',

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

            windowTitle: 'Lightbox Embed Code - Mobile Responsive',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: 'false',

            height: 500,

            width: 700,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-60244871950962" style="margin-top: 16px">

            Lightbox Embed Code - Mobile Responsive

          </a>

     

    2. We will then need to add some custom code inside the script tags. You can check my final code here: http://pastebin.com/v2151BJJ. Here's my final script:

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

        // get current width of the window

        var parentWidth = window.innerWidth;

        var parentHeight;

     

        // check if the window size is less than 499, assuming that it means it is viewed on a mobile device

        if(window.innerWidth <= 499) {

        parentWidth = window.innerWidth; // if it's in mobile view assign the current width to this variable

            parentHeight = window.innerHeight - (window.innerHeight * 0.1);

        } else {

        parentWidth =  700; // if it's viewed on a window larger thatn 499px then set the width to 500px

            parentHeight = 500;

        }

          var JFL_60244871950962 = new JotformFeedback({

            formId: '60244871950962',

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

            windowTitle: 'Lightbox Embed Code - Mobile Responsive',

            background: '#FFA500',

            fontColor: '#FFFFFF',

            type: 'false',

            height: parentHeight,

            width: parentWidth,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-60244871950962" style="margin-top: 16px">

            Lightbox Embed Code - Mobile Responsive

          </a>

     

     

    3. The ones highlighted in yellow above are the custom code that we have. Noticed that I have added comments on each part to better understand them. What the code actually does is that it checks the width and the height of the parent element, then it replaces the width and the height of the lightbox based from the parent element, in that way the lightbox would match the actual display screen. Just copy the yellow codes and paste them in your lightbox embed code.

     

    4. You can check my test website here: https://shots.jotform.com/charlie/lightbox_mobile_responsive_2.html. This is how it looks like in my Android phone:

     

     

    I have also forwarded this to our developers so that they are aware that you are also looking for this functionality or feature. Apologies for the inconvenience. 

  • Profile Image

    Answered by zabavaconsulting on February 29, 2016 at 10:02 PM

    This worked! Unfortunately I had to search forever to find the solution!

  • Profile Image
    JotForm Support

    Answered by Charlie on March 01, 2016 at 01:12 AM

    @zabavaconsulting

    I'm glad to hear that it worked. I'm sorry to hear that it took quite some time to find this workaround. You can always open a new thread here in the forum and we'll answer your questions as immediate as possible. Thank you.

  • Profile Image

    Answered by Berrymisu on July 04, 2016 at 03:25 AM

    Are we supposed to insert our own data where you have written "get current width..." or do we justs copy the whole thing even with your explanations and paste it in? 

  • Profile Image
    JotForm Support

    Answered by Welvin on July 04, 2016 at 08:40 AM

    @Berrymisu: Yes, copy the whole custom script. Just follow the steps in my colleague's reply. If you need a help, please create a new thread.