Designer / design editor alters my background image.

  • cheekyface
    Asked on August 16, 2015 at 6:27 AM

    Hi.
    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. 

    Designer / design editor alters my background image Screenshot 30

    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.  

     

    Designer / design editor alters my background image Screenshot 41

    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?

     

    Cheers,
    Danny.

  • Welvin Support Team Lead
    Replied on August 16, 2015 at 3:03 PM

    Hi Danny,

    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:

    Designer / design editor alters my background image Screenshot 40

     

    b. In the background image settings, make sure that the Page Background URL is present:

    Designer / design editor alters my background image Screenshot 51

    If the URL is not there, you can add it. Here's the link:

    https://www.jotform.com/uploads/cheekyface/form_files/Face%20Painting%20-%20Girls%20backgrounds2a.jpg

    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).

    Designer / design editor alters my background image Screenshot 62

     

    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.

    Thanks