Lightbox form is not responsive on mobile devices

  • Profile Image
    binksford
    Asked on January 13, 2016 at 04:15 AM
    when I try to add the lightbox option it looks wrong on mobile devices - half of it is cut off and I cannot scroll - even though I specified that the form is responsive.

    This is the code I am entering:

    <script src="https://form.jotform.co/static/feedback2.js?3.3.REV" type="text/javascript"> var JFL_52580978762874 = new JotformFeedback({ formId: '52580978762874', base: 'https://form.jotform.co/', windowTitle: 'Ford Focus Enquiry Form', background: '#48649C', fontColor: '#FFFFFF', type: 'false', height: 500, width: 690, openOnLoad: false }); </script> <a class="btn lightbox-52580978762874" style="margin-top: 16px"> 2015 Ford Focus Enquiry Form </a>

     

    live example is on the last image on page http://binksford.com.au/new-car-showroom/new-ford-focus/ at the top left hand corner. I have to remove it by tomorrow as this page is live.

  • Profile Image
    BJoanna
    Answered on January 13, 2016 at 04:24 AM

    Unfortunately, our lightbox embed options are not optimize for mobile devices.

    I will escalate this issue to our developers and we will inform you via this thread once this issue is resolved. 

    As possible workaround you can try with solution provided by my colleagues on this thread:

    http://www.jotform.com/answers/686728-Lightbox-embed-code-is-not-mobile-responsive  

  • Profile Image
    binksford
    Answered on January 14, 2016 at 01:45 AM

    Hi Joanna,

    It worked! :) I'd like to change the style of the clickable link to a box style. If you have a look at http://binksford.com.au/new-car-showroom/new-ford-focus/ on the last image of the page there is a box labelled "Register Your Interest". How do I create a similar box to click through to the lightbox?
  • Profile Image
    BJoanna
    Answered on January 14, 2016 at 03:13 AM

    I am glad to hear that workaround provided by my colleagues from other thread worked. 

    Considering that your last question is not related to subject of this thread I have moved your question to separate thread and we will provide you an answer there. 

    http://www.jotform.com/answers/744669 

  • Profile Image
    Scott
    Answered on February 24, 2017 at 06:19 AM

    Hey Natalie,

    Our UI developers fixed this situation, where the lightbox embedded forms were not responsive.

    You do not need any workarounds anymore. And also, since the lightbox embed code's updated through fetched JS files, you do not need to re-embed anything again. It should just work as responsive, still when you delete the workaround CSS codes.

    We will be still waiting for your response and feedback,

    Cheers.

  • Profile Image
    binksford
    Answered on September 11, 2017 at 12:28 AM

    Hi Scott,

    Apologies it's taken so long but I just tried the lightbox. It doesn't work as expected on desktop or mobile, doesn't pop up when you click on the link/box for mobile and for desktop a blank screen pops up. I could really use some guidance on this issue.

     

    Regards,

    Natalie

  • Profile Image
    BJoanna
    Answered on September 11, 2017 at 01:41 AM

    On the webpage http://binksford.com.au/new-car-showroom/new-ford-focus/ you previously provided I was not able to find a lightbox embedded form.

    Please provide us the exact URL of the page where you embedded a lightbox form that is not working. 

  • Profile Image
    binksford
    Answered on September 11, 2017 at 02:17 AM

    Please have a look at http://binksford.com.au/new-car-showroom/ford-fiesta/

     

     

     

    Below the ENQUIRE NOW box. I was using Mozilla Firefox browser.

  • Profile Image
    Jim_R
    Answered on September 11, 2017 at 03:42 AM

    I'm seeing a couple of different embed codes on your website:

    1. Popup codes on the ENQUIRE NOW button

    2. Lightbox codes underneath the ENQUIRE NOW button

    3. Script embed codes on the ENQUIRE NOW tab (right beside the SPECIAL OFFERS tab)

    4. Popup codes on the ENQUIRE NOW button on your footer

    5. Lightbox codes on the script section of your footer

    6. oEmbed codes from WP

    For testing purposes, can you please remove all the other embed codes except for the Lightbox Codes just to check if there's something conflicting with your current embed codes?

    I did test the Lightbox codes from my end and it works as intended. You can test it here, where I used the exact Lightbox codes from your form.

  • Profile Image
    binksford
    Answered on September 11, 2017 at 07:27 PM

    Hi, the lightbox seems to work when it's a blank page with only the header and footer. http://binksford.com.au/test/

    However, I need it to work with all my other embeded codes that you mentioned above also.

     

    Regards,

    Natalie

  • Profile Image
    Jim_R
    Answered on September 11, 2017 at 08:29 PM

    Hello Natalie, the Lightbox doesn't seem to work on the new test link you provided. I don't see it opening when I click on the "Contact Us Enquiry" link.

    http://binksford.com.au/test/ 

    I found an issue that is similar to how you first described it:

    ...and for desktop a blank screen pops up

    I moved your earlier post to a separate thread so we can discuss and escalate it accordingly.

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

    I'll be replying there shortly after doing some tests.