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

  • davidhoffman
    Asked on March 28, 2017 at 8: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.

  • seth
    Replied on March 29, 2017 at 3: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:

    Form Builder V 4 Screenshot 20

    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.

  • Rose
    Replied on March 29, 2017 at 4: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

  • Kaan JotForm UI Developer
    Replied on April 11, 2017 at 7: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.