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

  • Profile Image
    liorlustig
    Asked on October 23, 2015 at 12:19 AM
    1. Is there a way to make the form not show on mobile?
  • Profile Image
    Boris
    Answered 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.