What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.

At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.

We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.


  • Profile Image
    JotForm Support

    Injected CSS doesn't reflect the form in Builder

    Asked by candy on April 17, 2017 at 09:23 AM

    Our user named "yantiang" has reported us that the "Preview" mode shows a different version of the form in the Builder.

    I have cloned his form on my side in order to test it and I have seen that the injected CSS code does not reflect the form in the builder both in V3 and in V4.

     

  • Profile Image
    JotForm Support

    Answered by Rose on April 18, 2017 at 04:53 AM

    Hi Candy, 

    We investigated issue further and here is the results. 

     

    .form-textarea.custom-hint-group {

        border : 2px solid #ff2f00;

    }// this code can only be seen only when preview the form due to custom-hint-group. Since, the hint can only be seen when user come to that field on the preview of the form.

     .form-label.form-label-top {

    } // As no css code here, user can delete this part.

    #label_30 {

        color : #D05340;

    }// this works both on builder and preview

    #label_31 {

        color : #D05340;

    }// this works both on builder and preview

     .qq-upload-button.None {

        background-color : #ff2f00;

    } // This is a wrong code. That's why, it is not seen both o builder and preview.

    #cid_31 div.qq-upload-button {

     background-color : #ABAD48;} //CSS rules defined with #cid_{n} format are not supported by the builder due to syntax differences between builder and the real form itself. So, this can be seen only when preview the form. But user made small changes on the code. 

    .tabs-list li {

        font-size : 10px;

        font-weight : bold;

        color : #000000;

    }// this code is for a widget but there is no widget on the form. So, user can delete it. 

     .form-checkbox-item label {

        margin : 0px;

    } //This is ok.

     

    All in all, please send following css code to the user. This could be final code according to above review. 

     

    .form-textarea.custom-hint-group {

        border : 2px solid #ff2f00;

    }

    #label_30 {

        color : #D05340;

    }

    #label_31 {

        color : #D05340;

    }

    .qq-upload-button {

        background : #ff2f00;

    }

    #cid_31 div.qq-upload-button {

        background: #ABAD48;

    }

    .form-checkbox-item label {

        margin : 0px;

    }

     

    Here is the screen shot of the form on builder and preview.

    Builder :

    Preview : 

     

    Please inform user accodingly.

  • Profile Image
    JotForm Support

    Answered by candy on April 18, 2017 at 06:05 AM

    Hello,

    The user was informed.

    Thanks.