Making my form responsive to mobile

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

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

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

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 ?

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.

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.

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

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.