Form Builder V 4.0: Builder changed styling of my form.

  • Profile Image
    davidhoffman
    Asked on March 28, 2017 at 08:50 PM

    I just went to check one of my forms and now all the sizing is messed up.  I never published a new form, but changes are being reflected on my live site.  The form is now too large and the whole thing looks terrible.  Please help asap.

  • Profile Image
    seth
    Answered on March 29, 2017 at 03:41 AM

    Hello,

    I checked your form and updated a little bit. I see that your styling has issues. This might be related to the Version 4 Builder. 

    Here is the look of your form now:

    Can you please give us the details of the changes happened? What was your form look like before, can you sen us a screenshot?

     

    I am escalating the issue to our developers, let them look at the issue and fix it.

    Thank you very much for reporting this issue.

    We will notify you via this thread when we fix it. We will update your styling after investigating the issue.

    Regards.

  • Profile Image
    Rose
    Answered on March 29, 2017 at 04:25 AM

    Thank you for reporting us this issue. 

    Ticket has assigned but I would like to inform you that you can revert back your form to the last version from its revision history. You may have a look at following user guide for this process. 

    https://www.jotform.com/help/294-How-to-View-Form-Revision-History

  • Profile Image
    kaan
    Answered on April 11, 2017 at 07:49 AM

    Hello davidhoffman;

    Due to structural changes we've made in v4 some parts of the old forms created in v3 like your form gets changed. Fortunately I can provide you a CSS code block to get almost same look and enable editing on v4.

    You can see how to inject CSS codes to your form from this article.

    -- CODE BEGINS HERE --

    .form-label {
    box-shadow: none !important;
    padding: 0;
    font-weight: 200;
    color: #fff;
    font-size: 10px;
    }

    .form-submit-button {
    padding: 1px 4px !important;
    font-size: 11px !important;
    }

    [data-type='control_text'] p {
    font-size: 12px;
    color: #fff;
    }

    .phone-separate {
    color: #fff !important;
    }

    .form-sub-label {
    color: #999;
    display: block;
    font-size: 9px;
    }

    .form-line {
    padding: 0px;
    }

    input {
    padding: 1px !important;
    font-size: 11px;
    }

    input::placeholder {
    font-size: 11px;
    }

    .form-line-error {
    color: #000 !important;
    background-color: #faa !important;
    }

    .form-line-active .form-label,
    .form-line-error .form-label {
    color: #000 !important;
    }

    * {
    font-family: 'Verdana';
    }

    .form-all {
    box-shadow: none !important;
    }

    -- CODE ENDS HERE --

    Feel free to contact us if you need further assistance. Have a nice day.