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 kgrant2015 on October 21, 2015 at 02:28 PM

    Have the developers gotten around to adding the responsive Lightbox feature yet?

    My form is here: https://form.jotform.co/52853098340862

    I have tried the responsive settings in the preferences section and the designer section. Separately I also tried the mobile responsive widget.

    Neither of those worked, the form takes up the entire screen on my smart phone and doesn't allow it to be closed. This is a serious issue since not only can the form not be used but it blocks out the entire webpage and visitors will leave in an instant.

    Any help would be greatly appreciated. shirtagency mentioned setting the width to 100%, how do I do that?

    I tried this and it didn't work:

    <script src="https://form.jotform.co/static/feedback2.js?3.3.REV" type="text/javascript">// <![CDATA[
          var JFL_52853098340862 = new JotformFeedback({
            formId: '52853098340862',
            base: 'https://form.jotform.co/',
            windowTitle: 'Are Hearing Aids Right for You?',
            background: '#2056c6',
            fontColor: '#FFFFFF',
            type: 'false',
            height: 500,
            width: 100%,
            openOnLoad: true
          });
       
    // ]]></script>

  • Profile Image
    JotForm Support

    Answered by Charlie on October 21, 2015 at 03:08 PM

    Hi,

    May I know the website where the form is embedded? Currently, there's no solution yet for the mobile responsive for lightbox embed code. But please try the following workaround I have in mind:

    Here's a pastebin link so that you can check how the script works: http://pastebin.com/SGcUSvw4.

    You can copy my code and apply it to your website. You can edit it and make more declaration on the specific sizes of the device display.

    Here's a sample website page where I have embedded my cloned form as a lightbox: https://shots.jotform.com/charlie/lightbox_mobile_responsive.html. See if that works in your mobile device.

     

    I have also forwarded this to our developers so that if a straight forward solution has been made we can update you directly.

    Thank you.

  • Profile Image

    Answered by kgrant2015 on October 21, 2015 at 05:56 PM

    Thanks for the quick response Charlie.

    The form is embedded as a lightbox on a WordPress page: http://www.leadcanal.com/demo/

    Here is a screenshot of the code from within WordPress:

     

    I just pasted it in under the text tab.

    Your code works! When I view it on my phone it shows up properly.

    But when I copy and paste your HTML code into the same WP text tab it doesn't work.

    What do I need to paste and where to have my form show up automatically when the page loads and be mobile responsive?

    Thanks.

  • Profile Image
    JotForm Support

    Answered by EltonCris on October 21, 2015 at 10:52 PM

    My colleague's code has custom script that would automatically adjust the width of the lightbox depending on the window size it is viewed e.g. mobile and desktop. To add it on your lightbox embed code, please check the one I've highlighted in green (bold text) below. Copy these script and paste it on your lightbox embed code. Make sure they are on the exact position as shown below.

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

        var parentWidth = window.innerWidth;

        if(window.innerWidth <= 499) {parentWidth = window.innerWidth;} else {parentWidth =  500;}

         var JFL_52935598338976 = new JotformFeedback({

           formId: '52935598338976',

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

           windowTitle: 'Are Hearing Aids Right for You?',

           background: '#2056c6',

           fontColor: '#FFFFFF',

           type: 'false',

           height: 500,

           width: parentWidth,

           openOnLoad: true

         });

    </script>

    Hope this helps!

  • Profile Image

    Answered by kgrant2015 on October 22, 2015 at 10:56 AM

    Thank you Elton, I just tried it on my phone and it works!

    Thank you also Charlie for getting the ball rolling on the solution.

  • Profile Image
    JotForm Support

    Answered by Charlie on October 22, 2015 at 12:08 PM

    Me and my colleague, Elton, are glad to be of a help. I have also escalated this to our developers, if a fix has been released, we'll update you on this thread.

    Should you need any assistance again, please do not hesitate to contact us here in the forum.

    Thank you.

  • Profile Image

    Answered by fraanco3 on November 15, 2015 at 09:47 PM

    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>

         

     

     

  • Profile Image

    Answered by fraanco3 on November 15, 2015 at 11:52 PM

    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:07 AM

    Thank you for giving us your feedback on the said workaround. To better discuss your case, I opened a separate thread for you, please refer to this link instead: http://www.jotform.com/answers/705314. We will address it accordingly.