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.
Designer / design editor alters my background image.Asked by cheekyface on August 16, 2015 at 06:27 AM
When Jotform introduced the design editor I had already an existing form (that I have since copied I think) and I found that possibly the settings in the original form were not compatible with the designer module and the way it worked.
I can't describe in too great detail what the problem is and it's probably mostly going to be better explained with images but the basic idea is that when I try to make a change to the background images on my form it automatically changes a setting that I don't know how to manipulate in order to fix it again.
the form I'm talking about is this one: http://form.jotformpro.com/form/52273228251955 (it's actually a copy of the original so that I can play with it without altering the original).
The problem I have is with the background of the form and how to actually identify which area is the the form background and which area is the page background. It seems that if I make a change to select the option to have no background on the form then I lose the colourful background image you can see below. if I select to have no background on the page then its the same thing. If however I try to alter the repeat option then I get a change that I can't fix. There is no "undo" button so I have to work it out from the CSS I think but I can't see anything in the CSS that relates to this area showing any kind of background (and yes I have highlighted the area I'm referring to when I look at the CSS.)
To show you what I mean have a look at the screenshots below...
1. this one is how the form is supposed to look.
2. This below is how the form looks after I try to alter any of the background options. To see a preview I have no option but to save it so then I have to go back to the history to take it back to the original version. The image below is with the form in the editor but it still looks like that in live version. You can see that where I originally have a semi-transparent background the change removes that setting and replaces with it with a graded dark to light background and it's repeating the image.
I thought that perhaps I had at some point used such an image and now the form reverts to that when I try to alter it. This is why I thought that possible the CSS would allow me to fix this but as I mentioned I can't see a URL to this image or any reference to this effect in the CSS.
Ultimately what I'd like to do is just have the colourful background image locked so that the form scrolls against the image (not the entire page). I don't think it would be that hard but now discovering how tricky this is I'm reluctant to do anything to the form via the design editor.
Please see if you can do this for me and if you have the same thing happen?
I understand and our apologies if this cause you any troubles and inconvenience. I would suggest cloning the original form again and do the following:
a. In the cloned version of the form, change the theme from XXL to Default or Nova Theme:
b. In the background image settings, make sure that the Page Background URL is present:
If the URL is not there, you can add it. Here's the link:
You should be able to alter the positioning without losing the image. But if the "Form Background" is still in gray colors. You can check it in the Color Scheme section. Make sure that the frame background is still rgba(255, 255, 255, 0.85).
The CSS codes that are added by the Designer aren't available in the CSS tab. You can view them by going to the inject CSS area in the form preferences (https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes), but we do not recommend altering any of the designer CSS. Otherwise, that will just create another problem as soon as you load the form again in the designer.
I hope that helps.
Please let us know if you need further assistance about the form.