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 can I make a paralax style background for my form?

    Asked by creativeprofessionals on July 10, 2015 at 02:46 AM

    Hi guys. 

    I've created the following form: 

    https://secure.jotform.co/form/51898503084866

    At the Jotforms URL, it looks great, with a static background image as the form scrolls down.

    However when I embed the code on our website, it has to stretch the image: 

    http://www.dsi.tv/uxdesignerapplication.html

    I inserted the following custom CSS into Jot forms according to your forum, but it still doesn't look like the form on the above Jotforms URL. 

    Can you help me?

     

    body, html {

    background: url(http://i1358.photobucket.com/albums/q765/bdewittcwe/Bubbles_2_zpsd2625200.png) repeat fixed;

    color: #FFF;

    margin: 0;

    padding: 0;

    -webkit-background-size: cover; /*for webKit*/

    -moz-background-size: cover; /*Mozilla*/

    -o-background-size: cover; /*opera*/

    background-size: cover; /*generic*/

    }

     

    Page URL:
    http://www.dsi.tv/uxdesignerapplication.html

  • Profile Image
    JotForm Support

    Answered by BJoanna on July 10, 2015 at 10:55 AM

    After inspecting your form and website behavior you are getting is normal because in first case you have just form which has background and when form is embedded to the website, background of site has priority and it will expand background of form. What can be workaround of problem and how you can achieve similar behavior is to remove background of the form inside of Form Designer and then to put background to your website directly inside of your source of site. 

    Also after inspection I see that you are using script for embedding your form on the website. We are recommending using the iframe code. With iframe code and CSS that you need to apply on the website, source of your web page need to look like this:

    <html>

    <head>

    </head>

    <body>

    <iframe id="JotFormIFrame" onload="window.parent.scrollTo(0,0)" allowtransparency="true" src="https://secure.jotformpro.com/form/51903752708963" frameborder="0" style="width:100%; height:3114px; border:none;" scrolling="no"></iframe>

    <script type="text/javascript">window.handleIFrameMessage = function(e) {var args = e.data.split(":");var iframe = document.getElementById("JotFormIFrame");if (!iframe)return;switch (args[0]) {case "scrollIntoView":iframe.scrollIntoView();break;case "setHeight":iframe.style.height = args[1] + "px";break;case "collapseErrorPage":if (iframe.clientHeight > window.innerHeight) {iframe.style.height = window.innerHeight + "px";}break;case "reloadPage":window.location.reload();break;}};if (window.addEventListener) {window.addEventListener("message", handleIFrameMessage, false);} else if (window.attachEvent) {window.attachEvent("onmessage", handleIFrameMessage);}</script>

    <style>

    body, html {

    background: url(http://www.jotform.com/uploads/creativeprofessionals/form_files/fullpagef1image1.jpg) repeat fixed!important;

    color: #FFF!important;

    margin: 0!important;

    padding: 0!important;

    -webkit-background-size: cover!important; /*for webKit*/

    -moz-background-size: cover!important; /*Mozilla*/

    -o-background-size: cover!important; /*opera*/

    background-size: cover!important; /*generic*/

    }

    </style>

    </body>

    </html>

    After using this form and this custom CSS website will look like this:

    Hope this will help. Let us know if you need further assistance. 

  • Profile Image
    JotForm Support

    Answered by BJoanna on July 10, 2015 at 11:06 AM

    I forgot to mentioned, you also need to set background of your form to be transparent.

  • Profile Image

    Answered by LorealStRemy on February 29, 2016 at 09:24 PM

    Removed.