What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image

    How can I retain fixed form field positions when scrolling in a lightbox?

    Asked by fraanco3 on April 26, 2016 at 04:16 PM

    Problem: Fixed positioning for an object (e.g. a submit button) works fine for pop-up forms and iframe forms. It does not seem to work for a lightbox form.

    Background:  If you inject custom css for a pop-up or iframe form, such as:

          .form-submit-button {position: fixed !important; bottom:50%; right: 10%;}

    you get the desired effect -- the SUBMIT button will be placed midway in the form, and as the user scrolls down the form the SUBMIT button stays in place and remains visible, while the form scrolls underneath the button. 

    However, the same CSS code above does not work for a lightbox form. The SUBMIT button will not remain in a fixed position while the forms scrolls underneath it. Instead, the SUBMIT button scrolls with the page.

    Screenshot
    lightbox form floating button
  • Profile Image
    JotForm Support

    Answered by jonathan on April 26, 2016 at 09:02 PM

    I was able to see what you meant when I test your form https://www.jotform.com/32967593814165  using its Lightbox publish code 

    I am not sure if its possilble to do it without using the form's source code. I will check further and look for a solution. I'll get back to this shortly.

    Thanks.

  • Profile Image

    Answered by fraanco3 on April 27, 2016 at 01:12 AM

    Thanks for the response, Jonathan. I have restored the form back to its original state, removing the injected css, as this is the production version.

     

    Let me know what you find out.  I really want to use the lightbox form with fixed position elements.

  • Profile Image
    JotForm Support

    Answered by jonathan on April 27, 2016 at 02:18 AM

    Hi, 

    I have no luck so far, but I have asked help from colleague who is a master at CSS :-) 

    So we will update you here as soon as we have found a working solution.

    Thank you for your patience.

  • Profile Image

    Answered by fraanco3 on April 28, 2016 at 04:27 PM

    Thanks Jonathan! 

  • Profile Image
    JotForm Support

    Answered by jonathan on April 30, 2016 at 03:40 AM

    Sorry for the delays. Please check my test on this page 

    It was working like this 

     

    The difference... I used the old lightbox jquery code version.

    script src="https://form.jotform.com/static/feedback2.js?3.3.REV" type="text/javascript

    I removed the '2' in ...feedback.js? code.

    This is the actual test form https://form.jotform.com/61201616547955

    You can also view the source of my test page so you can see the full lightbox code I  used.

    Let us know if this did not work for you.

     

    Thanks.

     

     

  • Profile Image

    Answered by fraanco3 on May 02, 2016 at 07:02 PM

    Hello Jonathan,

    Thank you for continuing to research this bug. Unfortunately the proposed fix, reverting back to the old lightbox query, creates other issues (e.g. scrolling inconsistencies). Version "2" is the reason that I went to the lightbox in the first place. 

    There must be a solution to this. One thing that I observed -- initially when the lighbox window appears, the SUBMIT button is placed in the proper fixed position within the viewport -- i.e. 50% relative to the height of the viewport (bottom: 50%). That placement is only temporary; the SUBMIT button's proper position is then overridden and it moves to bottom: 50% of the complete FORM. If the form is long (mine is) and scrolls, the SUBMIT button ends up in the wrong positioning and ABSOLUTE relative to the form.

    Make sense?   I really want to continuing pursuing a proper fix to the lightbox/feedback2 jquery code.

     

    Thanks, Frank

  • Profile Image
    JotForm Support

    Answered by jonathan on May 02, 2016 at 08:33 PM

    Hi Frank,

    ... creates other issues (e.g. scrolling inconsistencies). 

    Can you tell us which scrolling issue you see specifically. Perhaps we can fix it within this resolution.

    I will look also for further enhanced solution/fix to it.

    Thanks.

     

  • Profile Image

    Answered by fraanco3 on May 03, 2016 at 09:32 AM

    Sure...the reason I use "feedback2" is related to how a lighbox behaves on a mobile device. With "feedback" the lighbox does not stay contained within the viewport of the mobile device (e.g. iPhone). Instead it becomes a long scrolling lighbox that extends outside of the viewport, forcing the user to scroll the form up/down unnaturally. Using "feedback2" the lightbox behaves properly, containing itself within the viewport, making scrolling and viewing more natural.

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 03, 2016 at 10:30 AM

    Thank you for the additional details about this issue you have explained above and I do believe it is understandable as to what you mean by that particular reason.

    If you don't mind, please allow us additional time to see if there is the possibility of a better method to potentially make it work more toward what you are asking for in fixing this problem.

  • Profile Image

    Answered by fraanco3 on May 20, 2016 at 05:38 PM

    Any updates?

     

  • Profile Image
    JotForm Support

    Answered by KadeJM on May 20, 2016 at 06:48 PM

    Unfortunately not yet and we do apologize about the wait.

    I've been testing it as much as I can to assist you with this further to try to find a feasible solution to your problem with it but other than Jonathan's workaround I am not having a whole lot of luck either through a few other similar methods that I even tried out.

    It currently seems so far that the updated Feedback2 is ignoring the existing css we've applied which is why it works on feedback1 but not feedback2.

    Perhaps our developers might have a better solution to this so I've opened up a feature request for you on your behalf within this thread for consideration of such settings to control it better if possible.

    If there's any news of something to correct it or as soon as we have any further breakthroughs then we'll notify you here again.

  • Profile Image

    Answered by fraanco3 on September 30, 2016 at 12:52 PM

    Hello JF support...any updates on this bug?  I would love to be able to have the floating submit button!

     

    Thanks...

  • Profile Image
    JotForm Support

    Answered by KadeJM on September 30, 2016 at 02:54 PM

    Heya fraanco3, I know it's been quite some time now but, unfortunately there's still no news yet otherwise we would've updated you already beforehand so that's the bad news since it appears there's no additional breakthroughs on it.

    However, the good news aside from that is our devs marked for a possible feature considering it to be an advanced feature to potentially help with correcting this type of problem for such usage in the future if we're able.

    And if so, it's not anything we could guarantee any timeframe on yet but if we do then you'll be the first to know.