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 can I stop the lightbox form from showing up in mobile and tablets?

    Asked by trainings24x7 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

    Page URL:
    http://trainings24x7.com

    lightbox form
  • Profile Image
    JotForm Support

    Answered by Welvin 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

    Answered by nishant 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
    JotForm Support

    Answered by ashwin_d 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

    Answered by nishant  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

    Answered by Ben 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

    Answered by nishant  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
    JotForm Support

    Answered by beril 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

    Answered by nishant  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

    Answered by Sammy 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

    Answered by nishant  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

    Answered by nishant  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

    Answered by nishant 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
    JotForm Support

    Answered by Welvin 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.