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

    Is there a way to make the form not show on mobile?

    Asked by liorlustig on October 23, 2015 at 12:19 AM
    1. Is there a way to make the form not show on mobile?
  • Profile Image
    JotForm Support

    Answered by Boris on October 23, 2015 at 07:22 AM

    You can make your form become invisible when the user's screen width is less than a common width for mobile devices, such as making it invisible if the device it is viewed on is less than 680 pixels wide.

    To do that, we can simply inject the following custom CSS into your form:

    @media only screen and (max-device-width: 680px) {
    .supernova { display: none; }
    }

    However, as you are using the automatic popup of your form in a lightbox, the lightbox will still popup for users on mobile devices - only the lightbox popup would appear empty. In other words, the above method works for hiding a form which is embedded through iFrame or script methods, and will not prevent lightbox or feedback methods from popping out and bothering your users.

    What I would recommend instead is for you to make your Lightbox popup mobile responsive. It is quite easy, all you need to do is set the height and width in your embed codes to false, rather than using a predefined width of 700 pixels and heigh of 500 pixels. So your lightbox embed code would look like this, with the only changes marked in red:

    <script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript">
     var JFL_52944391817161 = new JotformFeedback({
         formId: '52944391817161',
         base: 'https://www.jotform.us/',
         windowTitle: 'Speak to an attorney at no cost right now',
         background: '#2fb2f1',
         fontColor: '#FFFFFF',
         type: 'false',
         height: false,
         width: false,
         openOnLoad: false
         }); </script>       <a id="lightboxdelay" class="btn lightbox-52944391817161" style="margin-top: 16px;">Click this to show lightbox popup</a>        <script language="JavaScript">
    var delayseconds = 5;
        function pause() {
        myTimer = setTimeout('whatToDo()', delayseconds * 1000)
        }
       function whatToDo() {
    document.getElementById('lightboxdelay').click();
        }
    window.onload = pause;
    </script>

    In addition to fixing this in the embed codes, you should also add the following CSS directly into your own website, on the page where you have used the Lightbox embed:

    .jt-feedback.ui-draggable { width: 100%; max-width: 700px; }

    You should add the CSS into one of your website's stylesheets. This CSS is important, as it makes your Lightbox mobile responsive. Applying both edits on your website would result in the Lightbox being mobile responsive, as seen in the image below):

    I hope this helps.