Unable to match JotForm preview with live Zenfolio page

  • Profile Image
    MalindaGoldberger
    Asked on January 17, 2017 at 09:51 AM

    I am unable to get my JotForm to render correctly with my Zenfolio page. I have tried embedding the code as an iframe, I have also tried pasting the iframe code directly in the "source code" field. Main issues - unable to have background image stay fixed while form scrolls, and the mobile view is not rendering correctly (fields are too long and going off screen)

    My current page has a place holder image for ease of trial/error editing. I have tried so many iterations at this point...I am open to all suggestions for workarounds!

  • Profile Image
    KadeJM
    Answered on January 17, 2017 at 12:05 PM

    Thank you for letting us know about the issues you are having with getting your form to display properly on your zenfolio page as well as on mobile devices.

    We do apologize about this problem and will gladly do what we can to help get it resolved for you.

    Please allow us a bit of time to look this over more and we'll get back to you with a potential solution to help fix it for you.

  • Profile Image
    MalindaGoldberger
    Answered on January 20, 2017 at 05:06 PM

    Hi - has there been any headway on this? Or am I better off just waiting until JotForm 4.0?

  • Profile Image
    Kevin_G
    Answered on January 20, 2017 at 10:30 PM

    It is not necessary to wait until v4 builder is released to get this working, after inspecting the form using the iFrame code I can see the image does not get fixed because the iFrame has enough height to display the form completely, this is why when you scroll on the form you can see the image move as well, iFrame takes the form as a separate HTML source and if you would like to get the image fixed as well you will need to remove the JavaScript code of the current embedded form and set manually the height for your form, allowing scroll will help too. 

        <iframe

          id="JotFormIFrame"

          onload="window.parent.scrollTo(0,0)"

          allowtransparency="true"

          src="https://form.jotform.com/FormID"

          frameborder="0"

          style="width:100%;

          height:500px;

          border:none;"

          scrolling="yes">

        </iframe>

    This is a sample code about the one you should embed on your webpage, getting a height value less than the form's height will allow the page to scroll the form and see the fixed background effect. 

    You could also get the source code of your form and this should also work as it works when loading the single link to the form: How-to-get-the-Full-Source-Code-of-your-Form

    Please, give it a try and let us know how it goes. 

  • Profile Image
    MalindaGoldberger
    Answered on January 23, 2017 at 02:14 PM

    Thank you for this, but it was very unsuccessful as it rendered the mobile view completely useless. I have revised the design to show a custom background image (so that when I AM able to fix it, it is more in line with what I am looking for) but now even using the source code, the only thing that renders is a grey background vs. a custom image. I am very frustrated that I can't use the simple "embed" function, nor am I able to just use the iframe option either. I don't understand how there can be such drastic differences between what I am seeing on JotForm and what I am seeing on my webpage.

    Do you have any additional thoughts or suggestions? 

  • Profile Image
    KadeJM
    Answered on January 23, 2017 at 04:34 PM

    My apologies about any delays or continued trouble you are having with this problem.

    I am able to replicate this issue you've mentioned with the form's source code via a separate test not showing the grey background instead of your image background even though it works on mobile.

    It appears that somehow the image is getting ignored which might be because of being from another theme if any so it's sticking to the originals because the css would override that from it's origin.

    Anyhow after further attempts I believe I may have possibly found a workaround to force it which you can try adding to your source code and if it works then you can tweak it more from there to make it fit behind your form better even on mobile.

     

    So inside of the embedded form source code look for the following line:

    <style id="form-designer-style" type="text/css">/* Injected CSS Code */

     

    Add this line of css after it:

    .jotform-form { 

      background: url("https://www.jotform.com/uploads/MalindaGoldberger/form_files/20161126-IMG_4915.jpg") no-repeat center center fixed; 

      -webkit-background-size: cover;

      -moz-background-size: cover;

      -o-background-size: cover;

      background-size: cover;

    }

     

  • Profile Image
    MalindaGoldberger
    Answered on January 24, 2017 at 09:54 AM

    Thank-you so much for your time on this! It is greatly appreciated! The fix you provided works! Hooray! Thanks again!