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

    Making my form responsive to mobile

    Asked by RealtyPlans on December 13, 2016 at 01:52 AM

    Hi I have a form https://www.jotform.com/?formID=63188341341857 . I am trying to make it mobile responsive. I added the mobile responsive widget. I checked the Mobile responsive checkbox in the Layout. Still it doesn't work good in portrait mode of iphones. What I can do. Please suggest. Thanks

  • Profile Image

    Answered by RealtyPlans on December 13, 2016 at 02:10 AM

    I am not quite particular. If lightbox doesn't work good in mobile I am happy to use pop up form. But some how i copy paste the embed code of pop up form to my website. It doesn't show up at all. My page is realtyplans.com.au/pages/client-portal

  • Profile Image
    JotForm Support

    Answered by owen on December 13, 2016 at 03:46 AM

    Hi, 

    Unfortunately, Lightbox is not mobile responsive yet. However, there is a workaround to make it work as a mobile responsive form. Please replace your Lightbox code with the following:

    <script src="https://form.jotform.me/static/feedback2.js?3.3.REV" type="text/javascript"> 

     

      // get current width of the window

        var parentWidth = window.innerWidth;

        var parentHeight;

        // check if the window size is less than 499, assuming that it means it is viewed on a mobile device

     

        if(window.innerWidth <= 499) {

        parentWidth = window.innerWidth; // if it's in mobile view assign the current width to this variable

            parentHeight = window.innerHeight - (window.innerHeight * 0.1);

        } else {

        parentWidth =  700; // if it's viewed on a window larger thatn 499px then set the width to 500px

            parentHeight = 500;

        }

     

    var JFL_63188341341857 = new JotformFeedback({ 

    formId: '63188341341857', 

    base: 'https://form.jotform.me/', 

    windowTitle: '', 

    background: 'transperent', 

    fontColor: '#FFFFFF', 

    type: 'false', 

        height: parentHeight,

        width: parentWidth,

    openOnLoad: true 

    }); 

    </script>

     

    Please try this and let us know if the issue still persists. 

    Regards

     

  • Profile Image

    Answered by RealtyPlans on December 13, 2016 at 05:52 AM

    Form width still needs to be lesser. Also i see when user tries t enter form values the screen jumps and user is not even aware where he is typing. We wouldnt want to give such an experience to the user. Another option is am trying to add it as a pop up window. I copy the embed code for pop up window into my shopify page. When i click save, the scirpt goes off. why is it so ?

  • Profile Image
    JotForm Support

    Answered by candy on December 13, 2016 at 06:43 AM

    Hello,

    I have checked your form. If you prefer to make lesser the form width on mobile devices, you can inject the following CSS codes into your form:

    @media only screen and (max-device-width: 500px){ /*mobile*/{

      .form-all{

    width:500px !important;

    }

    }

    I have checked your form within your account and I have checked your website https://www.realtyplans.com.au/pages/client-portal as you have indicated. I could not find your form embedded into your website in order to test it. I assume that you are working on your website right now.

    Did you try the following steps in order to import your form into your Shopify page?

     

    For further detailed information about embedding your form into Shopify, please check the following guide: https://www.jotform.com/help/217-Adding-a-form-to-Shopify-Store-Frontpage 

    Also, please check the following guide link for further information related to your issue: https://www.jotform.com/help/203-How-to-Auto-popup-a-Lightbox-Form 

    I hope this helps.

    Thanks.

  • Profile Image

    Answered by RealtyPlans on December 13, 2016 at 10:51 AM

    I have followed the same steps to add the form to my webpages. The form is seen in now in the website. Pls check. I injected the CSS and still it doesnt help. Can you pls have a look.

  • Profile Image

    Answered by RealtyPlans on December 13, 2016 at 10:53 AM

    Like i have said i am happy to use pop up form. somehow the embed code for pop up doesnt work in shopify page. Can you ls provide a solution for that. Thanks

  • Profile Image
    JotForm Support

    Answered by BJoanna on December 13, 2016 at 12:16 PM

    I have inspected your webpage and I saw that you are still using Lightbox. You can check this thread where my colleague provided steps how to add the Popup embed codes to Shopify:

    https://www.jotform.com/answers/966906 

     

    Let us know if you need further assistance.