How to make a Lightbox form mobile responsive

  • Profile Image
    txtbookapp
    Asked on January 19, 2017 at 12:27 PM

    I have been trying to make a Lightbox form mobile responsive for the last 2 years and see in the forums that many others are also trying... we really need a fix for this. We don't want to use pop ups and are losing a lot of interest in our product because EVERYONE is using mobile these days... and our form looks sloppy using just the Responsive widget.. it is not fully responsive and no one can enter anything in our form... please help!

  • Profile Image
    david
    Answered on January 19, 2017 at 01:30 PM

    Unfortunately our lightbox forms are not optimized for mobile devices.  

    I am creating a feature request ticket and forwarding it to our backend team. We will get back to you as soon as we have any update from them.

    For now, I would suggest you to please take a look at the following thread where one of my colleague have shared a workaround to make lightbox form mobile responsive by injecting custom css code:  http://www.jotform.com/answers/686728-Lightbox-embed-code-is-not-mobile-responsive

  • Profile Image
    txtbookapp
    Answered on January 19, 2017 at 05:45 PM
    Hi.
    I already implemented that workaround and it is not fully responsive... it does not allow a user to easy enter any data.
    Hopefully a backend fix will be made!
    Thank you,
    Scott
    ...
  • Profile Image
    ashwin_d
    Answered on January 19, 2017 at 10:19 PM

    Hello Scott,

    I would suggest you to please share the webpage URL where you have embedded your form and we till take a look before reporting it to our backend team. 

    We will wait for your response.

     

    Thank you!

  • Profile Image
    FranckMuller
    Answered on January 20, 2017 at 09:24 AM

    Funny that this post came out yesterday.

    I also just finished my form and noticed that lightboxes look terrible on mobile.

    This needs to be fixed quickly.

  • Profile Image
    david
    Answered on January 20, 2017 at 11:23 AM

    Lightboxes have a fixed height and width that are not dynamic.  Due to the height and width of the lightbox being static, the form dimensions do not change when the page gets smaller.  Mobile CSS is only applied when the form dimensions are below a certain threshold.  If the size of the form never changes, mobile CSS will never come into play.  This is how our lightbox embedded forms have always worked.

    The workaround described in the post I referenced allows for the size of the of the lightbox to be adjusted in the page when the page dimensions change. 

    There are quite a few open tickets to see if this is something that can be added but I believe integrating mobile responsiveness into the actual lightbox code is easier said than done.

  • Profile Image
    txtbookapp
    Answered on January 24, 2017 at 05:45 PM
    Hi.
    Our website is txt-book.com and the form is for iPhone via the link below.
    https://www.jotform.com/txtbookapp/txt-bookform
    Hope this helps..
    ...
  • Profile Image
    david
    Answered on January 24, 2017 at 06:55 PM

    Since the Lightbox is geared towards iPhone users.  You can set the size of the lightbox to the screen size of a smaller iPhone.  The form will adjust accordingly.