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.
Unable to match JotForm preview with live Zenfolio pageAsked by MalindaGoldberger 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!
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?
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:
background: url("https://www.jotform.com/uploads/MalindaGoldberger/form_files/20161126-IMG_4915.jpg") no-repeat center center fixed;
Thank-you so much for your time on this! It is greatly appreciated! The fix you provided works! Hooray! Thanks again!