Lightbox form is not being displayed correctly in mobile devices.

  • Profile Image
    webmechanics
    Asked on December 23, 2014 at 07:55 AM

    Hello,

    With regards to JotForm on http://ellai.milwellint.com/

    The form is set to be responsive but it doesn't render properly within the lightbox on smartphones

    The form label isn't in line with the text box on desktops even though the alignment is set and the preview shows it correctly.

    Please advise.

  • Profile Image
    aytekin
    Answered on December 23, 2014 at 09:20 AM

    Thank you for reporthing this problem. One of our designers will look into this problem and get back to you.

     

  • Profile Image
    webmechanics
    Answered on December 24, 2014 at 10:10 AM

    When can I expect a response to this problem?

  • Profile Image
    KadeJM
    Answered on December 24, 2014 at 12:34 PM

    It may take a a couple days at the least or possibly a week or two even though we try our best not to take too long. Either way though, rest assured they will look into it as soon as possible and respond back to you here on your thread.

    Generally, we don't promise any timeframes because sometimes it might be something quick and easy and other times it might take a little while if it is a harder issue involved. It mostly depends on the workload our designers have ahead of you from other threads and projects.

  • Profile Image
    webmechanics
    Answered on December 24, 2014 at 01:59 PM

    I'll try and explain my problem:

    PROBLEM:

    I need my clients to have a single page experience for a button triggered lightbox contact form. Right now that is achieved even with faults within the WP backend on desktops! Far worse on smaller devices.

    How can I manipulate the form to:

    1. Display on a mobile in a non responsive way? Maybe by changing the width and height?

    2.

    How can I align the labels and fields to show within the same line on a desktop?

    I know its the Xmas weekend but your help would be highly appreciated.

    Even with the problems, I've upgraded to a paid platform and a swift resolution would be appreciated.

     

    Thank you.

     

  • Profile Image
    Jan
    Answered on December 24, 2014 at 03:53 PM

    Hello,

    As I understand, you want to retain the same layout that you created even on mobile devices right? The current layout shows that the label and the text box field are on the same line.

    This is the layout of your form in "Lightbox" mode. Since you enabled the form to be responsive, the form layout will adapt depending on the screen or window sizes. 

    Now, this is the layout that you created. This is also the layout that you want to display in smaller devices. I assumed that it is okay for you to reduce the width of the text box field right? 

    This ticket was already escalated to our developers. We will notify you via this thread once an update is available. Thank you for your patience.

    Display on a mobile in a non responsive way? Maybe by changing the width and height?

    It is possible but not recommended, because the lowest resolution is 320 x 240 pixels. You will need to create a form that is 320 pixels in width. It looks good in mobile devices like smartphones, but not on bigger screens. I would recommend making it responsive.

    How can I align the labels and fields to show within the same line on a desktop?

    I created a new thread for this question so we can assist your properly. This is the URL of the new thread http://www.jotform.com/answers/481925.

     

    Hope this helps. Thank you.

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

    Hey webmechanics & everyone else,

    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.