How can I stop the lightbox form from showing up in mobile and tablets?

  • Profile Image
    trainings24x7
    Asked on December 05, 2015 at 01:43 AM

    Hello,

     

    Is there any way if I want to show my form only to desktop, not for mobile or tablets.?

    below is my website where i use the form:

    http://trainings24x7.com

    Below is the form:

    https://form.jotform.me/53300890979464

     

    Thanks,

    Nishant

  • Profile Image
    Welvin
    Answered on December 05, 2015 at 08:23 AM

    I think that is possible by adding a custom CSS codes in your website. Please try the following CSS codes:

    @media only screen and (max-device-width: 1028px) {

    .jt-dimmer {

        display: none !important;

    }

    .jt-feedback.u-responsive-lightbox.ui-draggable {

        display: none !important;

     

    }

    }

    You will have to add the codes to your website stylesheets.

    Let us know if the codes aren't working so we can re-check.

  • Profile Image
    nishant
    Answered on December 06, 2015 at 11:19 PM

    Hello,

     

    the above code is not working as you can see I have added in the stylesheet.

  • Profile Image
    ashwin_d
    Answered on December 07, 2015 at 01:39 AM

    Hello nishant,

    I did check your webpage and you seems to have added script to auto popup the light box form. The css code share by my colleague, will only hide the link in your web page.

    Can you please let us know if you will be able to add some scripts in your webpage? We will try to find out alternative options to disable the script when accessed from mobile device.

    We will wait for your response.

    Thank you!

  • Profile Image
    nishant 
    Answered on December 07, 2015 at 01:41 AM

    Hello ashwin_d

    Yes, i'm able to add the code into my webpage.

     

    Thanks,

    Nishant

  • Profile Image
    Ben
    Answered on December 07, 2015 at 02:29 AM

    Great Nishant, thank you for confirmation :)

    Now instead of this:

     <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
     var JFL_53300890979464 = new JotformFeedback({
         formId: '53300890979464',
         base: 'https://form.jotform.me/',
         windowTitle: 'Help? Contact Us',
         background: '#FFA500',
         fontColor: '#FFFFFF',
         type: 'false',
         height: 500,
         width: 'parentWidth',
         openOnLoad: false
         });
         </script>

    Do add the following:

     <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
    if(screen.width > 1023) {
     var JFL_53300890979464 = new JotformFeedback({
         formId: '53300890979464',
         base: 'https://form.jotform.me/',
         windowTitle: 'Help? Contact Us',
         background: '#FFA500',
         fontColor: '#FFFFFF',
         type: 'false',
         height: 500,
         width: 'parentWidth',
         openOnLoad: false
         });
    }
    </script>

    What it should do is to only create the form when the size of the screen is 1024 or more pixels in width.

    Do let us know how it goes and please do replace the original code(s) or they will cause it to still appear. Looking at your website it seems that there are multiple places showing the feedback form.

    1st At the top of the page, from line 6 to line 20

    2nd near bottom from line 1196 to line 1209

    While the second does not have any values, it still could cause issues if left as it is, which is why I had mentioned it.

    Do let us know how it goes :)

  • Profile Image
    nishant 
    Answered on December 07, 2015 at 03:00 AM

    The following code i was using earlier:

    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript">
     var JFL_53300890979464 = new JotformFeedback({
         formId: '53300890979464',
         base: 'https://form.jotform.me/',
         windowTitle: 'Help? Contact Us',
         background: '#FFA500',
         fontColor: '#FFFFFF',
         type: 'false',
         height: 500,
         width: 'parentWidth',
         openOnLoad: false
         });

         </script>


    <a id="lightboxdelay" class="btn lightbox-53300890979464" style="margin-top: 16px"> Help? Contact

    Us </a>


    <script language="JavaScript">
    var parentWidth = window.innerWidth;
        if(window.innerWidth <= 499) {parentWidth = window.innerWidth;} else {parentWidth =  500;}
    </script>


    <script language="JavaScript">
    var delayseconds = 2;
        function pause() {
        myTimer = setTimeout('whatToDo()', delayseconds * 1000)
        }
       function whatToDo() {
            document.getElementById('lightboxdelay').click();
        }
    window.onload = pause;
    </script>

    Now tell me where to change. I changed as you said but nothing working eveng form is not coming when i refresh the page.

  • Profile Image
    beril
    Answered on December 07, 2015 at 03:34 AM

    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript"> 
    if(screen.width > 1023) {
     var JFL_53300890979464 = new JotformFeedback({ 
         formId: '53300890979464', 
         base: 'https://form.jotform.me/', 
         windowTitle: 'Help? Contact Us', 
         background: '#FFA500', 
         fontColor: '#FFFFFF', 
         type: 'false', 
         height: 500, 
         width: 'parentWidth', 
         openOnLoad: false 
         }); 
    }
    </script>

    You need to add the parts which marked with purple to your code.

    I hope it will work.

     

    If this does not resolve the issue, please let us know and we will be glad to take another look.

  • Profile Image
    nishant 
    Answered on December 07, 2015 at 03:46 AM

    Hi Beril,

    I made the changes but still form appear as before in dektop or laptop. Code is not working.

  • Profile Image
    Sammy
    Answered on December 07, 2015 at 04:25 AM

    I have checked the code on your site and it appears the script is not updated with eh new code as suggested by my colleague Beril, kindly update the test in on a phone or ipad, I have tested the sample on my end and it is switching accordingly kindly replace the code.

    It appears on the laptop because the laptop screen sizes is usually greater than 1023, you can tweak the values of the screen width value to your preference.

  • Profile Image
    nishant 
    Answered on December 07, 2015 at 04:29 AM

    Hi Sammy,

     

    I replaced the code and checked but not worked. that is why i did undo.

  • Profile Image
    nishant 
    Answered on December 07, 2015 at 04:36 AM

    ok see. I have added again the code and test..

    Now please check trainings24x7.com at ur end in mobile and laptop, deskptop. It is not switching accordingly.

     

     

  • Profile Image
    nishant
    Answered on December 07, 2015 at 05:12 AM

    Hello,

    Now code is working!

     

    my new question is - how can remove scroll bar from form. I need complete form!

     

  • Profile Image
    Welvin
    Answered on December 07, 2015 at 06:41 AM

    That's great to know.

    Your question about the scroll bar has been moved here: http://www.jotform.com/answers/719311.