JotForm Lightbox - I have a form on my companies website but I am unable to change the position attribute

  • Jonathan Robson
    Asked on August 11, 2020 at 3:41 PM

    Is there a way to inject custom CSS in an embed code for a form? Below is our current form and it works great, but we want it to stay in the center of the screen until the user clicks off of it:


    add_action('wp_footer', 'loadJotFormQH');

    function loadJotFormQH(){ ?>

    <div class="test2020">

        <script src ="https://form.jotform.com/static/feedback.js" type="text/javascript">

            var JFL_201906943035049 = new JotformFeedback({

              formId: '201906943035049',

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

              windowTitle: 'Form',

              background: '#FFA500',

              fontColor: '#FFFFFF',   

              type: '2',

              height: 650,

              width: 800,   

              openOnLoad: false

            });</script></div>

    <?php }


    I see font color, background, height, etc. Is there a way to put "position: fixed;" Or is that not possible? 


    Steps to recreate:


    -Go to the stage site https://stage.quakerhoughton.com/

    -Click 'x' on the popup

    -Click the Contact Us button

    -Scroll down and see that it is not fixed position, but absolute



  • Mike
    Replied on August 11, 2020 at 8:14 PM

    Have you tried using our updated lightbox code? In the updated version, the lightbox has a fixed position by default. To try the updated version you can get the fresh form lightbox code, or add 2 to the feedback script.

    https://form.jotform.com/static/feedback2.js

  • Jon
    Replied on August 12, 2020 at 7:29 AM

    I have tried that, it results in a jquery clash and breaks my sticky menu. Is there another way? 

  • Bojan Support Team Lead
    Replied on August 12, 2020 at 9:57 AM

    Greetings.

    I have tried to access your site, and I get a 403 forbidden error. 

    However, I have copied the code you have provided, and I was able to replicate the problem. I tried to fix the element, but since the JavaScript generates new div at the end of the page, without any classes or IDs, I was not able to fix it. 

    As an alternative, we can suggest you a pop-up form.

    Thank you for your understanding.