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

    Lightbox Embedded Form: Elements with fixed position do not work.

    Asked by fraanco3 on February 24, 2017 at 01:23 PM

    Thanks for the effort on this. I really appreciate it. Unfortunately the lightbox/feedback methods have other issues that I have also reported, most notably neither one will work properly with "fixed positioned" elements.

    To illustrate, create a button element on a lightbox form and add the following CSS for it so that it 'floats' above the form in a fixed position while you scroll - a.k.a. a "Checkout Now" button. It will work fine in the editor, but if you publish it as a lightbox or feedback widget, the fixed position, overlay elements do not work as expected.

     

    .form-buttons-wrapper {

        z-index : 99999 !important;

        position : fixed !important;

        top : 0 !important;

        padding : 0px !important;

        margin : 0px;

    }

  • Profile Image
    JotForm Support

    Answered by Kevin_G on February 24, 2017 at 02:04 PM

    I've been testing this and found what you're reporting, upon my findings I can see the CSS code is injected to the form and it indeed works, but the form is embedded in the lightbox container within an iFrame, this iFrame has the full height of the form so there's no scroll bar in the iFrame and the scroll bar actually belongs to the form's container. 

    Example, this is how the form currently works inside the lightbox container: 

    As you can see the iFrame takes the form's height, now if you use the iFrame code you're able to change the iFrame height, something that's not allowed with the lightbox code, so using the iFrame would work: 

    So I think that setting the iFrame's height the same as the lightbox container and allowing the scroll bar in the iFrame code would allow the fixed position to work properly. 

    I will forward this to our second level so our developers may implement this change, we  will let you know as soon as we get any update regarding this.