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 to embed a form inside a JQuery Nivo Slider

    Asked by saviorhs on March 05, 2016 at 09: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.

    Page URL:
    www.saviorhomeservices.com

    correctly cannot JotForm jotform display
  • Profile Image
    JotForm Support

    Answered by Boris on March 05, 2016 at 07:08 PM

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

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

    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" onload="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" onload="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:

    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.