Making my form responsive to mobile

  • Profile Image
    RealtyPlans
    Asked 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
    RealtyPlans
    Answered 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
    owen
    Answered 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
    RealtyPlans
    Answered 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
    candy
    Answered 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
    RealtyPlans
    Answered 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
    RealtyPlans
    Answered 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
    BJoanna
    Answered 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.