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

  • trainings24x7
    Asked on December 5, 2015 at 1: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

  • Welvin Support Team Lead
    Replied on December 5, 2015 at 8: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.

  • nishant
    Replied on December 6, 2015 at 11:19 PM

    Hello,

     

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

    How can I stop the lightbox form from showing up in mobile and tablets? Image 1 Screenshot 20

  • Ashwin JotForm Support
    Replied on December 7, 2015 at 1: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!

  • nishant
    Replied on December 7, 2015 at 1:41 AM

    Hello ashwin_d

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

     

    Thanks,

    Nishant

  • Ben
    Replied on December 7, 2015 at 2: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 :)

  • nishant
    Replied on December 7, 2015 at 3: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.

  • beril JotForm UI Developer
    Replied on December 7, 2015 at 3: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.

    How can I stop the lightbox form from showing up in mobile and tablets? Image 1 Screenshot 20

    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.

  • nishant
    Replied on December 7, 2015 at 3:46 AM

    Hi Beril,

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

  • Sammy
    Replied on December 7, 2015 at 4: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.

  • nishant
    Replied on December 7, 2015 at 4:29 AM

    Hi Sammy,

     

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

  • nishant
    Replied on December 7, 2015 at 4:36 AM

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

    How can I stop the lightbox form from showing up in mobile and tablets? Image 1 Screenshot 20

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

     

     

  • nishant
    Replied on December 7, 2015 at 5:12 AM

    Hello,

    Now code is working!

     

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

    How can I stop the lightbox form from showing up in mobile and tablets? Image 1 Screenshot 20

     

  • Welvin Support Team Lead
    Replied on December 7, 2015 at 6:41 AM

    That's great to know.

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