v4: The Advanced Editor is buggy, not responsive to changes

Hello,

I have been experiencing this with a few forms, especially after changing over to v4: the Advanced Editor does not appear to currently be consistently reflecting changes that are made in the general editor on the form.

I have attached a few screenshots below to illustrate this. I made a clone of a form and made no changes to it:


In entering the Advanced Editor, you can see that the form does not retain some of the settings that were originally on the form (for instance, page color, form transparency, etc.). The form says they are there (on the right), but do not visually express this (on the left).


In attempting to make ANY changes using the Advanced Editor, nothing happens. Even if I change the page color (as in the screenshot below), to a red color, the changes do not take effect in the Advanced Editor.


As a further example, if I save in the Advanced Editor (for instance, with the above red color) and return to the normal form editor, not only do these changes not take effect, the form actually doesn't retain ANY of the original settings/colors (transparency, etc.) despite me only changing one thing in the AE:


As you can see in the last screenshot above, the red option I selected remains intact in the Form Designer even though the form's actual page color is NOT red.

This is NOT only a problem with color selection. Any type of other option/selection in the Advanced Editor also returns similar issues. Therefore, I cannot change what happens for form highlighting, spacing, font size, etc. since these are only options in the Advanced Editor.

I have been able to reproduce this problem in multiple browsers (Chrome and Firefox) as well as in multiple forms.

Any insight into these issues? Should I return to v3 in the meantime in the hopes that the Advanced Editor still works properly with it?

Thank you!

You can and should keep using our Form Builder version 4, as it contains a huge amount of structural improvements over version 3. The difference in styling of the form you've mentioned comes from the internal styles that the Form Builder applies to the form in the background.

To explain it simply, version 3 saves its internal form styles and preferences in a way that is not fully compatible with version 4, so as soon as you re-save the form in V4, some of these incompatible preferences become lost. However, this is fairly easy to resolve - we just need to move such incompatible code from within the CSS that the V3 software added automatically, to the CSS that you add manually to the form as a user in V4.

For example, your affected form has this part of CSS that was added by V3 and is not recognized by V4:

    .form-all {
      font-family: Muli, sans-serif;
    }
    .form-all .qq-upload-button,
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
      font-family: Muli, sans-serif;
    }
    .form-all .form-pagebreak-back-container,
    .form-all .form-pagebreak-next-container {
      font-family: Muli, sans-serif;
    }
    .form-header-group {
      font-family: Muli, sans-serif;
    }
    .form-label {
      font-family: Muli, sans-serif;
    }
 
    .form-label.form-label-auto {
     
    display: inline-block;
    float: left;
    text-align: left;
 
    }
 
    .form-line {
      margin-top: px;
      margin-bottom: px;
    }
 
    .form-all {
      width: 450px;
    }
 
    .form-label-left,
    .form-label-right {
      width: 150px
    }
 
    .form-all {
      font-size: 16px
    }
    .form-all .qq-upload-button,
    .form-all .qq-upload-button,
    .form-all .form-submit-button,
    .form-all .form-submit-reset,
    .form-all .form-submit-print {
      font-size: 16px
    }
    .form-all .form-pagebreak-back-container,
    .form-all .form-pagebreak-next-container {
      font-size: 16px
    }
 
    .supernova .form-all, .form-all {
      background-color: rgba(0,0,0,0.1);
      border: 1px solid transparent;
    }
 
    .form-all {
      color: rgb(255, 255, 255);
    }
    .form-header-group .form-header {
      color: rgb(255, 255, 255);
    }
    .form-header-group .form-subHeader {
      color: rgb(255, 255, 255);
    }
    .form-label-top,
    .form-label-left,
    .form-label-right,
    .form-html,
    .form-checkbox-item label,
    .form-radio-item label {
      color: rgb(255, 255, 255);
    }
    .form-sub-label {
      color: 1a1a1a;
    }
 
    .supernova {
      background-color: #2d539a;
    }
    .supernova body {
      background: transparent;
    }
 
    .form-textbox,
    .form-textarea,
    .form-radio-other-input,
    .form-checkbox-other-input,
    .form-captcha input,
    .form-spinner input {
      background-color: rgba(45,83,154,0.001);
    }
 
    .supernova {
      background-image: none;
    }
    #stage {
      background-image: none;
    }
 
    .form-all {
      background-image: none;
    }

You can add these CSS codes into your form by following this guide:

https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes

The form will once again display as it used to when you preview the form. Please try it out, and let us know should you need further assistance. Thank you.