Unable to match JotForm preview with live Zenfolio page

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!

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.

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

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"

      onDISABLEDload="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. 

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? 

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;

}

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