Unable to change the form background in the Form Builder

  • cpgordon
    Asked on June 19, 2015 at 10:22 AM
    up until i entered the form designer my form didnt have any custom CSS in it - but when i changed the highlighted field background color that added custom CSS.  I went to remove the custom CSS, expecting that my form would revert to its original state - white font, blue background (as listed in Preferences > Form Styles) but after i took the custom CSS out the background color is WHITE - but only when looking at the form in the form builder (when i go to preview the form it is indeed blue).  What happened?  and how do i get the background color in the form builder to return to its blue color (so i can read and edit the white font).....thanks...

    form in question is here : http://www.jotform.com//?formID=51386648304156  

  • Jan
    Replied on June 19, 2015 at 10:27 AM

    The Form Designer actually inserts CSS code in the form. If you removed them, some or all styling might be disabled.

    I understand that the background of the form in the Form Builder is white. In order to put it back to blue is you need to go back to Form Designer and set the background to blue.

    Unable to change the form background in the Form Builder Image 1 Screenshot 20

    Hope this works. Let us know if you need further assistance. Thank you.

  • cpgordon
    Replied on June 19, 2015 at 10:34 AM

    that doesnt make any sense.  The background was blue before i ever even opened the form designer.  It was blue both in the form builder and the preview.  All i did was remove the css code that the designer inserted - please explain to me why the form hasnt simply reverted to its pre-designer state.  

  • David JotForm Support
    Replied on June 19, 2015 at 11:47 AM

    If you have a theme applied to your form, the elements added by the theme and elements added by the form designer may try to override each other.   The designer loads your form, applies whatever changes were made, saves the form, then it is re-opened in the form builder.  When the form is opened in the builder again, the theme settings are once again applied.  Depending on what you added, when the CSS is reapplied, one may win out over the other.  Removing the CSS will not remove CSS applied by a theme.  When the form is loaded in a web page, further interpretation of the CSS is made.  Again, depending on how and what is applied, the form designer and form builder may show two different versions of the form.

    If you would like to override everything and make sure your background color shows in both, add this CSS to your form:

    body, .form-all{

    background-color: #000033 !important;

    }

    This will override any other CSS applied to either place and show the background color the same no matter where you open the form.

    If you have any further questions, let us know and we will be happy to help.

  • cpgordon
    Replied on June 19, 2015 at 11:48 AM

    thanks - appreciate the help - so basically what you are saying is that you cannot "undo" the Designer changes all the way - you can only revert by adding yet more CSS code, yes?

  • Kiran Support Team Lead
    Replied on June 19, 2015 at 1:16 PM

    All the changes made to a form in a session from the designer can be reverted by using the Revision history. Adding custom CSS would be helpful when you want to override other CSS applied to the form at either place of Form Designer or Form Builder. The !important declaration in the custom code makes more difference in overriding the existing CSS.

    Hope this information helps.