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 add a mobile friendly lightbox form?

    Asked by pro2colgroup on November 25, 2015 at 07:34 AM

    I have a number of pop up forms across our websites. I use the Lightbox embed code, as I want the form to pop up from an image on the website (acting as a button)

    BUT these forms don't appear correctly on a mobile - they are impossible to fill in - you can't scroll to reach the submit button...

    An example of one of these forms can be seen here: http://www.jotform.com//?formID=53143282385960

    and here http://www.globalscapesoftware.co.uk/eft/ (linked to the "Get The EFT Starter Pack)

    What can I do?

    Thanks

    Michelle

    lightbox form Mobile mobile friendly
  • Profile Image
    JotForm Support

    Answered by KadeJM on November 25, 2015 at 11:13 AM

    I believe I understand that you would like to make your embedded lightbox form mobile responsive.

    Here is what I currently see when viewing your site from my iPhone 6 as seen below.

    However, currently lightboxes are not optimized for mobile resposiveness since there is no support with this as of yet. So this means you have to do this manually by adjusting some of your lightbox code to work around that problem.

    Additionally, I've opened up a feature request since this should be allowed as currently the default lightbox embed code is set to fixed.

    You can try setting your lightbox width to " 100% " to see if that will help.

    If it does not then at that point please try using this custom script 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 FL_53143282385960 = new JotformFeedback({

           formId: '53143282385960',

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

           windowTitle: 'Download EFT Information Pack',

           background: '#FFA500',

           fontColor: '#FFFFFF',

           type: '1',

           height: 500,

           width: parentWidth,

           openOnLoad: true

         });

    </script>

  • Profile Image

    Answered by pro2colgroup on November 27, 2015 at 12:08 PM

    How do I get this script to work with a button, instead of just popping up...

    I tried adding the button code in after this script and changed openOnLoad to false not true, but it still isn't working?

     

  • Profile Image

    Answered by Ben on November 27, 2015 at 12:57 PM

    openOnLoad: false

    would be all that you have to set up to have it not open when the page loads.

    It is important however to note that openonload, openOnload and openOnLoad are different things, so it is best to just change the value.

    Also if no code is after it (as in the comment by my colleague), then there should not be comma afterwards.

    I did check your website: http://www.globalscapesoftware.co.uk/eft/ and the popup was not shown until I clicked on the DOWNLOAD button, do let us know if it is still opening for you or if we should check some other page.

  • Profile Image

    Answered by pro2colgroup on December 01, 2015 at 11:43 AM

    Sorry - but I am a little confused...

    The additional coding you provided has enabled the lightbox form to work properly from a mobile from the following pages;

    http://www.globalscapesoftware.co.uk/dmz-gateway/

    http://www.globalscapesoftware.co.uk/advanced-workflow-engine-eft-module/

    http://www.globalscapesoftware.co.uk/as2-eft-module/

     

    But the exact same code does not work from these pages;

    http://www.globalscapesoftware.co.uk/eft/

    http://www.globalscapesoftware.co.uk/business-activity-monitoring-eft-module/

    http://www.globalscapesoftware.co.uk/content-integrity-control-cic-eft-module/

    http://www.globalscapesoftware.co.uk/sftp-ssh-eft-module/

     

    This is the code I have used (on the EFT Starter Pack Advert) - the same code is used on all pages...

    <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_53143282385960 = new JotformFeedback({ formId: '53143282385960', base: 'https://form.jotform.com/', windowTitle: 'Download EFT Information Pack', background: '#FFA500', fontColor: '#FFFFFF', type: '1', height: 500, width: 700, openOnLoad: false }); </script> <a class="btn lightbox-53143282385960" style="margin-top: 16px"><img src="//www.globalscapesoftware.co.uk/wp-content/uploads/2015/03/EFT-Info-Pack-Ad4.png" alt="EFT Info Pack Ad4" width="499" height="853" class="aligncenter size-full wp-image-2873"></a>

     

    Do you have any idea why it works on some and not on others?

  • Profile Image
    JotForm Support

    Answered by KadeJM on December 01, 2015 at 01:12 PM

    Unfortunatley, on my end it appears to still be the same issue for all of the above links on my iPhone 6 as I've shown you in a screenshot for my previous reply to you about this problem.

    If it's working for the few you first mentioned but not the others you said on your end then that sounds like it is probably interference with between your website and your form scripts.

    Please allow us some more time to look into this a bit more to try to find out more about what's going on with it and if we're able to find a better workaround we'll notify you as soon as possible.