How to embed a form inside a JQuery Nivo Slider

  • saviorhs
    Asked on March 5, 2016 at 9:44 AM

    I am trying to embed a jotform into a slider on my page and have it display over the slider. Unfortunately it will only display before or after the slider. How do I get it to display over the slider?

     

    I have an image showing on the page now that illustrates what I am trying to do. I want to have a jotform display where the image shows the form on the slider.

  • Boris
    Replied on March 5, 2016 at 7:08 PM

    I currently see only one JotForm form on your website - the one in the footer:

    How to embed a form inside a JQuery Nivo Slider Image 1 Screenshot 40

    As I understand it, you would instead like to place a form inside the #slider element near the top of the page:

    How to embed a form inside a JQuery Nivo Slider Image 2 Screenshot 51

    Having a form inside the slider element could cause some issues that may not be apparent on first glance, because the slider itself is different in size based on the screen resolution - while the form will always have to take some minimal space in order to show all its fields/questions.

    Still, in order to embed the form into the slider, I would recommend first getting your form's iFrame embed codes.

    Your iFrame embed codes will look something like this:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/51867625434159" frameborder="0" style="width:100%; height:622px; border:none;" scrolling="no"></iframe>

    Please add the following styles into the iFrame embed code:

    position: absolute; top: 0px; right: 10%; max-width: 340px;

    So the code will end up looking something like this, with the changes highlighted in red:

    <iframe id="JotFormIFrame" onDISABLEDload="window.parent.scrollTo(0,0)" allowtransparency="true" src="//support.jotform.com/form/51867625434159" frameborder="0" style="width:100%; height:622px; border:none; position: absolute; top: 0px; right: 10%; max-width: 340px;" scrolling="no"></iframe>

    Next, you will need to embed (paste) these modified codes into your existing slider, at the very end. So please paste it inside your .slider-main element on the page, just before its ending </div> tag. The form should end up looking like this:

    How to embed a form inside a JQuery Nivo Slider Image 3 Screenshot 62

    Remember to set up a background color on your form, otherwise the form will be transparent and may be hard to read against the slider background.

    Please try it out and let us know how it goes.