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

    My text won't scroll over a background image in lightbox.

    Asked by sapphireventures on January 13, 2016 at 05:35 PM

    I have a box of text in a lightbox form and I would like the text to scroll over a fixed background image. I uploaded a background image and set it to a fixed page background, but when I embed the jotform and open it up, the text doesn't scroll over the background image.

    background image scroll
  • Profile Image

    Answered by sapphireventures on January 13, 2016 at 05:51 PM

    In this preview (https://form.jotform.com/60108436836153) the background and text is working how I would want it to, but when it opens as a lightbox, the full text no longer scrolls over the background image

  • Profile Image
    JotForm Support

    Answered by jonathan on January 13, 2016 at 10:45 PM

    It is possible that the issue was due to script conflict because of the lightbox embed script.

    Can you share to us the URL of the web page where we can check the actual embedded form. We will be able to provide a clearer suggestion and workaround if we can check on the actual website where the form was used.

    Thanks.

  • Profile Image

    Answered by sapphireventures on January 13, 2016 at 11:01 PM

    Hi Jonathan,

    URL: http://perspectives2016.squarespace.com/arrived

    Password: jotform

    click: "+ Expand" to view the lightbox.

    Please let me know if you have any questions.

    Thank you!!

  • Profile Image
    JotForm Support

    Answered by jonathan on January 14, 2016 at 12:13 AM

    Hi,

    The password doesn't work though 

     

    Will wait for your update.

  • Profile Image

    Answered by sapphireventures on January 14, 2016 at 12:30 AM

    Really sorry about that - please use password below

     

    Password: Laura

  • Profile Image
    JotForm Support

    Answered by mert on January 14, 2016 at 09:06 AM

    Hi there,

    I replicated the same issue with you, "background-image: fixed;" is not working on iFrame script. Currently, I'm trying to find a fix for that problem. I will come back with the solution for that problem.

     

    Thank you for your patience.

  • Profile Image
    JotForm Support

    Answered by Welvin on January 14, 2016 at 09:12 AM

    Seems like that is because of the form being placed inside an iframe. The best way you can fix this now would be to directly add the CSS for the background image in the lightbox form. You have to add the following custom CSS codes to your website stylesheet:

    .jt-feedback div {

       background-image: url("https://www.jotform.com/uploads/sapphireventures/form_files/corner_background.png");

       background-attachment: fixed;

       background-position: top center;

       background-size: auto;

    }

    This should work. http://screencast.com/t/OKHXlWXQDx 

  • Profile Image

    Answered by sapphireventures on January 14, 2016 at 12:52 PM

    I inserted the code above into the custom CSS but still having the same trouble. Not sure what I'm doing wrong here.

  • Profile Image
    JotForm Support

    Answered by jonathan on January 14, 2016 at 02:59 PM

    Hi,

    I was also still able to see the problem on the website.

    Please allow us more time to check and figure out a workaround. We will update you about it as soon as we can.

    Can you also confirm that your websit is a Squarespace website?

    Thanks.

  • Profile Image

    Answered by sapphireventures on January 14, 2016 at 03:49 PM

    thank you!!

    yes, it is a squarespace site

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 14, 2016 at 07:12 PM

    Hi,

    Thank you for confirm us that, I tried to find a way to display our form correctly with no luck, I will test more and also will ask to my colleagues in order to know if some of them have found a workaround.

    Thanks.

  • Profile Image

    Answered by sapphireventures on January 15, 2016 at 11:01 AM

    Great, thank you! I appreciate all the help

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 15, 2016 at 12:54 PM

    Hi,

    I have tried to fix it with no luck, but I agree with the code provided by my colleague Welvin above, just with a change, set the background of your form to transparent, I think that you can not see the change because the form has a white background, please, try setting it to transparent, add this CSS code in your website and try re-embedding the form, it should set the background to the form container instead of assign it to the form : 

    .jt-feedback div {

     background-image: url("https://www.jotform.com/uploads/sapphireventures/form_files/corner_background.png");

    background-attachment: fixed;

    background-position: top center;

    background-size: auto;

    }

    Do let us know the result.

    Thanks.

  • Profile Image

    Answered by sapphireventures on January 15, 2016 at 01:13 PM

    I can't get it to work. Below is the code from Jotform with the transparent background. Is there something wrong with that?

     

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

          var JFL_60108436836153 = new JotformFeedback({

            formId: '60108436836153',

            base: 'https://form.jotform.com/',

            windowTitle: 'Title Me',

            background: '#000000',

            fontColor: '#FFFFFF',

            type: '1',

            height: 700,

            width: 700,

            openOnLoad: false

          });

        </script>

          <a class="btn lightbox-60108436836153" style="margin-top: 16px">

            Two Lies And  Truth ABout The Bubble

          </a>

     

    Below is what my lightbox looks like:

  • Profile Image
    JotForm Support

    Answered by Kevin_G on January 15, 2016 at 02:44 PM

    Hi,

    I checked your website and I can see the background has been applied to the form container, I removed all the Form's code and I see the background is there : 

    I also, can see that the background is still white, try to set it as transparent :

    Also, remove all the background properties for your form, inject this CSS code : 

    .supernova{

    background:transparent !important;

    }

    Also, add this code in your website :

    iframe#60108436836153{

    background:transparent !important;

    }

    And remove the background image that is currently in your form.

    Here is also a result with the form working :

  • Profile Image

    Answered by sapphireventures on January 15, 2016 at 03:03 PM

    I've done everything listed above, but I can't figure out how to make the form background transparent - I believe i set it as transparent in the design tab and am not sure where else to make that change to have transparent.

  • Profile Image

    Answered by sapphireventures on January 15, 2016 at 03:49 PM

    Please ignore my last question - was able to remove the background image! Thank you for all your help

  • Profile Image

    Answered by sapphireventures on January 15, 2016 at 04:10 PM

    It worked once, but I tried to remove the background again and no luck

     

  • Profile Image

    Answered by sapphireventures on January 15, 2016 at 04:22 PM

    I was able to get the background transparent again, but how do I save that transparency? When I refresh the page the changes are gone and the background is back to white.

  • Profile Image
    JotForm Support

    Answered by jonathan on January 15, 2016 at 09:20 PM

    I checked on the website and I cannot see the background image anymore.

     

    So its the same thing with the form http://www.jotform.us/form/60108436836153

    If you like you can just revert the form version to the previous version when the transparent background was still working.

    You can use the Revision History tool.

    user guide: http://www.jotform.com/help/294-How-to-View-Form-Revision-History

    Let us know if you are not able to redo it using the revision tool and we will look for other workaround.